Life is not forever. The same goes for work. Sometimes we need to change or learn something new, and change a little bit. And me too, one day I had a request to work with React, so I was ready to go to school and don’t hesitate to share with you the basics of React.js in this post. Let’s get started together.

1. Hello world.

Reactjs is a Javascript library developed by Facebook and released in 2013 worldwide. with the aim of simplifying interfaces, creating a user-friendly SPA website.

Why React is so famous and used by so many people:

• First, it is backed by Facebook – a big man like Facebook backed with Paypal, Uber, Instagram … used to develop interfaces for them, the famous is inevitable.
• Less complicated, faster implementation than other frameworks: When react came in, there were many previous frameworks like Angular.js, while those frameworks focused on MVC, React only focused on View layer so implemented. Simpler.
• Reusing Components: When building website interfaces, duplicate interfaces cannot be avoided and with React we have to collect Components for reuse. Component writing is also easier using JSX.

Defect :

• React.js focuses only on the View part of the MVC model
• It’s pretty quick to learn the basics, but working deeply with it can take a long time

Let’s use basic React together!

As a genuine developer or an amateur coder, from student to professional, everyone has to start with hello world. Actually, in React’s doc, the first chapter is also starting Hello world, so I will also start with how to display hello world using React.js? = = =

The first is to set up to run first.

There are 2 ways to use React.js below:

• Use via CDN link
• Use it by creating an application with React through the package manager.

In this post I will use the node package manager (NPM) to setup a react app! . But first, the installation requirement is that we need to install Node version> = 8.10 and npm> = 5.6.

Next, as the console in the picture shows us go to the newly created directory and use npm start to run react!

To print out Helloworld in the screen we go to src / App.js to correct the code: We change the return below to what you want!

Since here I use react through the creation of package manager so package manager has split js or css files into modules. This is very important because when we work normally we will split the modules and use import and export of es6 like that.
And we have finished our first lesson with Hello world. Surely everyone will wonder at the return segment why can you write html without inserting a string in the javascript file like that. And that is JSX.

2. JSX

• JSX: Javascript + XML.
• JSX helps us to write html in React but not html.
• JSX is not required in React, but most people use it because it is a useful tool that simplifies our way of coding.

JSX’s syntax:

To embed expressions inside JSX. We can enclose them in curly braces:

In the above hello world example we could also write:

In JSX we should also note that some attributes of html will not write like html like <div class="App"> </div> , JSX will write <div className="App"> </div>

3. Rendering an element:

Because it is for interface design, rendering an element and linking the DOM is very important. In a React.js application, typically all applications will be built with a single root DOM node (root).

To render data to this node we will use ReactDOM.render:

Now we can display the name inside <div id="root"> </div>

Go back to the application we created earlier and open the index.js file in the src folder

And open public / index.html

In the file public / index.html we pay attention to <div id="root"> </div> . As can be seen when we created this application, React automatically created the modules and made the html file ready to render. And through index.js and ReactDOM.reder command to render <App /> and <React.StrictMode> components to root.

This Component I will continue to write in the next post.

4. Conclusion

With a little knowledge, I learned about React. I hope to partly help newcomers to be able to access React.js more easily. This post of my here has ended, hello everyone and see you in the following posts. If you want to consult more, please visit the React homepage to find out. Currently there is an additional Vietnamese translation in the document at https://reactjs.org/ . Thank you everyone for following the article!