How to create React application in visual studio code

React is a popular JavaScript library developed by Facebook for building user interfaces. The Visual Studio Code editor supports React.js IntelliSense and code navigation out of the box.

Prerequisites:
Installed Node.js JavaScript runtime npm (Node.js package manager). Node.js downloads

Create a new React application by typing:

npx create-react-app my-app

where my-app is the name of the folder for your application. This may take a few minutes to create the React application and install its dependencies.
Let's quickly run our React application by navigating to the new folder and typing npm start to start the web server and open the application in a browser:

cd my-app
npm start

You should see the React logo and a link to "Learn React" on http://localhost:3000 in your browser. We'll leave the web server running while we look at the application with VS Code.
To open your React application in VS Code, open another terminal or command prompt window, navigate to the my-app folder and type code .:

cd my-app
code .

Markdown preview

In the File Explorer, one file you'll see is the application README.md Markdown file. This has lots of great information about the application and React in general. A nice way to review the README is by using the VS Code Markdown Preview. You can open the preview in either the current editor group (Markdown: Open Preview Ctrl+Shift+V) or in a new editor group to the side (Markdown: Open Preview to the Side Ctrl+K V). You'll get nice formatting, hyperlink navigation to headers, and syntax highlighting in code blocks.
Syntax highlighting and bracket matching

Now expand the src folder and select the index.js file. You'll notice that VS Code has syntax highlighting for the various source code elements and, if you put the cursor on a parenthesis, the matching bracket is also selected.

IntelliSense
As you start typing in index.js, you'll see smart suggestions or completions.After you select a suggestion and type ., you see the types and methods on the object through
IntelliSense.

VS Code uses the TypeScript language service for its JavaScript code intelligence and it has a feature called Automatic Type Acquisition (ATA). ATA pulls down the npm Type Declaration files (*.d.ts) for the npm modules referenced in the package.json.

If you select a method, you'll also get parameter help:
Go to Definition, Peek definition

Through the TypeScript language service, VS Code can also provide type definition information in the editor through Go to Definition (F12) or Peek Definition (Alt+F12). Put the cursor over the App, right click and select Peek Definition. A Peek window will open showing the App definition from App.js.
Press Escape to close the Peek window.

Hello World

Let's update the sample application to "Hello World!".
Create a new H1 header with "Hello, world!" and replace the <App /> tag in ReactDOM.render with element.

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

var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');
ReactDOM.render(element, document.getElementById('root'));

reportWebVitals();

Once you save the index.js file, the running instance of the server will update the web page and you'll see "Hello World!" when you refresh your browser.
Output: