React JS on Visual Studio Code

download Visual Studio Code from this link : https://code.visualstudio.com/
once downloaded, Open Visual Studio Code.
Click Open Folder in the top left corner and browse to react-demo project folder and open.
react-demo project is now ready for development. it will look like below:

note: I have started running react-app from terminal of VScode. to start app run “npm start”.

Understanding Folder Structure

In React application, there are several files and folders in the project directory. Some of them are as follows:

In React application, there are several files and folders in the project directory. Some of them are as follows:
node_modules/: This folder contains all of the packages (libraries and tools) that your project depends on, as listed in package.json.
public/: This folder contains the public assets of your application, such as index.html, which is the main HTML file for your app, and favicon.ico, which is the app’s icon that is displayed in the browser’s tab. The index.html is responsible for web view of browser.
src/: This folder contains the source code of your application.
App.js: This is the root component of your application. It is responsible for rendering the other components and managing the state of the application.
index.js: This is the entry point of your application. It is responsible for rendering the App component and attaching it to the index.html file.
package.json: This file contains metadata about your project, including its dependencies, scripts, and other information.
package-lock.json: This file is generated automatically when you install packages using npm. It ensures that the exact versions of the dependencies are installed every time you run npm install.
README.md: This file contains information about your project, such as how to install and run it.

Below is the index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

In this example, ReactDOM.createRoot is used to render the App component into a DOM node with an ID of root. the ID root od div element in DOM you will see in index.html in public folder. The render method is then used to render the App component into the root node.

Note: ReactDOM.createRoot was introduced in React 17 and is an alternative to the traditional ReactDOM.render method. The main difference between the two is that createRoot allows for concurrent rendering, which can result in improved performance in certain use cases.

Understanding Folder Structure

Leave a Comment Cancel Reply