REACT JS

ch-1 reactjs welcome to react

=> npm i -g create-react-app

=>create-react-app reactwap

=>cd reactwap

npm start

=>const firstCode=()=>{

const design=(

<h1>hello wap</h1>

  );

  return design;

}

export default firstCode;

=>import "./App.css";

import "./new.css";

const demo=()=>{

const design=(

<h1 id="demo">hello wap</h1>

  );

  return design;

}

export default demo;

->h1{

  color:red;

}

->#demo{

background-color:yellow;

}

ch-2 reactjs import export and component

=>import "./App.css";

const demo=()=>{

const design=(

<h1 id="demo">hello wap</h1>

  );

  return design;

}

export default demo;

=>const Navbar=()=>{

const design=(

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Images</a></li>

</ul>

);

return design;

}

export default Navbar;

=>import Navbar from "./Navbar";

import Footer from "./Footer";

-><Footer />

    <Navbar />

=>const Footer=()=>{

const design=(

<h1>welcome to footer</h1>

);

return design;

}

export default Footer;

ch-3 reactjs intro to routing and spa

=>import "./Navbar.css";

import myphoto from "./logo192.png";

const Navbar=()=>{

const design=(

<ul>

<li><a href="/"><img src={myphoto} width="40" /></a></li>

<li><a href="/">Home</a></li>

<li><a href="/images">Images</a></li>

<li><a href="/videos">Videos</a></li>

<li><a href="/about-us">About us</a></li>

<li><a href="/contact-us">Contact us</a></li>

</ul>

);

return design;

}

export default Navbar;

=>import Navbar from "./components/Navbar/Navbar";

import Footer from "./components/Footer/Footer";

-><Navbar />

   <App /> 

   <Footer />

=>ul {

padding: 0;

margin: 0;

display: flex;

justify-content: space-evenly;

background: #323232;

padding: 24px 0;

}

li {

list-style: none;

}

a {

color: white;

text-decoration: none;

}

=>import "./Footer.css";

const Footer=()=>{

const design=(

<footer>

</footer>

);

return design;

}

export default Footer;

=>footer {

width: 100%;

height: 450px;

background: #323232;

}

=>import {

  BrowserRouter,

  Switch,

  Route

} from "react-router-dom";

import "./App.css";

const App=()=>{

  const design=(

    <div class="page">

    <div class="container">

      <BrowserRouter>

        <Switch>

          <Route exact path="/">

          <h1>welcome to homepage</h1>

          </Route>

          <Route exact path="/images">

          <h1>welcome to images</h1>

          </Route>

           <Route exact path="/videos">

          <h1>welcome to videos</h1>

          </Route>

           <Route exact path="/about-us">

          <h1>welcome to about us</h1>

          </Route>

           <Route exact path="/contact-us">

          <h1>welcome to contact us</h1>

          </Route>

        </Switch>

      </BrowserRouter>

    </div>

    </div>

    );

  return design;

}

export default App;

=>.page {

  display: flex;

  justify-content: center;

  height: 1000px;

}

.container {

  width: 80%;

  padding: 48px 0;

  background: #f5f5f5;

}

ch-10 reactjs usestate and sticky navbar

/*import { useState } from "react";

import logo from './logo.svg';

import './App.css';

function App() {

  const content={

    text:"er saurav",

    css: {

      color:"red",

      fontWeight:"bold",

      fontSize:"100px"

    }

  }

  const [data,changeData]=useState(content);

  

const perform=()=>{

  const updateData={

    text:"wap ins",

    css: {

      color:"blue",

      fontWeight:"normal",

      fontSize:"200px"

    }

  }

  return changeData(updateData);

}

 const design=(

  <>

     <h1 style={data.css}>{data.text}</h1>

     <button onClick={perform}>test</button>

  </>

  );

 return design;

}

export default App;*/

/*import { useState } from "react";

import logo from './logo.svg';

import './App.css';

function App() {

  const css={

    color:"black",

    fontSize:"40px"

  }

  const [data,changeColor]=useState(css);

  const setColor=(event)=>{

    const input=event.target;

    let colorName=input.value;

    const updateData={

      color:colorName

    }

   return changeColor(updateData);

  }

const setSize=(event)=>{

  const input=event.target;

  const fontSize=input.value+"px";

  const updateData={

    fontSize:fontSize

  }

 return changeColor(updateData); 

}

const design=(

    <>

    <h1 style={data}>wap ins</h1>

    <input type="color" onChange={setColor} />

    <input type="range" min="20" max="500" onChange={setSize} />

    </>

  );

return design;

}

export default App;*/

import { useState } from "react";

import logo from './logo.svg';

import './App.css';

function App() {

  const content={

    action:"show",

    text:"hide"

  }

  const [data,changeData]=useState(content);

const toggle=()=>{

 let tmp="";

 if(data.action == "show")

 {

  tmp={

    action:"hide",

    text:"show"

 

  }

 } 

 else{

  tmp={

    action:"show",

    text:"hide"

 

  }

 }

 return changeData(tmp);

}

const design=(

  <>

  <h1 className={data.action}>wap ins</h1>

  <button onClick={toggle}>{data.text}</button>

  </>

  );

return design;

}

export default App;