React and Beyond: Part 1
React is one of the most popular Javascript libraries for developing websites from the Frontend view. In this article, complementing React in the blink of an eye! we will check 5 topics related to it: Lifecycles, Data fetch, Styles, Redux and Sagas.
React and Beyond: Part 2 — Being redacted (Redux and Sagas)
React has its own life…and data!
Each component has a life on its own and no, I’m not talking about you React App having its own…sort of.
When we declare a component, we can have access to functions from it called life cycles. Each life cycle is executed on a determined time at different stages. From born (When the component is rendering), growth (When the user can now interact wit the component) and death (When the component is destroyed or won’t appear anymore on the site).
A detailed list of these methods can be consulted here.
One of the most common and used life cycle is componentDidMount(), with this method we can execute AJAX requests and, with the data request, rerender the components and show the acquired data on the component as we need it.
To exemplify this, we have created a repository for a Pokemon Pokedex site. The backend creation of it can be located here.
After setting the ReactJS application following the Readme requirements, you will need to do a checkout to the branch called 03-api-call-rest. You will see a directory called Home inside Pages directory, inside this, we will have create the logic to fetch the data and we will have the following code.
As we can see, inside the componentDidMount() method, we make a request to our Pokemon backend endpoint with axios library and then, after receiving the response we set it out on our component state to trigger a rerender of it and make it take the data we are setting into its state.
Also, following the logic, if there’s no data a Loading text should appear and, If data is now fetched and set on the state, we update the component to pass the data to a component called PokemonCard via props which will show the info of the component we are getting.
If everything goes as expected, you will see something similar to this:
Data looks cool…but…
We have fetched the data from our Backend endpoint and everything seems to work perfectly but…the style is really…plain.
There are different ways of styling components on React:
With inline styles: which is by creating an object with the CSS properties we want the component to take. As we can see below, we create a constant with the style properties we desire and then we pass it down to our component with the style props and the properties will be applied to the element.
Importing CSS: As in any order javascript library or framework, we can create Stylesheets separated from the file and then import the styles on the components. Differently from these, React instead of using the property class uses className to define the CSS styles, this sometimes can cause name collisions but It’s also a good alternative for dynamic styles application.
Both are great options, however, If we could have the best of both worlds…Fortunately, there’s a solution for it: Styled Components!
This library is known for having a CSS-in-JS usage which means that, inside a Javascript constant, we can declare the styling properties and create a stateless component which will come wrapped with the styles we declare inside it.
Among the advantage we have:
- Making CSS code more easily to mantain
- Better readability of the component
- Painless changes on the style
- Avoid classnames CSS collisions
To see this working on the Frontend Pokemon project, It’s neccesary to checkout on the branch called 04-styled-components. One of the major changes from previous branches is that now, most of the pages and existing components have a file within their directories with the .styled.js extension. If we start the React Application, we can see how now the styles are being applied to each comment and, taking an example file, we can see that the readibility improved from having just the HTML tag names such as <div> or <ul> to something more friendly for the developers to modify.
If we start the React Application, we should be able to see a newly and fresh design for our Pokemon site.
Where can I go from here?
You are free to check the repo and modify to improve or tests the capability of the libraries and topics that we’ve covered so far.
On next article we will take on two very interesting topics: Redux and Sagas
