Wednesday, July 03, 2024

Learn React Quickly and Efficiently, Tips for Beginners

If you are involved in JavaScript programming, whether you're in college or working with people who have extensive experience with React, including exceptional professors and lecturers, don't be surprised if you hear statements like: “ReactJS is the best JavaScript framework!” ReactJS or React.js are just names for the same thing, which is React. Sometimes developers use these names to precisely indicate that React is used for Internet applications, but React is not a framework. React is an open-source JavaScript library used to create interfaces. It is mainly used for web interfaces, but you can also use React to create interfaces for other devices.

However, if we are talking about React Native, then we are talking about a framework that uses the React library to create mobile applications. The working principles of React Native are almost identical to React, except that React Native does not manipulate the DOM - Document Object Model via the Virtual DOM. It runs in a background process, using JavaScript directly on the end device. We will discuss React Native in a future tutorial on this blog, but for now, I hope we have clarified what React is and that things are much clearer to you. It's true that React is developed by Facebook, Instagram, and the community, but its creator is Jordan Walke, a software engineer at Facebook.

A girl learns React

A girl learns React 

Due to React's great popularity and its application in robust and large projects, many developers who haven't worked with React often have the misconception that it is also robust, complex, and difficult to learn. However, this is not true. React, an open-source JavaScript library, is simple and easy to use for creating interfaces, especially if you have a basic knowledge of HTML, CSS, and JavaScript. In fact, React doesn't have many complex concepts but rather focuses on creating and using simple components that are easily reusable. It doesn't matter whether you are creating components for large or simple small projects. Your JSX - JavaScript XML component can be a simple button on a web page or it can represent an entire page.

One thing is for sure: when you call that component, you won't need to refresh the web page. React allows you to make changes to the page while sending only one request to the server, instead of many, as is the case with PHP, Django, or the Java programming language. Just imagine how long you would have to wait and refresh each web page for every click on Facebook if Facebook didn't use React! Another point in favor of React's simplicity is the fact that it is divided into only two main APIs: the React Component API, which is responsible for parts of the web page displayed by React DOM, and React DOM, which is responsible for rendering on the web page. Everything else is just details!

Getting started with React, how to start learning React?

You might be wondering if you need to know JavaScript to start learning React. The answer is no, but then it's learning the hard way. We recommend that you first get to know JavaScript as much as possible, but also to get to know Node.js a little before diving deeper into React. Then, also decide which operating system you want to use? We will use Linux, Ubuntu. Because we assume that whatever you build, most web projects end up on a leased Ubuntu Server. Although as far as React is concerned, it won't have any significant impact on learning. If you already use the Windows operating system, but want to use Ubuntu; then watch the following video how to install it on VMware Workstation Player 17 or newer virtual machine.

Linux - 1. How to install Ubuntu?

Open a browser and see what is the current latest Node.js version. Open your terminal and type the following commands:

manuel@manuel-virtual-machine:~$ sudo apt-get update

manuel@manuel-virtual-machine:~$ sudo apt-get upgrade

manuel@manuel-virtual-machine:~$ node --version


If on the official page of Node.js, on the button LTS - Long Term Support; you don't have the same version as yours or you don't have Node.js installed at all or your Node.js is an older version; then reinstall Node.js. If you don't know how to install Node.js, watch the following video.

Linux - 14. How to install Node.js?

However, if you are not going to learn React on the Linux operating system, but use the Windows operating system, but do not know how to install Node.js, then watch the following video.

Windows - 13. How to install Node.js?

If you have done all the necessary installations correctly and if everything is fine, create a directory with the name react_tutorial in which we will create our React project and switch to it. Also, start Visual Studio Code.

manuel@manuel-virtual-machine:~$ mkdir react_tutorial

manuel@manuel-virtual-machine:~$ cd react_tutorial

manuel@manuel-virtual-machine:~/react_tutorial$ mkdir lesson1

manuel@manuel-virtual-machine:~/react_tutorial$ cd lesson1

manuel@manuel-virtual-machine:~/react_tutorial/lesson1$ code .

Also, to note, you can use whatever IDE you want, but we use Visual Studio Code. If you don't have Visual Studio Code installed, watch the video on how to install it.

Linux - 2. How to install Visual Studio Code and .NET Core 7.0 ?

For Windows users, see the following video.

Windows - 1. How to install Visual Studio Code & .Net Core 7.0 ?

If you installed everything successfully and started Visual Studio Code, close the Welcome Page, and on your left click on the Extensions button. Then install the following extensions to make coding easier and more enjoyable.

  • ES7 React/Redux/GraphQL/React-Native snippets
  • ES7 + React/Redux/GraphQL/React-Native snippets
  • Simple React Snippets
  • ESLint
  • React PropTypes Intellisense
  • Prettier – Code formatter

If you have installed the mentioned extensions. Close Visual Studio Code, so that the changes you installed take effect, and then reopen it.

manuel@manuel-virtual-machine:~/react_tutorial/lesson1$ code .

Open the Terminal Panel in Visual Studio Code. Type the following command. Pay attention to the npx and not the npm command where beginners often make mistakes.

manuel@manuel-virtual-machine:~/react_tutorial/lesson1$ npx create-react-app helloworld

Overview React commands on

Overview React commands on

Confirm the installation and wait for some time for everything to install. When everything is installed, see in the Explorer Panel what everything has been created for you.

React directories and files organization

React directories and files organization

In the Terminal Panel, cd to the helloworld directory you created. Then type the following commands.

manuel@manuel-virtual-machine:~/react_tutorial/lesson1$ cd helloworld

manuel@manuel-virtual-machine:~/react_tutorial/lesson1/helloworld$ npm start

If port 3000 is busy for any reason, confirm with y to open a page on the browser on another port. Npm will probably choose port 3001 automatically for you. It will launch your default browser and then you will see the following web page indicating that you have done everything successfully.

React npm start web page

React npm start web page

Back in Visual Studio Code, click Terminal Panel. If you want to stop the server, press CTRL + C on your keyboard. In the Explorer Panel, click on the src directory of your project. Then create a components folder in it, and in that folder create a new file and name it Helloworld.jsx Note that the name of this file should have the first letter capitalized. In the Helloworld.jsx file, type the following JavaScript code. Instead of my name, put yours!

function Helloworld() {

    return <h1>Hello World, from Manuel!</h1>


export default Helloworld;

As you have seen, we first created the components folder. You could name that folder whatever you wanted; and in it you can keep as many JSX - JavaScript XML components as you want. You can use and call each of these components whenever you need them. When the component is called, the change will be automatically reflected in your index.html page without the need to refresh the web page. However, for this to happen you must first export your component. This is done with the following command:

export default Helloworld;

Then import it into the App.js file, so that it determines where and how it will be displayed on your index.html page. Then edit this file. First add the following import to it.

<div className="App">

      <Helloworld />  


Type the following command in the Terminal Panel.

manuel@manuel-virtual-machine:~/react_tutorial/lesson1/helloworld$ npm start

A browser will open with a similar result depending on your name.

Render web page with React

Render web page with React

You can see what all this looks like in the following video.

 React - 1. How to create your first React app?






No comments:

Post a Comment