Create ReactJS App

Install npm

1. Download the Windows installer from the Nodes.js® web site.
2. Run the installer (the .msi file you downloaded in the previous step.)
3. Follow the prompts in the installer (Accept the license agreement, click the NEXT button a bunch of times and accept the default installation settings).
verify the installation

Test npm: To see if NPM is installed
npm -v
This should print NPM’s version number so you’ll see something like this:
5.5.1

Create new react project with npm

1. Create new react project with npm

npx create-react-app my-app
this will create a react app with my-app name.
To run the react app
cd my-app
npm start

2. Create new react project with StackBlitz

https://stackblitz.com
You can code and run the react application on StackBlitz.

reactjs2Bwith2Bstackblitz2B

Reactjs File Structure

reactjs2Bfile2Bstructure

src/App.css
This css file contains the styles required for App.js file

src/App.js
The App component is essentially the top most component in a React-based application, from whom all other components are children of.

src/App.test.js
This file contains the unit test cases of App.js file.

src/index.css
The CSS file corresponding to index.js

src/index.js
This is the javascript file corresponding to index.html. This file has the following line of code which is very significant.

ReactDOM.render(<App />, document.getElementById(‘root’));

The above line of code is telling that App Component ( will cover App Component soon) has to be loaded into an html element with id root. This is nothing but the div element present in index.html.

ReactDOM.render(element, container[, callback])
Render a React element into the DOM in the supplied container and return a reference.

package.json
This File has the list of node dependencies which are needed.

React Hello World Example

Why this HTML code is placed in between JavaScript code?

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

Lets go to our next tutorial where we will discuss below points :

Part 2 – JSX in React

In this tutorial, we will understand below topics – 
– What is JSX?
– How to use JSX in React?
https://onlyfullstack.blogspot.com/2019/11/jsx-in-react.html

Source Code
You can edit and play with the react examples on below stackblitz site – 
https://stackblitz.com/@onlyfullstack

React Tutorial
https://onlyfullstack.blogspot.com/2019/11/react-tutorial.html