w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Script ReactJs

My first reactJs (Hello World) Project

W3TWEAKS by W3TWEAKS
November 26, 2019
in ReactJs

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.

You might also like

ReactJs: YouTube Instant search working with API

ReactJs: YouTube Instant search working with API

November 26, 2019
ReactJs: Eacy to setup and install (create-react-app)

ReactJs: Eacy to setup and install (create-react-app)

September 21, 2019

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“

Tags: demoexampleProjectReactJStutorial
Previous Post

ReactJs: Installation and Setup the Development Environment

Next Post

ReactJs: Eacy to setup and install (create-react-app)

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

ReactJs: YouTube Instant search working with API

ReactJs: YouTube Instant search working with API

by W3TWEAKS
November 26, 2019

This tutorial will explain how to achieve to get YouTube instant search with API using ReactJs. You can find step...

ReactJs: Eacy to setup and install (create-react-app)

ReactJs: Eacy to setup and install (create-react-app)

by W3TWEAKS
September 21, 2019

In My previous reactjs tutorials, you can find the reactjs setups are done manually. We have to install the packages...

ReactJs: Installation and Setup the Development Environment

ReactJs: Installation and Setup the Development Environment

by W3TWEAKS
September 21, 2019

Facebook ReactJs is a powerful framework to develop the single page applications. Tutorial will explain you how to install and...

Next Post
ReactJs: Eacy to setup and install (create-react-app)

ReactJs: Eacy to setup and install (create-react-app)

Discussion about this post

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools