Create a React Hello World program

By

If Node.js is already installed on your computer, you can create a runnable React Hello World app by simply issuing the following command:

npx create-react-app hello-world

Create and run a React app

From there, inside the hello-world folder that gets created, run a single npm start command to start your app and make it available on port 3000 of localhost:

cd hello-world
npm start

The React Hello World app

To turn the provided app into a React Hello World program, simply add the text "Hello World!" to the src/App.js file. The webpage will refresh automatically and display the updated React Hello World app:

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

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

export default App;

Beyond Hello World in React

This React Hello World tutorial demonstrates how to get a basic program up and running, but it doesn't stop there.

Once your Hello World program works, it's a perfect time to explore how easy it is to incorporate advanced features into your React app, including the following:

An advanced React Hello World tutorial

Screenshot of a React app run by a developer.
It only takes a couple of commands to create and run a basic web app build with the React library.

The whole point of creating a Hello World React program is to ensure your Node.js environment works, quickly examine the basic structure of a library or framework, and address any configuration issues before moving on to more advanced topics.

More broadly, however, React greatly simplifies the art of stateful website development. With a working Hello World app at your disposal, it would be a missed opportunity not to explore some of the additional features this popular library has to offer -- which is exactly what you'll learn about in this advanced React Hello World tutorial.

Cameron McKenzie has been a Java EE software engineer for 20 years. His current specialties include Agile development; DevOps; Spring; and container-based technologies such as Docker, Swarm and Kubernetes.

View All Videos