[ReactJS] : Create simple React App

What Is React?
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

Before starting with React.JS, you should have be aware of below coding languages

  • HTML
  • Javascript
  • CSS

Installation Dependencies: 

First of all to create React App, you need NPM/yarn and Node.js installed on your system.
Refer https://www.npmjs.com/get-npm for installation

Setting up a React Environment:

Once NPM and Node.js is installed, you are ready to create a React Application.
Below are the steps to create app:

  1. Install create-react-app by running the below command in your terminal:

    npm install -g create-react-app my-app

  This will create a folder named my-app and installs all the required files in it.

  2. Go Browse through the src folder in the generated my-app folder and check all the files in it.

    cd my-app/src

  3. Once done run below command to execute the React application my-app:

    npm start

    This will open the default browser and pop up with your newly created React App!
    If not, open your browser and type localhost:3000 in the address bar.

    index

  4. To update the content as per your requirements, Look in the my-app directory, and you will find a src folder.
    Inside the src folder there is a file called App.js, open it and it will look like:

   

  5. Try changing the html as per your need, and it will automatically reflect on your browser.
    If there are any errors in your code it will be displayed on your terminal, on compilation.

  Example

 

  6. In the case to upload the code on server, you need to build the app using following command

   sudo npm run build

   This  will create a build directory with a prod build of your app. Inside the build/static directory will be your JavaScript and CSS files

  Note: You can run all the above NPM related cmd using yarn too if you have it installed on your system.