Introduced by Facebook in 2011 and open-sourced and released in 2013, React.js is a JavaScript library for building user interfaces. It competes with frontend frameworks like Angular and Vue.js, but as of 2022, it is the most popular frontend technology.
One of the major benefits of React is that you can use as little or as much of it in your project as you need. This means that you can take an existing project and slowly refactor it with React or build a new application from the ground up as an SPA. Anything you can do with React you can do with vanilla JavaScript or JQuery, but React greatly simplifies building dynamic user interfaces.
Like other frontend frameworks, React allows you to create reusable components that are easy to maintain. You can think of components as pieces of HTML like a widget, a navbar or a button. They are the core building blocks of React applications. Every React application has at least one component that is referred to as the root component.
In this post, I will talk about React in more detail, the advantages of using React and I will also walk you through creating your first React application (if this is your first time). If you’re new to HTML, CSS and JavaScript check out my previous posts, here and here. You’ll want to get comfortable with HTML and JavaScript – functions, loops, data structures, ES6 features, asynchronous programming, etc. – before diving into React.
React.js
Every React application is basically a tree of components. Additionally, all React applications have at least one component, referred to as the root component.
Let’s take a look at the user interface of a web application like Facebook:
If we broke this down into components, at a high level, it would look something like this:
These could all be broken down further. For example, our Feed component could be broken down into StoryFeed, AddPost and PostFeed components.
Also, React.js uses a programming concept known as the virtual DOM. The virtual DOM is an in-memory representation of the “real” DOM. When the virtual DOM changes, the “real” DOM is synced up by a library like ReactDOM through a process called reconciliation. This is also why the library is called React – when the state changes, the application reacts and responds appropriately. The complexities of attribute manipulation, event handling and DOM manipulation are abstracted away. This makes application development easier and faster.
Code Example
I think the best way to learn a new programming language (or library in this case) is to create the most basic application. Here, we will create a “Hello World” program.
For this example, we’re going to be working in a local development environment.
First, you’re going to want to install a recent version of Node.js.
Second, you’re going to need a text editor. I use and recommend Visual Studio Code.
Third, open a terminal in the folder where you save your code projects (I use C:\Code). Run the following commands:
Respectively, this is going to create a new React application named “my-app”, navigate to the folder of the app and then run the application. Your browser should open a tab at http://localhost:3000 with the React app.
Next, to make this a “Hello World” program, go to your App.js file inside the src folder. Remove everything in the return brackets so that it looks like the following:
Finally, save the file. If everything worked correctly, your app should be outputting “Hello World!” Congratulations, you’ve just created your first React application! Feel free to look through the files in the project to get a better idea of how everything is working.
JSX
You may have noticed that in the last example, we returned what appears to be HTML in our App function. Or maybe you thought it was a string. It is neither, it is a syntax extension to JavaScript called JSX and it is recommended when using React. It is based on ES6 and converted into JavaScript at runtime.
We don’t need JSX to use React, but it makes the development process much easier. It allows us to write “HTML” in React (it is not really HTML, it is syntactic sugar for JavaScript). JSX converts HTML tags into React elements.
Without JSX, we would need to use the createElement() method. Let’s say we wanted to create an <h1> element nested inside a <div> with a class of “container” without using JSX:
With JSX, we can simply write:
Which looks more readable and easier to work with?
You may have noticed that we used className instead of class. This is because class is a reserved word in JavaScript so className is used instead. Similarly, htmlFor is used instead of for when using forms.
Additionally, we can embed expressions inside of our JSX with curly braces. The expression can be a variable, a property or any valid JavaScript expression:
When working with React, you’re most likely going to want to use JSX. It makes your code much easier to understand and maintain.
Advantages
There are many advantages to using React for a project. It is the most popular frontend technology for a reason. You can create reusable components and it is flexible, performant and easy to learn.
Reusable Components
As stated previously, one of the major benefits of React is that you can create reusable components. Whenever that component needs to be used in another place in the project, it can be implemented again easily without having to reinvent the wheel. This makes your frontend much more maintainable.
Flexibility
In addition, React is flexible. This means that you can use it for small parts of your UI if you want without having to build the entire thing in React. React can also be used to build mobile apps using React Native. It can even be used to build desktop applications when used alongside something like Electron. There are many possibilities.
Performant
The DOM is updated efficiently via the virtual DOM. Only the components that have changed get updated, opposed to all components being updated every time there’s a change.
Also, React offers server-side rendering so even complex applications perform well.
Easy to Learn
Especially when compared to other frontend frameworks like Angular and Vue.js, React is much easier to learn. All you really need is a good understanding of JavaScript to use it. Expert JavaScript developers can get up to speed with it in a matter of days.
Conclusion
If you’re still deciding on which frontend technology to use for your next project, there are plenty of reasons to use React. And if you’re already using something like Angular or Vue, you should give React a try and see if it works better for your needs.
One of the main reasons I started learning React is because of how prevalent it was in job listings compared to the other frontend technologies. The popularity of React has skyrocketed over the last several years compared to its competitors. Check it out and see what you think.