Install React Project with CLI & Run Our First React App

Welcome to React Tutorial. Today we'll show -

• React First Project Setup
• Node Js installation and Setup
• React Project Run
• Change Project and Run again.

Download Source Codes and Help:

Day 2 Source Code - https://github.com/ManiruzzamanAkash/ReactBasic2Pro/tree/Day2

Topic Covered:

What is Node JS In a short sense:

• Node JS is JavaScript Run time Built on Chrome V8 Engine.
• Cross Platform, Open Source, Faster Execution. 
• Serves Our Website on node server.
• Helps to generate bundle from files that run in browser. Similar Could be browserify, webpack

Install Node JS

https://nodejs.org/en

Add Node in Environment Variable path (if necessary)

C:\Program Files\nodejs

Check if installed Node JS

node –v

Common ERROR in NODE Installation

npm is not recognized as internal or external command

Solution: 

Add Node in Environment Variable path

C:\Program Files\nodejs

Install React App and Run: 

• Install create-react-app
• Documentation - https://reactjs.org/docs/create-a-new-react-app.html
• Command - npx create-react-app react-simple-app
• Go to project
• Make Change & Run
• npm start
• Run Our First React Application 
• Simple Change & Run Again

Change in src/app.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
         Welcome to React World !! New 
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

View in Browser - 

Tags More: react bangla video, react tutorials, react advance, react basic to pro, react project, react live project example, react video tutorial, react real example, react project run, react bangla video, react project setup, react ecommerce project, react todo app, react admin panel, react big project