Creating react app

Node.js

You can download it from: https://nodejs.org/en/

Create React App

Open your terminal in the directory you would like to create your application. Run this command to create a React application named my-react-app:

npx create-react-app my-react-app

OR, you can directly make your application without specifying a name, like this:

npx create-react-app .

In this case, all files will be kept in the current directory. 

Note: When choosing folder name, make sure there are no spaces or capital letters because of npm naming restrictions. 

Once base application is created, if folder specified you just have to enter the folder. You can use this command to enter:

cd directory-name

Then just start up the application with this command:

npm start

and you are good to go! 

Run and Check

Run the React Application with this command:

A new browser window will pop up, if it does't then go on http://localhost:3000/. Check if it is showing the same page:

If it's the same page then you are good to go! 

Hello World

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);

In this we are just putting <h1> tag in a div with id 'root'. That's it! In div with id 'root' everything will be rendered. We can also change it from 'root' to something else, as we are just getting an element and putting HTML in it. 

For this first you need to navigate to src/App.js, it will look like: 

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Whatever you put in return will be rendered as HTML on the page, you can change it like: 

function App() {
  return (
    <div className="App">
      Hello World
    </div>
  );
}

Note: Remember to wrap whole return value in an HTML element as you can't return multiple elements but you can return multiple elements in one element.

Page would look like this: