React and Beyond: Part 1

Jose Almaraz
Oct 11, 2019 · 4 min read

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)

Image for post

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.

Home Page Container

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.

Pokemon Card Component

If everything goes as expected, you will see something similar to this:

Image for post
Everything working as expected!

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.

Inline Style Example

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.

Styled Components

If we start the React Application, we should be able to see a newly and fresh design for our Pokemon site.

Image for post
Site looking good!

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

The Startup

Medium's largest active publication, followed by +734K people. Follow to join our community.

Jose Almaraz

Written by

Mobile Application Developer, AWS Certified Developer Associate, React Developer. Software Engineer @ Wizeline

The Startup

Medium's largest active publication, followed by +734K people. Follow to join our community.

Jose Almaraz

Written by

Mobile Application Developer, AWS Certified Developer Associate, React Developer. Software Engineer @ Wizeline

The Startup

Medium's largest active publication, followed by +734K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store