Say “Hello World!” with the Create React App
Here are the steps to write a "Hello World" program in React:
Create a new React project using a tool such as Create React App.
Open the project in a text editor.
In the
src
folder, create a new file namedApp.js
.Add the following code to the
App.js
file:
import React from 'react';
function App() {
return <h1>Hello World</h1>;
}
export default App;
- In the
src
folder, open theindex.js
file and replace its content with the following code:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
- Open the
public/index.html
file and make sure it has adiv
with anid
ofroot
.
<div id="root"></div>
Start the development server by running
npm start
in the terminal.Open a web browser and go to
http://localhost:3000/
to see the "Hello World" message displayed on the page.
And that's it! You have successfully written your first React program. You can now build upon this foundation to create more complex React applications.