w3tweaks
  • 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
w3tweaks
  • 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
w3tweaks
Home Script ReactJs
My first reactJs (Hello World) Project

My first reactJs (Hello World) Project

W3TWEAKS by W3TWEAKS
November 26, 2019
in ReactJs
0

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
0
ReactJs: Eacy to setup and install (create-react-app)

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

September 21, 2019
0

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
0
0

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
0
0

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
0
0

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

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