How To Use ReactJS – 2024 Guide

2.2K

Hello everyone who is interested in productive web development! Most of the people working in the front-end development have heard about ReactJS in one way or another. It is a JavaScript library that helps you create cool interfaces and has gained immense popularity in recent years. At the same time, not many people know how it works inside and how to use it.

To understand how to use this technology, I wrote an article called ‘How To Use ReactJS’. You will read about the basic concepts of the library, which will give you an idea of the functionality and use. Let’s start from the beginning.

ReactJS gives the developer a template language and some callback functions for rendering HTML. The entire output of React is HTML. Your HTML / JavaScript bindings, called components, are concerned with storing their internal state in memory (for example: which bookmark is selected), but the end result is HTML. React development is about describing what needs to be displayed on a page (rather than writing instructions for the browser on how to do it). This means a significant reduction in boilerplate code. When you start developing, you just need to write code. There is no boilerplate component code that needs to be generated somehow.

Of course, some preparation is required before development, but when it comes to components, they can be described as pure functions. For beginners, React is loved by the fact that it uses the JSX syntax, which is perceived as normal HTML, that is, in order to start React development, you do not need to learn fundamentally new things. If you know JavaScript, you can probably learn how to write React applications in just a day. Of course, it will take some time to learn how to do it right, but you can get started very, very quickly. One of the greatest advantages of ReactJS is the fact that this library does not force the developer to use classes.

Classes over complicate your code with no benefit. In React, all UI components can be expressed as sets of pure functions. Using pure functions to shape your UI is like taking a breath of clean air. The core concept of ReactJS is reusable components. The developer creates small pieces of code that can be combined to form larger ones or used as independent interface elements. The most important thing about this concept is that both large and small components can be reused in both the current and the new project. In its simplest form, a React component is a JavaScript function.

Knowing the basic concepts of working with ReactJS, you can move on to practice using this library in developing an application. I will try to describe everything in detail, step by step. One of the additional tools you need for the development process is NodeJS. It is a server-side platform that supports JavaScript code execution, the features of which will be useful for React development. If you don’t have this platform installed yet, now is the time to fix it.

1. Like any development project, it should start with preparation. You can use Facebook’s create-react-app package to create a basic React app. This is probably the most popular approach to setting up a working environment to get started with development. With create-react-app, the programmer gets at his disposal a lot of necessary tools, which eliminates the need to select them on his own. To install create-react-app globally, use the following command: npm i -g create-react-app. Then, to create an app template, run the following command: create-react-app react-intro. This completes the preliminary preparation.
2. Now we launch the application and go to the project folder and start the development server, which allows us to open a new React application.
3. When working with React, it is important to understand how the structure of your future application works. To do this, open the project you just created with your IDE (I recommend Visual Studio Code). Find the line where your React application will be located. This entire element will be replaced with the application code, and everything else will remain unchanged.
4. Now let’s open the src / index.js file that deploys the React application. And by the way, the application source code will be located in the src directory.
5. For those who are just getting acquainted with the development process of React applications, an important point is the construction. It is very similar to HTML, but it is a sample JSX code, which is a special JavaScript syntax used by React. Note that this construction starts with a capital letter A, not . This is because of React’s entity naming convention. This approach allows the system to recognize between customary HTML tags and React components. In the event that component names do not begin with a capital letter, React won’t be able to render them to the page.
6. Now you are ready to take a look at the code for your first component. To do this, open the src / App.js file. I n order to make a React component, you must to begin with a class that acquires from React. Component. This can be exactly what the class App extends Component line solves. All React components must contain an usage of the render method, in which, as you might figure from its title, the component is rendered and a description of its visual introduction is formed. This method should return HTML markup for showing it on the page.