Installing ReactJS and creating your first application

Posted On: April 29, 2018

First need to download node js msi installable file from below URL.

URL: https://nodejs.org/en/download/current/

Now set up environment path for node js like “C:\Program Files\nodejs”

Now, The installer should set the C:\Program Files\nodejs; directory in windows PATH environment variable.

or you can use command line to set path like below:

SET PATH=C:\Program Files\Nodejs;%PATH%

Then, Create a js file named main.js on your computer having the following code.

/* Hello, World! program in node.js */
console.log(“Hello, World!”)

now run the below command:

C:\Users\admin\Desktop> node main.js

if command prompts give hello world than you are on the pich.

Now Create directory on desktop by command line

npm install -g create-react-app

create-react-app my-app

it will take some time to install all dependencies and plugins.

Now run below command:

cd my-app

and then run:

rm -f src/*

or

rmdir D:\reactJs\my-app\src /s /q (delete src folder and its files)

Now again create src folder.

Add a file named index.css in the src/ folder with this CSS code.

Also Read :   Marion Cotillard on Brad Pitt: He is such a good person

Add a file named index.js in the src/ folder with this JS code.

Add these three lines to the top of index.js in the src/ folder:

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;

Now if you run: npm start and open http://localhost:3000 in the browser

use the below code in index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

  class MyComp extends React.Component{
        render(){
        return(   
              <div>
               <h1>Hello</h1>
               <Header name="maxx" id="101"/>
           </div>
        );
    }
}
 
function Header(props) {
    return (              
           <div>
            <Footer name = {props.name} cms = {props.id}/>
           </div>
    );
}
function Footer(props) {
    return (
          <div>	
           <div>             
            <h1> Welcome : {props.name}</h1>             
            <h1> Id is : {props.cms}</h1>
           </div>
		   <div id="rec">
		   
		   </div>
		   <a href="/rtu" >rtu</a>
		   </div>
  );
} 


class MyComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            name: 'Maxx',
            id: '101'
        }
    }
    render()
        {
            setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
            return (             
                   <div>                     
                     <h1>Hello {this.state.name}</h1>
                     <h2>Your Id is {this.state.id}</h2>
                   </div>
             );
        }
    }


ReactDOM.render(
    <MyComp/>, document.getElementById('root')  

);

ReactDOM.render(
   <MyComponent/>, document.getElementById('rec')
);

Hope this will help you.

webe tutorial
Menu