React Front end with percipio

After you have installed react js with whatever platform.

you will get folders out of the box.

some of the folders you will be seeing are:

1. node_modules

2. public 

3. src

if you go to the public and it's index.html you will see the  div with id= root.. that is our root div it acts like main container.

and in the src folder you have index.js

  here are rendering app to our main root container. app is just a js that is available in src folder.

just go to the app.js 

and you can see it has a function that is returning some html. and the returned html is captured by index.js and then it is integrated to root container .. just to our surprise the html that is being retured is called jsx in react quite fancy .

we can write these jsx in variable let,const whatever like we do in javascript.

and while calling the variable we should keep inside {}

for example: 

constant variab ="<br>Hello Yar</br>"

funcation balbala()

{return (

 {variab}

)}

part  2.

lets say we want to break the html or jsx what we call here into header body and footer and use it as different components.

just go ahead and make a components folder inside src and make 3 js header maincontent and footer.

Header.js

import React from "react"

function Header(){

  return(<header>

      This is the header

  </header>)

}

export default Header

now we have a new component

maincontent.js

import React from "react"

function maincontent(){

  return(<header>

      This is the main content

  </header>)

}

export default maincontent

maincontent.js

import React from "react"

function footer(){

  return(<header>

      This is the footer

  </header>)

}

export default footer

NOW AGAIN GO TO App.js

remove the necessary like below and add:

 import React from 'react'

 import logo from './logo.svg'

 import './App.css'

 import Header from "./components/header"

import maincontent from "./components/maincontaint"

import Footer from "./components/footer"

function App(){

  return 

   (

    <div>

     <Header />

     <MainContent />

     <Footer />

    </div>

)

}

establishing component state (using props)

Here in the app.js lets pass some values

function App(){

  return 

   (

    <div>

     <Header />

     <MainContent pageTitle= {"Weight Loss Competition"} />

     <Footer />

    </div>

)

}

lets go ahead and now change the component to handle the props that we just passed.

maincontent.js

import React from "react"

function maincontent(props){

  return(<header>

     <h2>{props.pageTitle}</h2> //just added

      This is the main content

  </header>)

}

//javascriot is a loosely typed language

we can get little bit more using types i.e prop type

lets go ahead and use it in our maincontent.js component

maincontent.js

import React from "react";

import PropTypes from "prop.types"; //added

function maincontent(props){

  return(<header>

     <h2>{props.pageTitle}</h2> //just added

      This is the main content

  </header>)

}

maincontent.propTypes ={

         pageTitle:PropTypes.string

}

export default maincontent

use state should be revised today.