My first reactJs (Hello World) Project

Let’s write our first React Component. In my previous tutorial I have explained, how to install and setup the reactJs environment in local. This is a continuation of ReactJs: Installation and Setup the Development Environment. Let’s see how this work, follow the live demo and code below.

Video Tutorial

My first reactJs “Hello World” Project for Beginners

Live Demo

Your first React Component

By convention, all React parts that are made along these lines must acquire from the React.Component class.

The first thing we need to do is import both the React and ReactDOM classes. Add these lines to the top of those files:

import React from 'react';
import ReactDOM from 'react-dom';

Create files in our example folder called entry.js, App.js & index.html and add some code to it.

$ touch entry.js
$ touch App.js
$ touch index.html

Open entry.js and add below code

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

Open App.js and add below code

import React from 'react';
import ReactDOM from 'react-dom';

export default class App extends React.Component {
   render() {
      return (
         <h1>
            Hello World !...
         </h1>
      )
   }
}

Open index.html and add below code

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id="app"></div>
      <script src="main.js"></script>
   </body>
</html>

We done with our coding. Time to see our output. To see the output run the server.

$ npm start

Then open the browser and run “localhost:8080“

CV Member since May 29, 2019

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.