How to install and setup React JS?

In this reactjs tutorial for beginners we learn how to install reactjs in windows and in ubuntu also. we learn how to setup reactjs environment on windows OS such as download node js, install npm, and other things which are very important for reactjs.

Steps of this tutorial is:

Install Node and NPM (For Node JS Download)

https://www.npmjs.com/package/react – npm i react

npm i react

How to check Node is install in your system..?

Simply type npm -v and press the enter and it show you current version which is installed in your system and if not then it’s show you command is invalid, same as above type node -v for node version.

Create your React app

• Open a terminal(Windows Command Prompt or PowerShell).
• Create a new project folder: mkdir ReactProjects and enter that directory: cd ReactProjects.
• Install React using npx create-react-app, a tool that installs all of the dependencies to build and run a full React.js application.

1. Make a folder where application wants to be install, give a folder name.
2. Go to inside folder using command prompt cd folder-name.
3. C:\Users\user\folder-name>cd project-name
4. run the command npx create-react-app project-name in command prompt.
5. C:\Users\user\folder-name\project-name>npm start

C:\Users\user>mkdir folder-name

C:\Users\user>cd folder-name

C:\Users\user\folder-name>cd project-name

C:\Users\user\folder-name\project-name>npm start

Runs the app in the development mode.

Open http://localhost:3000 to view it in the browser.

how to install package in react js..?

npm install package-name

C:\Users\user\folder-name\project-name>npm install package-name

For install ubuntu search in google node js

https://nodejs.org/en/download/package-manager/

Getting Started with Create React App

npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

npm run eject
Note: this is a one-way operation. Once you eject, you can’t go back!

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

React js without NPM | React CDN

First Step:

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

second Step:

<div id="mydivFirst"></div>

<script type="text/babel">
       
        class Hello extends React.Component{
            render()
            {
            return <div>Hello React code</div>  
            }
        }
        ReactDOM.render(<Hello />,document.getElementById('mydivFirst'))
    </script>

Another Example

<div id="mydivSecond"></div>

<script type="text/babel">
        function Test()
        {
            const bla=()=>{alert("Hello React")}
            return <button onClick={bla}>Click Me</button>
        }
        class Hello extends React.Component{
            render()
            {
            return <div>Hello React code <Test /></div>  
            }
        }
        ReactDOM.render(<Hello />,document.getElementById('mydivSecond'))
    </script>

---

Learn HTML/CSS from W3 School Website

• JavaScript