What is ReactJS?

ReactJS is a JavaScript library for building user interfaces based on components. ReactJS is maintained by Meta and a community of individual developers.

Why use ReactJS?

You will write ReactJS in a declarative style, with a declarative style, you only need to design components with state, tell ReactJS what to do when the user enters the input box, when the user clicks the submit button or in summary, you will tell ReactJS when When the user interacts with the web app, what should ReactJS do. ReactJS will then render the component with the correct UI, correct data, and behave just like you expect. Also, your code will be much more predictable and easier to debug, especially with ReactJS development tools, especially React Dev Tools.

Also, ReactJS is component based so we can build encapsulated components that can manage their state and we can combine them to create a complex user interface. Since it is component based, we can reuse the component to write once, run anywhere. Last but not least, in ReactJS 18 we can also apply server side rendering using Node and implement mobile apps using React Native.

ReactJS renders mostly on the client side, called client side rendering. So, with each change, the app will no longer call the server to render an entire HTML file, but only call the APIs to get the necessary data and then render it. The app will look smoother, the data taken from the server will be less, so the app will also look faster. However, the biggest drawback of ReactJS is that it can’t be SEO because when it comes to the server, what the client receives is an html file with a certain tag with id root without any specific content and page structure. Therefore, it is very difficult for google bot to know what this page is doing and how it is structured.

Project written in ReactJS

I will show you how to write ReactJS through how to implement an actual website using ReactJS. So, after this series, you both know how to write ReactJS and build a product yourself from your knowledge of ReactJS. Brief about the app we will build with ReactJS is a simple todo app, with this app, users can add, remove and edit tasks for each day. You can see the tasks of your day, can filter tasks based on certain criteria and can find tasks with specific names.

React project initialization

To initialize a ReactJS project, you need to have npm on your machine. Run command

This statement is meant to initialize a project based on the latest version of Vite. If you want to initialize with a specific version, you change the latest with that version number. Briefly, Vite is a tool to make developer app development easier and more convenient. Vite’s cool features like fast HMR help me not need to reload the website to see the latest changes, it will reload itself. Supports CSS, typescript, JSX,…, optimizes the build process and much more.

We will be asked about the project name, we will name the project as thich-hoc-todo-fe. Next is choosing a framework, I will choose React because we are learning ReactJS. Then choose javascript or typescript language. To reach more friends, I choose Javascript.

This is the structure of the project once the above steps have been completed.

We have vite.config.js used to config vite. package.json is used to contain project information such as project name, version and also the packages installed in the project, scripts to run, build the project.

Next is index.html, looking at the content of this file you will see that it is just a simple html file structure and has a div tag with id as root. Please note this tag because our script, when running React, will find the element with the id root and start the rendering process. Below is an import script named main.jsx located in the src directory, the type is module. The public folder contains an svg file to serve only, nothing worth mentioning. And finally, the most important is the src folder, we will spend a lot of time adding code in this folder.

Open the main.jsx file and you will see that the code here is quite simple. Find the element with the id root, put it in the createRoot function and call the render function to render the component named app. Here we need to note two packages, react and react-dom. React contains the API to interact with react and react-dom will contain the API to work with the HTML DOM tree. You will also see React.StrictMode, this is a mode to find and identify vulnerabilities, potential errors and notify devs to fix.

Open App.jsx and see the code is too much code. I will not explain these codes now, this part will be later. You just need to know that this is a component named App, it will render the tags in return. And these rendered tags will be in the tag with the id root.

Run the app

To run the app, you need to install the necessary packages first, depending on whether you use npm, yarn or pnpm, then you run the corresponding command to install the package. I use yarn so I will run the command.

After the installation is complete, you will see that in our project there is a folder named node_modules. This is the directory that contains the necessary packages for your app to work. After the installation is complete, we use the yarn dev command to run the app. This yarn dev command will run the app in development mode, so there is no optimization in terms of perfomance, memory, … but in return, it is very convenient for the coding process because we will be able to debug, hot reload,… .

When running, you will see the terminal display information like this. Click on the link http://localhost:5173 to access the app.

The first image from the million-dollar todo app is about to take over the world.

Open inspect, look at the structure you will see, the app component is rendered in the tag with the id root.

Ok, now we will have a small change to see how the app changes. You go into App.jsx, under the tag with the class name App, add the tag p with the content Greeting from Thich Hoc. No need to refresh the page, open through the app’s tab and see the changes.

Delicious peach branch, the content we just changed is now displayed on the app. Note that we do not need to reload the page to see the changes, this is a hot reload, when you change the content, it will automatically reload and update the display for the devs, very convenient.

Conclude

In conclusion, in this article, I talked about what React is, why it is React and showed you how to create a basic React project, change it a little, explain the project when it is first created. If you have any question, please comment below. Happy coding.