ReactJS Hello Word

ReactJS Hellow World

In this article we will learn how you will write your first program in reactJS.In the following line of codes you have a noscript tag which is place in body tag, When you run your application on browser and sometimes your browser do not support the javascript then that time noscript tag will be enabled and you will get this line of text "You need to enable JavaScript to run this app" which will be mentioned in noscript tag. So, lets's start from index.html file.

index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta name="theme-color" content="#000000" />

<meta name="description" content="Web site created using create-react-app"/>

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

<title>React App</title>

</head>

<body>

<noscript>You need to enable JavaScript to run this app.</noscript>

<div id="root"></div>

</body>

</html>

Now we are going to move index.js file. We will write everything in react.We will import two modules in index.js file. First we will be need to import react module and second one we will be need to import react-dom.

ReactDOM

In react language, javascript DOM will be possible by using ReactDOM.ReactDOM is enable the javascript document object model in react language. So, that's why we are using react-dom package.

React

when you want to write html coding in react then you need to import react module. Actually it is not an html coding, it is JSX expression, but it is showing like html coding.I will explain in next article that what is JSX expression. So, that's why we are using react module through import keyword.Now you can access all benifits of babels. Babels is the basically javascript compiler. Babels convert the our modern javascript languages into old javascript languages for browser understanding. because our browser do not understand modern javascript languages.

Now we will show hello world using ReactDOM.render. In ReactDOM.render first element will be which you want to show and second element will be where you want to show. So, We want to show our first element in root. So, keep in mind root is the id of div tag in index.html body tag. Now first we will get the id,

You are already know that how you access any id using javascript. You will get root id using document.getElementById. For better understanding you can see complete code.

index.js

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render

(

<h1>Hellow Word</h1>,

document.getElementById('root')

);

Now you can run your application by using this command npm start.

In next article we will see how run the JSX code in babel compiler.