#2 Install React Project with CLI & Run Our First React App
Categories - React Js Tags - React Js JavaScript   Maniruzzaman Akash   11 months ago   695   0

#2 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: 

 

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 - 

react-first-screen-with-change

 

 

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

 

Previous
#4 - let vs const vs var - Clear the ES6 concepts and makes simpler path to learn React