ReactJS is a UI library developed at Facebook to facilitate the creation of interactive, 

stateful &
reusable UI components. As Wikipedia puts it, React allows developers to “create large web-
applications that use data and can change over time without reloading the page.”   

Its primary goal is to make it easy to reason about an interface and its state at any point in time. It does
this by dividing the UI into a collection of components.
You might experience some initial difficulties when learning React. But once it "clicks", I guarantee it's
going to be one of the best experiences you ever have. React makes many things easier, and its
ecosystem is filled with great libraries and tools.
Installation of React JS on Visual Studio.
1. Download the Node JS onto the system (https://nodejs.org/en/download/)
2. Kindly Check the Node JS installation on window Shell by command
 node –version
 npm –version (npm is an abbreviation used for the node package manager. It is a package
manager for JavaScript. It is the default package manager that comes with NodeJS when you
install it)

3. Install React Development Tools for Google Chrome Extension

4. Installation of Extension in Visual Studio Code:
 Thunder Client:- Postman API Testing Sending and Receiving GET POST Request and
reply for the API.
 ES7 React/Redux/GraphQL/React-Native snippets: - Simple extensions for React, Redux
and Graphql in JS/TS with ES7 syntax
 Bracket Pair Color:- Quickly 'Bracket Pair Color DLW' setting with a simple command.

5. Go to (https://reactjs.org/docs/create-a-new-react-app.html).
6. Create React App Create React App is a comfortable environment for learning React, and is the
best way to start building a new single-page application in React. create-react-app is a command
line application, aimed at getting you up to speed with React in no time. You start by using npx,
which is an easy way to download and execute Node.js commands without installing them.
 npx create-react-app my-app
 cd my-app
npm start
7. When you run npx create-react-app <app-name>, npx is going to download the most recent
create-react-app release, run it, and then remove it from your system.This is great because you
will never have an outdated version on your system, and every time you run it, you're getting the
latest and greatest code available.
1. JSX:
JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a
JavaScript file. Although there are other ways to write components, most React developers prefer
the conciseness of JSX, and most codebases use it.
The Rules of JSX
1. Return a single root element
To return multiple elements from a component, wrap them with a single parent tag.

For example, you can use a <div>:

<div>
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
...
</ul>
</div>
If you don’t want to add an extra <div> to your markup, you can write <> and </> instead:

<>
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
...
</ul>
</>
This empty tag is called a Fragment. Fragments let you group things without leaving any
trace in the browser HTML tree.

2. Close all the tags

JSX requires tags to be explicitly closed: self-closing tags like <img> must become <img />,
and wrapping tags like <li>oranges must be written as <li>oranges</li>.

This is how Hedy Lamarr’s image and list items look closed:
<>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
/>
<ul>
<li>Invent new traffic lights</li>
<li>Rehearse a movie scene</li>
<li>Improve the spectrum technology</li>
</ul>
</>

Use a JSX Converter

Converting all these attributes in existing markup can be tedious! We recommend using a
converter to translate your existing HTML and SVG to JSX. Converters are very useful in
practice, but it’s still worth understanding what is going on so that you can comfortably write
JSX on your own.
Link for Converters (https://transform.tools/html-to-jsx)
Components in React:
Components are one of the core concepts of React. They are the foundation upon which you build user
interfaces (UI), which makes them the perfect place to start your React journey!

Components: UI building blocks

On the Web, HTML lets us create rich structured documents with its built-in set of tags like <h1> and
<li>:

<article>
<h1>My First Component</h1>
<ol>
<li>Components: UI Building Blocks</li>
<li>Defining a Component</li>
<li>Using a Component</li>
</ol>
</article>

Defining a component

Traditionally when creating web pages, web developers marked up their content and then added
interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on
the web. Now it is expected for many sites and all apps. React puts interactivity first while still using
the same technology: a React component is a JavaScript function that you can sprinkle with markup.
Here’s what that looks like (you can edit the example below):

export default function Profile() {

return (
<img
src="https://i.imgur.com/MK3eW3Am.jpg"
alt="Katherine Johnson"
/>
)
}

And here’s how to build a component:

Step 1: Export the component
The export default prefix is a standard JavaScript syntax (not specific to react). It lets you mark the
main function in a file so that you can later import it from other files. (More on importing in Importing
and Exporting Components!)

Step 2: Define the function

With function Profile () { } you define a JavaScript function with the name Profile.