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

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';

    class App extends Component {
      render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <p>
                Edit <code>src/App.js</code> and save to reload.
              </p>
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                Learn React
              </a>
            </header>
          </div>
        );
      }
    }

    export default App;

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

  import React, { Component } from 'react';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <h1>Header</h1>
          <p>This is the content!!!</p>
        </div>
      );
    }
  }

  export default App;