Cap 7. Getting Started with React

cap7-multiples-exercises.js

-- ejercicio 1 useState (update counter separately)

import { useState } from 'react';

export default function MyApp() {
  return (
    <div>
      <h1>Counters that update separately</h1>
      <MyButton />
      <MyButton />
    </div>
  );
}

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}


-- ejercicio 2 useState (sharing data)

import { useState } from 'react';

export default function MyApp(){
  const [count, setCount] = useState(0);

  function handlClick(){
    setCount(count + 1);
  }

  return(
    <div>
      <h1>Sharing Data</h1>
      <MyButton count={count} onClick={handlClick} />
      <MyButton count={count} onClick={handlClick} />
      <MyButton count={count} onClick={handlClick} />
    </div>
  );

}

function MyButton({count, onClick}){
  return <button onClick={onClick} > Clicked {count} times</button>
}

-- ejercicio 3 useEffect

import { useState, useEffect } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  function Hello() {
    console.log("Hello World from useEffect!");
  }

  useEffect(Hello);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <>
      <p>{count}</p>
      <button onClick={handleClick}>Click</button>
    </>
  );
}

-- ejercicio 3 version 2

import { useState, useEffect } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  function Hello() {
    console.log("Hello World from useEffect!");
  }

  useEffect(Hello);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <>
      <p>{count}</p>
      <MyButton onClick={handleClick} />
    </>
  );
}

function MyButton({onClick}){
  return ( <button onClick={onClick}>Click</button>);
}

-- ejercicio 3 version 3

import { useState, useEffect } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(Hello, [count]);
  
  function Hello() {
    console.log("Counter value is now " + count);
  }

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <>
      <h1>{count}</h1>
      <MyButton onClick={handleClick} />
    </>
  );
}

function MyButton({ onClick }) {
  return <button onClick={onClick}>Click</button>;
}

-- ejercicio 3 version 4 (array vacio en useEffect)

import { useState, useEffect } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(Hello, []);
  
  function Hello() {
    console.log("Counter value is now " + count);
  }

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <>
      <h1>{count}</h1>
      <MyButton onClick={handleClick} />
    </>
  );
}

function MyButton({ onClick }) {
  return <button onClick={onClick}>Click</button>;
}


-- ejercicio 3 version 5

import { useState, useEffect } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(PrintHello, [count]);

  function PrintCleanUp(){
    console.log("Clean up function");
  }
  
  function PrintHello() {
    console.log("Hello from useEffect!");
    return PrintCleanUp;
  }

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <>
      <h1>{count}</h1>
      <MyButton onClick={handleClick} />
    </>
  );
}

function MyButton({ onClick }) {
  return <button onClick={onClick}>Click</button>;
}


-- ejercicio 4 useRef

import { useRef } from "react";

export default function App(){
  const inputRef = useRef(null);

  function handleClick(){
    inputRef.current.focus();
  }

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick} > Focus input </button>
    </>
  )
}

-- ejercicio 5 custom hooks
// file app.js
import { useState } from "react";
import useTitle from "./useTitle";

export default function App() {
  const [count, setCount] = useState(0);

  useTitle("You clicked " + count + " times");

  return (
    <>
      <p>Counter = {count}</p>
      <button onClick={() => setCount(count + 1)}> Increment </button>
    </>
  );
}

// file useTitle.js
import { useEffect } from "react";

export default function useTitle(title) {
  function setTitle() {
    document.title = title;
    return PrintConsole(title);
  }

  function PrintConsole(title){
    console.log(title);
  }

  useEffect(setTitle, [title]);
}


-- exercise 6 Context API "React.useContext(Context)"

// MyContext.js

import React from "react";

const AuthContext = React.createContext("");

export default AuthContext;

// app.js

import React from 'react';
import AuthContext from './MyContext';
import MyComponent from './MyComponent';

export default function App(){

  const user = { userName: 'ajunqui', firstName: 'Alejandro', lastName: 'Junqui'};

  return (
    <AuthContext.Provider value={user}>
      <MyComponent />
    </AuthContext.Provider>
  );

}

// MyComponent.js
import React from 'react';
import AuthContext from './MyContext';

export default function MyComponent(){
  const authContext = React.useContext(AuthContext);

  return (
    <div>
      <h1>Welcome {authContext.userName}</h1>
      <p>Firstname: {authContext.firstName}</p>
      <p>Lastname: {authContext.lastName}</p>
    </div>
  );

}

-- exercise 7: Handling lists with React

// app.js

import React from "react";

export default function App(){
  const data = [1,2,3,4,5,6];

  return (
    <div>
      <ul>
        {
          data.map(
            (item, index) =>
            <li key={index}> 
              ListItem: {item}  
            </li>
          )
        }
      </ul>
    </div>
  )
}

-- exercise 7: working with object list 

// app.js

import React from "react";

export default function App() {
  const data = [
    { brand: "Ford", model: "Mustang" },
    { brand: "VW", model: "Beetle" },
    { brand: "Tesla", model: "Model S" }
  ];

  return (
    <div>
      <table>
        <thead>
          <td>Brand</td>
          <td>Model</td>
        </thead>
        <tbody>
          {
            data.map((item, index) => 
            <tr key={index}>
              <td>{item.brand}</td>
              <td>{item.model}</td>
            </tr>
            )
          }
        </tbody>
      </table>
    </div>
  );
}

-- exercise 8: Handling events with React

import React from "react";

export default function App(){
  function buttonPressed(){
    alert("Button Pressed!");
  }

  return (
    <>
    <button onClick={buttonPressed}> Press Me! </button>
    </>
  )
}

-- version 2

import React from "react";

export default function App() {
  function buttonPressed() {
    alert("Button Pressed!");
  }

  return (
    <>
    <MyButton number={1} eventPressButton={buttonPressed} />
    <MyButton number={2} eventPressButton={buttonPressed} />
    </>  
  )
}

function MyButton({number, eventPressButton}) {
  return <button onClick={eventPressButton}> I'm {number} Press Me! </button>;
}

-- exercise 9

import React from "react";

export default function MyForm(){
  const handleSubmit = (event) => {
    event.preventDefault();
    alert("Form Submit");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="submit" value="Submit" />
    </form>
  );
}

-- exercise 10: Handling forms with React

import React, { useState } from 'react';

function MyForm() {
  const [firstName, setFirstName] = useState('');
 

  const handleSubmit = (event) => {
    alert("Hello " + firstName);
    event.preventDefault();
  }

  const inputChanged = (event) =>{
    setFirstName(event.target.value);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>First name </label>
      <input
        onChange={inputChanged}
        value={firstName}/><br/>
      
      <input type="submit" value="Press me"/>
    </form>
  );
}

export default MyForm;