Learning React: The Main Concepts
Mastering these key React concepts will help you very quickly to get up and running with this new front-end library and become a React guru.
Alright. It’s been a while since I’ve sat down and actually wrote something for my blog. So today is a perfect opportunity to fix that by providing you with an eagle’s eye overview of the main React concepts.
Second, there’s a reason why this library has become so popular today, it has some magic that can make creating complex UIs less painful. Things like the
virtual DOM, which allows rendering only parts of the page that’s changed is certainly a nice thing to have.
So, without further ado let’s dive right into it.
A React component is an individual item that can contain other items. It’s like a piece of a puzzle that when combined with other pieces represents your application.
Components are great because of their reusability. Once you define a component, you’re now able to take that component wherever you want, you just need to supply data for it.
You might have a component that handles logic, for example, processes what happens when the user clicks a button, and then you might have a component that just displays stuff, something like a wrapper, or a container that’s providing data.
Stateless functional components
A simple form of a component is called a stateless functional component which is just a function that takes in data via something called
props, returns some
JSX and then spits out DOM elements on the page.
There’s also class-based components. You can use them if you need some additional features like state.
Each class-based component has a
render() method, which describes how your component will be rendered to the page. That’s where your HTML typically goes.
Things to note here:
- It’s a best practice to capitalize all your classes because lowercase names are reserved for HTML elements.
- The fact that you import React more than once in the different components of your app doesn’t matter. In the end, there’s going to be only one copy.
- You can only return one element from a render method. If you want to return multiple sibling elements, use
Remember the thing that’s called
Note: In earlier versions of React when you want to add a class to an element in your JSX, you have to write
Data in React
Now let’s look at how does data get into components.
You can take data into your component in three ways:
Let’s say that you have a movie database website and a component called the movie and you want to feed that component an object with the movie title, a description and an image. This can be done by passing props to the component.
this.props. If you have React Dev Tools installed, you can use it to peer into a component and see the props and state.
One thing to note here is that data can go down, but it can’t go up from a child to parent component. If you want the data to go through 3-4 levels down, you have to pass it down all the way. Of course, there are a lot of different solutions for this situation, like Context, external data management tools like Redux.
In React you have a couple of different prop types –
child props and
render props. The default props that React is providing you is called
Render props give you the ability to access things from the parent component in your children.
While the syntax of it leaves much to be desired it allows to make the code way more reusable. You’ll see this in things like
Passing data through multiple levels can be cumbersome for certain types of props like locale preference, UI theme. So, smart people from Facebook came up with something called the Context.
It’s something relatively new in React and it’s a way to pass data through the component tree without having to pass props down manually at every level (prop drilling).
You can set your state somewhere and then utilize it via context. All you need is to define your context at the top of the application and then consume it anywhere else in your components.
State is another core feature of React. It’s a place where you can store component data. Every component can have state.
State is going to be an object with any key-value pairs that we want to store there.
For example, you can have a form with a couple of inputs where user can enter some data and upload an image. Typically you would mirror that input data to the state and then that state will populate the input. It’s a nice little way to keep it temporarily inside of that component before you submit it to the backend.
Note: When working with state, never modify it directly. Use
There are some external libraries to manage the state of your application. The one that React comes with is called State and another popular one is Redux. It’ll wrap your data and just inject it directly from the Redux store into the props of your component.
There’s also MobX and some other solutions, but over the years Redux gained the most popularity. However a lot of the community is looking for something else now and some people have turned to Apollo. It’s not as polished as Redux, but they’re definitely working on it.
How to get the data into React components?
So, how do you fetch the data into the application? Well, you simply need to bring your own tool to do that. You can use relatively new Fetch API or you can use a library called Axios, it’s based on
XMLHttpRequests and has manually implemented a lot of things that you get for free with Fetch.
Generally, in one of the lifecycle methods of a component you fetch a list of things that you need from the API, save it to the state and then pass it into props or render it out directly.
The downside to that is that you have to handle your own error states.
synthetic Event, which is basically a way to ensure that they work the same across all other browsers and devices.
One other difference that you might find weird is that they’re done inline. You basically have a property or an attribute on your JSX element and that is going to be an event, something like onclick.
Suppose you have a button and an onclick event. In that onclick event you typically run a function or a method that’s defined inside of your class. Or you could just pass your function right in there.
However, you have to be careful with this in JSX callbacks. If you forget to bind
this.handleClick and pass it to
this will be
undefined when the function is actually called.
The solution to that is instead of declaring a method on the component, you can declare a property which is going to be set to an arrow function. These properties will be bound to the instance and you’ll be able to access
this inside of it.
There are so many events out there like
animation events, but most of them are underutilized.
Every component in React much like a beautiful butterfly goes through a set of stages that are called
lifecycle methods. Yes, it has it’s own life!
There’s a specific order in which these things run. Some of the widely used methods are:
When the component is being created and inserted into the DOM, the
componentDidMount() method is called. If there’s a change in props or state, the
componentDidUpdate() method runs, and so on…
So, anytime you want to do something at particular times, that’s probably when you need to reach for a lifecycle method.
If you’re using some external libraries to work with data, then you likely need to reach into these lifecycle methods, add event listeners on
componentDidMount() and remove them on
This is something that’s just been released to the public from Facebook. It’s currently in a preview state, so if you want to use it, you have to install an alpha version of React 16.7.
React Hooks is a pretty big topic that deserves a separate article, but I’ll keep it short here, they let you to use state and other React features without writing a class.
Let’s get back a little. As we’ve already found out earlier, we have 2 kinds of components in React: stateless functional components and class-based components. Suppose you have a stateless component in your application and then for some reason you want to convert it to a class-based component to be able to use more React features. Honestly, doing this is not the most fun thing in the world.
Here’s where React Hooks come in. They give us the ability to use state, hooks, context and other stuff in functional components. That’s pretty neat!
Hooks are still in an early stage, but I have a feeling that they’re going to be an important part of React in the future.
A lot of the ideas in React are sort of rethinking best practices from other libraries and frameworks like Angular, jQuery or Backbone.
When React came out everybody was opposing it because it gave the boot to the separation of concerns, which is something that we all got so used to. You take HTML, JS, and put everything in one component? No way! That’s nonsense!
And I’m not saying that people were wrong, I get it, if you’ve been doing things for a long time in a certain way, it’s hard to break out of the habit. However, sometimes it’s worth re-examining our defaults and ask ourselves, “Maybe there’s another way of doing things?”.
Clearly, using React may cause some frustration at the beginning, but once you play around with it for a while, it feels really clear and intuitive.
Also, I made a cheatsheet with the content from this post!
You can download it here.
If you would like to learn more here are some resources where you can continue learning React:
- React official documentation
- React For Beginners by Wes Bos
- FullStack Advanced React + GraphQL by the same author
- ReactJS board on Pinterest
- Awesome Intro to React from Ali Spittel
Whoosh! I’ll go drink some homemade apple juice.