React Project structure

React folder structure will give you the clear picture of workflow of coding React app contain only a Single DOM object which will be render a component and make code easier and performance will be increasing,components can be reusable multiple times.

Hello World in React

Step 1: In VS code editor create a new folder which name as Test.

Step 2: Set up terminal (ctrl + shift + p) to open terminal type à Select default shell terminal

Step 3: In terminal type npx create-react-app HelloWorld

[Connect internet throughout the process]. It will take some time to install code, type Hello world in <div> of App.js file and then to run type the following commands

>cd Helloworld

>npm start

App.js

import React from 'react';
import "../node_modules/bootstrap/dist/css/bootstrap.css"
function App() {
  return (
    <div className="App">
          <div className="card bg-success shadow"
> 
                   <h2> Hello world &nbsp; :)</h2>
        </div>
    </div>
  );
}
export default App;

Output

https://techteamup.com/category/javascript/react_js/

Leave a Reply

Your email address will not be published. Required fields are marked *