React JS - Hooks

 App.js

import './App.css';
import Cntr from './Cntr';


function App() {
 return(
   <>
   <Cntr/>
   </>
 );
}


export default App;


Cntr.js


import React, {useState} from 'react';

//use state is used to change the sate of a varibale means update a value with a eventlistner in our DOM. 


export default function Cntr() {

    const [count , setCount] = useState(0);   // const[variable , update value fuction] = useState (variable initialization);
   
    const valinc = () =>{
        
    setCount(count+1);   //set setcount function
    }


    return (
        <div className="col-6 m-auto mt-4">
              <h1 className="text-center">{count}</h1>
              <p className="text-center"><button className="btn btn-primary" onClick={valinc}>Click Now</button></p>
        </div>
    )
}


Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <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" />

    <title>Netflix App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

  </body>
</html>

মন্তব্যসমূহ

একটি মন্তব্য পোস্ট করুন

এই ব্লগটি থেকে জনপ্রিয় পোস্টগুলি

React Js Cards (Props, Array, Mapping, Rendaring)

 App.js import Card from './card'; import './App.css'; import Movie from './Movie'; const movies = (val) =>{   return(     <>     <Card img={val.img} title={val.title} Category={val.Category}/>     </>   ) } function App() {   return (     <>     {Movie.map(movies)}            </>   ); } //map function is used to create a array of each array elements.  export default App; Card.js import React from 'react' export default function card(props) {   //props means properties. We can create custom attributes using props.     return (         <div className="card">             <img src={props.source} />             <div className="container">                 <h4><b>{props.title}</b...
আরও পড়ুন

React Js - Form Submit, Input

 App.js import React from "react"; import './App.css'; import ReactDom from "react-dom"; import Forms from './froms'; function App() {  return(    <>    <Forms/>    </>  ); } export default App; forms.js import React, { useState } from 'react'; const Forms = () => {     const [names, setnames] = useState("");     const [fullnames, setfullname] = useState("");     const submitting = (e) =>{         e.preventDefault();       //revent default events     }     const inputEvent = (e) => {         console.log(e.target.value);         setnames(e.target.value);     }     const clicked = () => {         setfullname(names);     }     return (         <>             <div classNam...
আরও পড়ুন