React.JS Hello World

Here is a quick guide how to start with React.JS: Installation and creating a test app using it:

Step 1: Install Node.js

As a first step you need to download and install Node.js on your computer (Download Link). If you have already install it, you can skip that step.

You can verify you have node.js installed by running the following command in Command Prompt or Terminal:

node -v

it should output a value, i.e.

v12.16.1

Step 2: Create Base App

Open a Command Prompt or Terminal, ‘cd’ to the folder you want to install your first React.js app and execute the following command:

npx create-react-app my-app

*Note: You can rename ‘my-app’ to some other name.

Step 3. Install VS Code

Visual Studio Code is probably the most popular choice for React.JS app. So, we will use it for our example (Download LINK).

Step 4. Open Project in VS Code

Open VS Code -> File -> ‘Open Folder …’ -> Then open ‘my-app’ folder, it includes different folders:

src – includes all source code
public – includes static files such as images
node_modules – includes all project dependencies
package.json – records of project dependencies
package-lock.json – records of exact version of packages
README.md – instructions how to use the project

Step 5. Write Hello World App

Delete ALL files from ‘src’ files. Then add a new file into ‘src’ folder called ‘index.js’ with the following content:

// Import the React and ReactDOM libraries
import React from "react";
import ReactDOM from "react-dom";

if (module.hot) {
  module.hot.accept();
}

// Create a react component
const App = () => {
  return <div>Hello World!</div>;
};

// Take the react component and show it on the screen
ReactDOM.render(<App />, document.querySelector("#root"));

Step 6. Run your React.js App

Open Command Prompt or Terminal, cd to ‘my-app’ folder and run the following command:

npm start

On success, you should see the following result:

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.8.216:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Then you can open the following URL http://localhost:3000 in browser to see the result.

And you can stop the app, by click ‘Ctrl + C’ into the Command Prompt or Terminal.