Facebook Twitter Instagram
    TecAdmin
    • Home
    • Ubuntu 20.04
      • Upgrade Ubuntu
      • Install Java
      • Install Node.js
      • Install Docker
      • Install LAMP Stack
    • Tutorials
      • AWS
      • Shell Scripting
      • Docker
      • Git
      • MongoDB
    • FeedBack
    • Submit Article
    • About Us
    Facebook Twitter Instagram
    TecAdmin
    Home»General Articles»How to Create A New React.Js Application

    How to Create A New React.Js Application

    RahulBy RahulMarch 23, 20214 Mins ReadUpdated:March 23, 2021

    React is an open-source JavaScript library for creating web frontend and UI components. It is developed and maintained by the Facebook and a large community of developers. This is also useful for creating mobile applications.

    We will use yarn package manager to create a reactjs application and make production build. Pm2 to run and monitor react application.

    This tutorial will help you to create a new React.js Application on a developer system. Also help you to run reactjs application and make a production build.

    Prerequisites

    React.Js application’s can be run on any platform having node.js installed. We preferred to install Node.js using NVM package manager.

    Assuming you already have installed node on your system. If not, visit below link to install node.js first.

    • https://tecadmin.net/install-nodejs-with-nvm/

    Also install yarn package manager:

    npm install -g yarn 
    

    Step 1 – Create a React Application

    There are multiple ways to create a new react application on a developer system. For example, use yarn, npx or npm init commands to create a new Read application with latest version.

    For this tutorial, we will use npm init to create a new react application.

    yarn create react-app myreactapp 
    

    Except yarn, you can also use npx (npx create-react-app myreactapp) or npm (npm init react-app myreactapp) commands to create React.js application.

    On successful application creation, you will see a long result on screen. At the end, you will find the result like below with some useful commands.

    Create React.js application Command line

    Step 2 – Running React App in Developer Mode

    Once you have created your React application. This will create a folder in current directory with project name. Switch to that project and run yarn start to start application.

    cd myreactapp 
    yarn start 
    

    Output:

     
    Compiled successfully!
    
    You can now view myreactapp in the browser.
    
      Local:            http://localhost:3000
      On Your Network:  http://192.168.10.200:3000
    
    Note that the development build is not optimized.
    To create a production build, use yarn build.
    

    The default react application start on port 3000. Access your React application using 3000 port with system IP address. For local machine use “localhost” followed by port.

    Installing React.js on Ubuntu 20.04

    Step 3 – Start Editing React.js Application

    Let’ start building awesome application using react.js. As displayed on the screen, edit src/App.js file in a text editor. Then navigate under the function App(). Here you can add your content to be displayed on the home page.

    React.js make your first change

    Save your file. The browser will automatically reload page and display the updated content. This is very helpful to see changes on the fly.

    React.js display changes on screen

    Step 4 – Running React Application with PM2

    Process manager (pm2) for Node.JS applications with a built-in load balancer. It provides you easy way to manager, run and monitor Node applications.

    In order to use pm2, make sure it is installed on your system. Also, it can be installed with following command:

    npm install -g pm2 
    

    Next, switch to your react application and run the following command.

    pm2 start yarn --name "MyReactApp" -- start 
    

    Here --name "MyReactApp" defined the name of your application, display under list of pm2 applications. start is the parameter passed to yarn command line.

    The above command will start your React application on defined port. You can access applicaton in a web browser.

    Below pm2 commands will help you to check application status, stop and start the applications.

    pm2 status MyReactApp        # Check application status  
    pm2 stop MyReactApp          # Stop application by name  
    pm2 start MyReactApp         # Start application by name  
    

    To view the logs generated by the application use following command. This is helpful for debugging purposes.

    pm2 logs MyReactApp 
    

    Step 5 – Create Production Build

    Once your application is ready to deploy on production environment. Let’s generate a production build from your react.js source application.

    To generate production build, open a terminal and change to react application directory. Then execute the command:

    yarn build 
    

    On successful build, it will generate production files in the build directory under React.js root directory. You can deploy all files from build directory to the production server.

    ls -l build/
     
    -rw-r--r-- 1 root root 1092 Mar 22 12:06 asset-manifest.json
    -rw-r--r-- 1 root root 3870 Mar 22 12:06 favicon.ico
    -rw-r--r-- 1 root root 3022 Mar 22 12:06 index.html
    -rw-r--r-- 1 root root 5347 Mar 22 12:06 logo192.png
    -rw-r--r-- 1 root root 9664 Mar 22 12:06 logo512.png
    -rw-r--r-- 1 root root  492 Mar 22 12:06 manifest.json
    -rw-r--r-- 1 root root   67 Mar 22 12:06 robots.txt
    drwxr-xr-x 5 root root 4096 Mar 22 12:06 static
    

    Conclusion

    Lets create an awesome user interface with React.

    ReactJs yarn
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email WhatsApp
    Previous ArticleHow to Install Tomcat 10 on Ubuntu 20.04
    Next Article How to Install Let’s Encrypt SSL with Tomcat

    Related Posts

    How to Find Django Install Location in Linux

    Updated:April 27, 20221 Min Read

    (Resolved) – ReactJS 404 Error on Page Reload

    2 Mins Read

    Adding a New SSH Key in GitHub

    Updated:April 1, 20223 Mins Read

    13 Best Linux Terminal Emulators and Bash Editors

    8 Mins Read

    How To Install Oracle VirtualBox on Debian 11

    2 Mins Read

    10 Best Linux FTP Clients in 2022

    5 Mins Read

    Leave A Reply Cancel Reply

    Recent Posts
    • How to Enable / disable Firewall in Windows
    • How to Install JAVA on Ubuntu 22.04
    • Switching Display Manager in Ubuntu – GDM, LightDM & SDDM
    • Changing the Login Screen Background in Ubuntu 22.04 & 20.04
    • How To Install PHP (8.1, 7.4 or 5.6) on Ubuntu 22.04
    Facebook Twitter Instagram Pinterest
    © 2022 Tecadmin.net. All Rights Reserved | Terms  | Privacy Policy

    Type above and press Enter to search. Press Esc to cancel.