In this article, we will see how to create a simple React Hello World app.
React Local Environment Setup
We will be setting up react using Node.js. For this, first check if a recent version of Node.js is installed.
$ node -v v10.13.0 $ npm -v 6.4.1
To create a new react app do one of the following :
npx create-react-app my-app
(or)
npm init react-app my-app
$ npx create-react-app myapp npx: installed 63 in 38.311s Creating a new React app in /Users/saswat/Desktop/myapp. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts... … … Success! Created myapp at /Users/saswat/Desktop/myapp 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 myapp npm start Happy hacking!
Now lets open the myapp created using an IDE (we are using Visual Studio Code).
The folder structure inside myapp would look something similar to this.
Modifying default React app for displaying Hello World
Let’s modify the App.js to add the text “Hello World from React !!”
The code basically creates a component named App. In react, components need to extend React.Component.
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
Hello World from React !!
</div>
);
}
}
export default App;
The render method of ReactDOM above returns a JSX.
Now to render the JSX in browser, the index.js has this code :
ReactDOM.render(<App />, document.getElementById('root'));
The index.html has a div element with id = “root”.
So, the div element will be updated with the JSX.
Inside the src folder, in my app, go to the my app folder and start the server.
$ cd myapp $ npm start Starting the development server... Compiled successfully! You can now view myapp in the browser. Local: http://localhost:3000/
You should see Hello World from React !! in the browser at this point.
Complete React Hello World Code
Here is the complete code:
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <title>React App</title> </head> <body> <div id="root"></div> </body> </html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App name="John Doe"/>, document.getElementById('root'));
serviceWorker.unregister();
App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
Hello {this.props.name}!!
</div>
);
}
}
export default App;
© 2018 – 2019, https:. All rights reserved. On republishing this post, you must provide link to original post