Setting up your browser with Babel

If you want to create just a lightweight React app, or just try it, then the easiest way to implement it is through the web browser setup.

Create html file! For example: 'hello-world.html'

hello-world.html

Development environment with Node

If you want to develop a more complex and bigger React application, then you should use a development environment instead of burdening the browser like in the previous example.

At first, you have to download and install node version manager (nvm).

Download nvm-windows!

https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows

According to the documentation, you can install nvm either manually (nvm-noinstall) or with the installer (nvm-setup). If you choose the installer, do the next!

Download nvm-setup.zip & Install nvm-windows!

https://github.com/coreybutler/nvm-windows/releases

Download the nvm-setup.zip folder (bottom of the page), then unzip it and run the installer!

Open your command-line interface or shell!

Install Node.js

https://nodejs.org/en/download

$ nvm install 16.13.0.

I choose version 16.13.0. here, but you can use the actual version, of course, if 16.13.0. is deprecated.

$ nvm list

Check the installed version, then go to your React app folder!

$ cd /react-app-folder/

$ npx create-react-app@latest /react-app-name/

You can install different versions of node, using the command above the latest installed version will be selected for your React app.

$ npm start

After you do the start command, the React app page should be loaded on http://localhost:3000.

The React start-page is running now, but let's make something custom!

'Hello World!' app

Delete all files from your react app 'src' folder!

Create index.js file!

src/index.js

Create HelloWorld.js file!

src/Helloworld.js

$ cd /react-app-folder/

$ npm start

You have got a custom Hello-World React app. It is a great achievement for now, before you develop something extraordinary!