React Getting Started | React JS Tutorial

Run and Check

Run the React Application with this command:

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

React Intro Page

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

Hello World

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 the whole return value in an HTML element, as you can't return multiple elements directly, but you can return multiple elements within one element.

Page would look like this:

React Hello World