In the next article we are going to take a look at how we can create our first application with ReactJS on Ubuntu 20.04 using Create React App. ReactJS is an open source JavaScript library used to create the user interface, maintained by Facebook and the developer community. ReactJS can be used in the development of web applications or mobile applications.
In React, also known as ReactJS, the data is processed in the DOM. Additional libraries for routing and state management are required to run the React application. Some examples of these libraries are Redux y ReactRouter.
Installing React on Ubuntu 20.04
To install React on our system, we must first know what npm is and understand why we need them. Npm stands for Node Package Manager, and it is the world's largest open source software registry. Contains more than 800.000 code packages. Npm is free to use, and any public software can be downloaded and used without registration or login.
Npm is a dependency management tool for javascript applications, which helps to install all the libraries and other tools to support the development of the JS applications.
Install npm
For install nodejs, which includes npm, we will only have to open a terminal (Ctrl + Alt + T) and execute the following command:
sudo apt install nodejs
After finishing the npm installation, we can check your version and that of node. We can do this with the command:
npm -v
The version of npm installed depends on the installation date, as the update is performed frequently. It is necessary that we make sure that we have a version higher than 5 installed.
For check installed version of node, the command to use will be:
node -v
If you don't have the latest version of npm installed on your system, you can update Node Package Manager (npm) to the latest version running this command in terminal:
sudo npm install -g npm@latest
Install create-react-app
To install a productive React environment, we will need to configure tools such as babel, webpack, etc ... which is complex to configure for beginners in the React world. But we can find several tools that will help us in the configuration. Among them we will find create-react-app, which is the easiest tool to use and configure.
Create React App is a comfortable environment to learn React, and it's the best way to start building a new single page app using React.
Create React App configure your development environment so that you can use the latest Javascript features, providing a good development experience, and optimizing your application for production. As indicated on their website, it is necessary to have Node> = 8.10 and npm> = 5.6 installed on your machine.
We can install create-react-app using npm. To do this, in a terminal (Ctrl + Alt + T) we will only need to execute the following installation command:
sudo npm install -g create-react-app
Once the installation of the create-react-app application is finished in our system, we can check the installed version executing the following command:
create-react-app --version
Creating the first React application
Our first React app can be created simply using create-react-app. We will only have to use the following command:
create-react-app mi-primera-app
The above command is going to create a React application called my-first-app. At the same time a new folder with the same name of the application will be created that includes all the necessary files, configurations and libraries.
Running the React app
Once the React project is created, we will have to move to the project directory and run the React application using the following command in terminal (Ctrl + Alt + T):
npm start
The command asl start start the development server that will perform the entire build process.
The terminal will tell us that we must open the browser and load the application that will run at the URL http: // localhost: 3000 by default. When the browser opens, we will see the React logo and texts on the screen.
Uninstall create-react-app and npm
Users we can uninstall any library installed from npm using the npm uninstall command. Run the following command in terminal (Ctrl + Alt + T) to uninstall create-react-app:
sudo npm uninstall -g create-react-app
Similarly, we can uninstall npm using this other command in the same terminal:
sudo apt remove nodejs
More information on this JavaScript library for creating user interfaces can be found in the project documentation.
Excellent content! Obrigado!