Web Develpers era

re renders => resolved

re renders

if we click button eventhougw we not calling

we can observer in closnel

import { useState } from "react";
import ReactDOM from "react-dom/client";
import Todos from "./Car";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState(["todo 1", "todo 2"]);

  const increment = () => {
    setCount((c) => c + 1);
  };

  return (
    <>
      <Todos todos={todos} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

tods.js

const Todos = ({ todos }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
    </>
  );
};

export default Todos;

solved with memo

if not calls this todos it console not prints

import { memo } from "react";

const Todos = ({ todos }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
    </>
  );
};

export default memo(Todos);

install the router

npm i -D react-router-dom

import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./Car";


export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
         
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

create form react

created variables inputs and setinputs

in input value is varaible inputs.

on change call funciton

call handlechange

setInputs(values => Object.assign({}, values, { [name]: value }));

assigne the values to this object

import { useState } from "react";
import ReactDOM from "react-dom/client";

function MyForm() {
  const [inputs, setInputs] = useState({});

  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputs(values => ({...values, [name]: value}))
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(inputs);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>Enter your name:
      <input 
        type="text" 
        name="username" 
        value={inputs.username || ""} 
        onChange={handleChange}
      />
      </label>
      <label>Enter your age:
        <input 
          type="number" 
          name="age" 
          value={inputs.age || ""} 
          onChange={handleChange}
        />
        </label>
        <input type="submit" />
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

ist mycar value loaded with volvo on page load normally it shows which one is ist value in drio down because of loaded value it showign as loaded value

function MyForm() {
  const [myCar, setMyCar] = useState("Volvo");

  const handleChange = (event) => {
    setMyCar(event.target.value)
  }

  return (
    <form>
      <select value={myCar} onChange={handleChange}>
        <option value="Ford">Ford</option>
        <option value="Volvo">Volvo</option>
        <option value="Fiat">Fiat</option>
      </select>
    </form>
  )
}

In this component:

Initial Value:
- myCar is initialized with "Volvo" using useState("Volvo"), so "Volvo" is the default value for the myCar state when the page first loads.
Select Element:
- The <select> element has a value prop set to myCar. Because myCar is initialized as "Volvo", the select dropdown will display "Volvo" as the selected option on page load.
Changing the Selection:
- When the user selects a different option, the handleChange function updates myCar to the selected option’s value, and the dropdown updates accordingly.

So, even though "Ford" is the first option in the list, "Volvo" will display as selected initially because myCar was set to "Volvo" on load. This behavior is expected and correct.

list the object usign map in react

function Car(props) {
  return <li>I am a { props.brand }</li>;
}

function Garage() {
  const cars = [
    {id: 1, brand: 'Ford'},
    {id: 2, brand: 'BMW'},
    {id: 3, brand: 'Audi'}
  ];
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <ul>
        {cars.map((car) => <Car key={car.id} brand={car.brand} />)}
      </ul>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);

write coniditons using curly brackets react

function Garage(props) {
  const cars = props.cars;
  return (
    <>
      <h1>Garage</h1>
      {cars.length > 0 &&
        <h2>
          You have {cars.length} cars in your garage.
        </h2>
      }
    </>
  );
}

const cars = ['Ford', 'BMW', 'Audi'];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);

ternary

  { isGoal ? <MadeGoal/> : <MissedGoal/> }

react conditionals

function Goal(props) {
  const isGoal = props.isGoal;
  if (isGoal) {
    return <MadeGoal/>;
  }
  return <MissedGoal/>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Goal isGoal={false} />);

react events

function Football() {
  const shoot = () => {
    alert("Great Shot!");
  }

  return (
    <button onClick={shoot}>Take the shot!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Football />);-

function Football() {
  const shoot = (a) => {
    alert(a);
  }

  return (
    <button onClick={() => shoot("Goal!")}>Take the shot!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

guess what is the event

import React from 'react';
import ReactDOM from 'react-dom/client';

function Football() {
  const shoot = (a, b) => {
    alert(b.type);
		/*
		'b' represents the React event that triggered the function.
    In this case, the 'click' event
		*/
  }

  return (
    <button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

using props and constructor

class Car extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h2>I am a {this.props.model}!</h2>;
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car model="Mustang"/>);

write class in another page and call to index page

import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car'; // Import the Car component

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<Car />); // Render the Car component

// car.js
import React from 'react';

class Car extends React.Component {
  constructor() {
    super();
    this.state = { color: "red" };
  }

  render() {
    return <h2>I am a Car!</h2>;
  }
}

export default Car;

write function in another page and call that page to index.jsx

car.js

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}


export default Car;

import React from 'react';
import ReactDOM from 'react-dom/client';

import Car from './Car.js';

const myelement = (
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Elsa</td>
    </tr>
  </table>
);

const container = document.getElementById('sandy');
const root = ReactDOM.createRoot(container);
root.render(<Car />);

call funciton in another function

import React from 'react';
import ReactDOM from 'react-dom/client';

import Garage from './Garage.js';


const container = document.getElementById('sandy');
const root = ReactDOM.createRoot(container);
root.render(<Garage />);

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}


export default Car;

import Car from './Car.js';
function Garage() {
    return (
        <>
        <h1>Who lives in my Garage?</h1>
        <Car />
        </>
    );
}

export default Garage;