Hello World with React

I’m going to show you how to create a Hello World web app with React.

Note: I’m using React 18, which is the latest version at the time of this writing.

1 – Install VS Code

VS Code is a really good IDE for developing React apps. So first things first, go download and install it from here: https://code.visualstudio.com/download

Note: After it installs, I suggest leaving VS Code closed until after you’ve installed Node.

2 – Install Node

We’ll be using Create React App to initialize the React app with good tools and configuration. In order to use this, download and install Node from here: https://nodejs.org/en/download/

3 – Create React App

In this step, we’ll initialize the React app with the create-react-app command.

First, in VS Code, open the folder where you want to put the React app (such as C:/Projects). Note: This is so the terminal defaults to the project folder, and so the newly created app shows up in VS Code right away.

Now create the React app:

  • In VS Code, open a terminal (from menu: Terminal > New Terminal).
  • Execute command:
npx create-react-app hello-world-app
Code language: Bash (bash)

Note: If it’s saying ‘npx doesn’t exist’, close and reopen VS Code.

  • If this is the first time you’re running this, you’ll see this prompt. Enter “y”:
Need to install the following packages: create-react-app@5.0.1 Ok to proceed? (y) y
Code language: plaintext (plaintext)
  • This has to install a lot of stuff so it takes a few minutes. While it’s installing, you should see something like this, including the progress bar (nice!):
Creating a new React app in C:\Projects\hello-world-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... [#########.........] - idealTree: timing idealTree Completed in 46945ms
Code language: plaintext (plaintext)
  • When it’s finished creating the app, you’ll see the following information:
Success! Created hello-world-app at C:\Projects\hello-world-app Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back! We suggest that you begin by typing: cd hello-world-app npm start Happy hacking!
Code language: plaintext (plaintext)

This is quite helpful information, so I’m displaying a lot of it above for your reference.

Note: If you don’t see the app in VS Code’s Projects list, open the app folder that was just created (i.e. C:/Projects/hello-world-app).

4 – Start the app

From the terminal in VS Code, go to the app folder and start the app:

cd hello-world-app npm start
Code language: Bash (bash)

Note: To quickly open a new terminal started in a folder, right-click the folder (in Projects) and then choose ‘Open in Integrated Terminal.’

This compiles the app, starts the web server (webpack), and launches the app in the browser. This could take awhile. When it completes, you should see something like the following information:

Starting the development server... Compiled successfully! You can now view hello-world-app in the browser. Local: http://localhost:3000 Note that the development build is not optimized. To create a production build, use npm run build. webpack compiled successfully
Code language: plaintext (plaintext)

The browser should be opened to http://localhost:3000 and it should be showing the following:

Default App component generated by Create React App

5 – Modify the app

Your React app’s entry point is /src/index.js. This initializes the app by rendering the App component. In this final step, modify the App component to make it say “Hello World.”

  • The App component is defined in /src/App.js. Open this in the editor.
  • Let’s clean it up and make it say “Hello World”:
import logo from './logo.svg'; import './App.css'; function App() { let greeting = "Hello World"; return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h3>{greeting}</h3> </header> </div> ); } export default App;
Code language: JavaScript (javascript)
  • Save the file.

Notice that when you save, it automatically recompiles and the changes show up in the browser:

React app showing "Hello World"

This is significantly faster than starting the app again (with npm start). This functionality comes from webpack (auto installed by Create React App), which watches for changes.

The other thing to notice is the code is a mix of HTML and JS. It’s very intuitive and clean. How is that done? It’s called JSX, which allows you to write HTML in JS, and is converted to JS (transpiled) by Babel (auto installed by Create React App).

Leave a Comment