A one page React app that show interesting quotes.See project
This project was part of the freecodecamp's Front End Library Projects . I decided to include this project because it helped me to implement React in a single page app.
In this project the next technologies were used: ReactJS, React libraries (Axios for http requests, gh-pages to publish, FontAwsesome to add icons and CSS modules) ,HTML5, CSS,Git (with Github), Ubuntu Linux operating system and VSCode.
- Create a simple app that makes a simple HTTP request
- Render elements by accesing the app state properties
- Use props to modify the page layout
- Style the compoents using CSS modules
- Make a button that tweets the current quote on screen
I applied my basic ReactJs knowledge to create a webapp that makes HTTP requests and is more simple than a normal HTML5, CSS and vanilla JS web.
I used this code to "clean" the raw data from Mr.Jakub Petriska (https://gist.github.com/JakubPetriska/060958fd744ca34f099e947cd080b540). This code extracts all the text thas is between double quotes("") then it saves it into an array.(arr).
let arr = str.match(/(".\*")/gm); let emparr = [];
emparr is used to create an array of objects that contains an id, author and the quote
for(let i=0; i<=arr.length; i++) { if(i>0&&i%2!==0) { let tempArr = arr[i].split('",'); emparr.push({id: i, author: tempArr[i-1], title: tempArr[i]}) } }
emparr is hosted in firebase (https://alfarugalibrary.firebaseio.com/) from where i used axios to retrieve the single quote data. I'm not sure whether or not this makes the application faster, but it prevents me to be dealing with a lot of text in my app.