Create React App, create your first application with React in Ubuntu 20.04

create react app

In the next article we will 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 and React Router.

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 version installed

npm -v

The version of npm installed depends on the installation date, as the update occurs frequently. It is necessary that we make sure that we have installed a version higher than 5.

For check installed version of node, the command to use will be:

installed node version

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:

update npm

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 will 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:

install create react app

sudo npm install -g create-react-app

Once the installation of the create-react-app application is finished in our system, we can check installed version executing the following command:

create react app version

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:

creating my first app with reactjs using create react app

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, settings 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 npm start start the development server that will perform the entire build process.

compilation of my first app with reactjs

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.

first app seen from the browser

Uninstall create-react-app and npm

The 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:

remove create react app

sudo npm uninstall -g create-react-app

Similarly, we can uninstall npm using this other command in the same terminal:

uninstall nodejs

sudo apt remove nodejs

More information on this JavaScript library for creating user interfaces can be found in the project documentation.

Add Comment