5 May, 2022
It might seem overwhelming for a beginner to learn the React framework. After all, it has gone through a lot of changes since it was first released around 2013. Here's a cheat sheet, not a full tutorial but a simple-to-understand and concise overview on what it takes to learn React.
React stores the information DOM by creating a virtual DOM in its memory. Before it renders the DOM nodes onto the browser, it checks for changes between its past and present virtual DOM. If there's a change (i.e. some text content updated), it will update its virtual DOM and then renders to the real DOM on the browser. See diagram below for visualization.
Because DOM manipulations can take a lot of time to load, React only changes the DOM nodes that need to be changed.
For example, take a look at these 2 code blocks (source):
As you can see, using JSX allows us to write HTML elements in React code more easily and faster.
Notice that there is a function:
ReactDOM.render() at the bottom of the code blocks above.
ReactDOM.render() is a function that takes 2 arguments: the HTML code and the HTML element to render the code in.
In React, the top node is known as the 'root' node. Therefore, we usually render our HTML code in it.
Components are one of the building blocks of a React App. They are basically React functions that returns an HTML element. Think of them as a large HTML blocks of code that independently does a certain function for the app. Like the navigation bar or the panels.
In React, all these components are structured as nodes in the Virtual DOM. They will then render onto the browser according to how we specify them to look like. See diagram for visualization.
There are 2 types of components currently in React: Class and Functional.
As its name suggests, class components are basically classes written in the context of React. A rule in writing components is to always name the component with a capital letter.
Let's write a simple House class component.
To take it a step further, let's create a Door class and make it a child component of the House (since doors are inside houses).
First, we create the Door class.
Then we add it inside the House class to make it its child.
The image below shows what the app looks like in the browser. I went ahead and added outlines to each component to show them better. Both classes are displayed perfectly, with Door being the red outlined box being shown inside the House, as represented by the blue outlined box.
The other type of component we can write in React is function components. Just like class components, they returned HTML codes and their names should start with capital letters.
Let's build the same House and Door as function components.
And that's it! They pretty much work the same and renders the same HTML elements. Note that for function components, you don't need to have the
render() function before the return statement.
React components can have props. And props are equivalent to what arguments are to a function or what attributes are to HTML.
Back to our House and Door, let's say we have many Door components inside the House. How do we distinguish one Door from another? How about giving each Door a
title prop? To do that, simply add
title in the Door component like so.
Kind of similar to HTML attributes right? Then in the Door component, we can print out its prop as follows.
And our app would print the title out as expected.
Now we can add lots of Door components inside House and have
title to distinguish them.
Result would look like:
Just like arguments are to a function, props to Component are just read-only. A Component cannot change the value of the props passed into it.
Now let's briefly talk about states. In React, a state is an object in which variables are stored. These variables can only be accessed within its Component (unless of course you use some state management tools like Redux).
Let's add some states to decorate our House class component.
In the code above, we add our state object in our constructor function. Then we edit the HTML element to return a sentence with the state
rooms property. The result will be:
In our previous example, we saw how to use states in our House class component. In function components, we can use something called React Hooks to manage our states.
I have a whole series called A Look at React Hooks on all the basic React Hooks. Let's take a look at some of them briefly.
This Hook allows function components to initialize and update states. Here's a simple example.
First, initialize the state as "white" inside the
useState Hook. The Hook returns an array: the value of the state (i.e. color) and its set function, which is used to update the state (i.e. setColor).
Then simply include the value of the state in the return function, and the app will display the state.
For a more detailed explanation of this Hook, please read this article.
The next most useful Hook you will encounter is the
useEffect Hook. It performs a function whenever a specified state has changed.
Back to our House component, we add another variable called
door that will track how many doors this house have. In its
useState Hook, initialized it to 0.
Then, we add a button that when onClick, will increase the value of
door by 1. Finally, we have a
useEffect Hook that will print the number of doors in the house every time the value of
door is updated.
The code will look as follows:
For a more detailed explanation of this Hook, please read this article.
Now that we've covered the basic concepts of React, let's take a look at a typical React environment.
First, make sure you have npm and Node.js installed in your machine. If not, get them here.
The easiest way to create a new React app is to execute:
Then, navigate to the app folder.
And run the following command to launch the app in localhost.
A new Create React App will have the following folder structure.
Let's briefly go through them one by one.
It may seem complex at first. If you are a beginner, try to focus on the
src/App.js file first. Edit its HTML code, add some basic functions and get a feel on how it works. Once you are more familiar, you can add more files as components into the
src folder. Like a
Home.js for the Home component, a
Login.js for the Login component and so on.
After creating some basic functions and components in your first React app, you may wonder how to customize and style the app for your own needs. In React, there are a few ways to add custom styles. The most common ways are inline styling and importing css modules.
As the name suggests, add the styling inside the HTML element. For example, let's add a border around our house. The border color depends on our
Since the value of
color is initialized to red, the app will look like:
Alternatively, you can create a
style object and pass it in the style attribute like so:
Another way to style is to create a
.css file and import it to the React Component. I have created a simple
styles.css file with the following styling:
Then, in my House component file, import the file as shown below:
Now our app will look like:
And that's it for this React Cheat Sheet for beginners. Of course, this is just a very concised article so it cannot cover every single aspect of React. But I do hope it has been a great introduction to at least help anyone embark on a React journey without feeling intimidated or too overwhelmed.
As I always like to mention, practising and building projects will help anyone tolearn anything faster. To read more about React, check out my blog and my A Look At React Hook Series. A series dedicated for beginners to start learning about basic React Hooks and more.
Thanks for reading and if you find it helpful, please like and share this article around for more reach. Cheers!
Copyright © 2022 Victoria Lo