Archivos de la categoría: React

import { useState } from 'react';

function Form2() {
  const [name, setName] = useState("");
  const [area, setArea] = useState("");
  //const [inputs, setInputs] = useState({});
  const [inputs, setInputs] = useState({
    firstname: 'John',
    tomato: true,
    onion: false
  });
  const [selectedFruit, setSelectedFruit] = useState('banana');

  const handleChangeOpciones = (e) => {
    const target = e.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    setInputs(values => ({...values, [name]: value}))
  }

  const handleSubmitOpciones = (event) => {
    let fillings = '';
    if (inputs.tomato) fillings += 'tomato';
    if (inputs.onion) {
      if (inputs.tomato) fillings += ' and ';
      fillings += 'onion';
    }
    if (fillings == '') fillings = 'no fillings';
    alert(`${inputs.firstname} wants a burger with ${fillings}`);    
    alert(`Your favorite fruit is: ${selectedFruit}`);
    

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

  const handleChangeRadio = (e) =>{
    setSelectedFruit(e.target.value);
  }

  function handleChange(e) {
    setName(e.target.value);
  }

  function handleChangeArea(e){
    setArea(e.target.value);
  }


  function handleSubmit(e) {
    e.preventDefault();
    alert(name);
  }

  return (
    <form onSubmit={handleSubmitOpciones}>
      <label>Enter your name:
        <input autoFocus
          type="text" 
          value={name}
          onChange={handleChange}
        />
        <br/>
      </label>
      <hr/>
      <label>Write here:
        <br/>
        <textarea
          value={area}
          onChange={handleChangeArea}
        />
      </label>
      <p>Current value: {area}</p>
      <hr/>
      <label>My name is:
      <input 
        type="text" 
        name="firstname" 
        value={inputs.firstname} 
        onChange={handleChangeOpciones}
      />
      </label>

      <p>I want a burger with:</p>
      <label>Tomato:
      <input 
        type="checkbox" 
        name="tomato" 
        checked={inputs.tomato} 
        onChange={handleChangeOpciones}
      />
      </label>
      <label>Onion:
        <input 
          type="checkbox" 
          name="onion" 
          checked={inputs.onion} 
          onChange={handleChangeOpciones}
        />
        </label>
      <p>Current values: {inputs.firstname} </p>

      <p>Select your favorite fruit:</p>
      <label>
        <input 
          type="radio" 
          name="fruit" 
          value="apple" 
          checked={selectedFruit === 'apple'} 
          onChange={handleChangeRadio} 
        /> Apple
      </label>
      <br />
      <label>
        <input 
          type="radio" 
          name="fruit" 
          value="banana" 
          checked={selectedFruit === 'banana'} 
          onChange={handleChangeRadio} 
        /> Banana
      </label>
      <br />
      <label>
        <input 
          type="radio" 
          name="fruit" 
          value="cherry" 
          checked={selectedFruit === 'cherry'} 
          onChange={handleChangeRadio} 
        /> Cherry
      </label>
      <br />

      <input type="submit" />
    </form>
  )
}

export default Form2;

Below is a simple example of using a React form:

App.jsx:

import { useState } from 'react'
import FormSubmitChange from "./components/FormSubmitChange"

function App() {

  return (
    <>
    <h1>App</h1>
    <FormSubmitChange/>
    </>
  )
}

export default App

FormSubmitChange.jsx:

import { useState } from 'react';

const FormSubmitChange = ()=> {
  const [age, setAge] = useState("");

  function handleChange(e) {
    setAge(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    alert(age);
  }

  return (

    <>
    <h1>Form</h1>
    <form onSubmit={handleSubmit}>
        <label>
          Enter your age:
          <input
            type="number"
            value={age}
            onChange={handleChange}
            style={{ marginLeft: "10px" }}
          />
        </label>

        <button type="submit" style={{ marginLeft: "10px" }}>
          Send
        </button>
 
      </form>
    </>
  )
}

export default FormSubmitChange

In React, you must define the key inside at least the «li» elements. This is done to make the Virtual DOM more efficient.

App.jsx

import { useState } from 'react'
import FruitList from './components/FruitList'

function App() {


  return (
    <>
      <FruitList/>
    </>
  )
}

export default App

FruitList.jx

const FruitList=() => {

const fruits = ["apple", "banana", "cherry"];

  return (

    <>
    <h1>Fruit List</h1>
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li> 
        /* Unique key for each element */
      ))}
    </ul>
     </>
  );
 
}

export default FruitList;

Each key must be unique

App.jsx:

import Component from "./components/Component"

const App=()=>{
    return (
    <>
        <Component/>
    </>
  );

}
export default App;

Component.jsx:

import TurnOff from "./TurnOff";
import TurnOn from "./TurnOn";

const Component = ()=>{

let on = false;

const click = (on_state)=>{
    if (!on_state){
        <TurnOff/>
    }
    else{
        <TurnOn/>
    }
    on_state = !on_state;
}
    return(
        <>
            <button onClick={(on)=>{click(on)}}>Push me</button>            
        </>
    );
}

export default Component;

TurnOff.jsx

const TurnOff = ()=>{
    return(
        <>
            <p style="background-color:red;color:white;">It's turn off!</p>      
        </>
    );
}
export default TurnOff;

TurnOn.jsx:

const TurnOn = ()=>{
    return(
        <>
            <p style="background-color:green;color:white;">It's turn on!</p>      
        </>
    );
}
export default TurnOn;

main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'


createRoot(document.getElementById('root')).render(
 <StrictMode>
   <>
   <h1>src_main.jsx</h1>
   <App />
   </>
 </StrictMode>,
)

App.jsx:

import Component from "./components/Component"


const App=()=>{
   return (
   <>
       <h1>src_App.jsx</h1>
       <Component/>
   </>
   );
}
export default App;

Component.jsx

const Component = ()=>{


const click = ()=>{
   alert("Button!");
}
   return(
       <>
           <button onClick={click}>Push me</button>           
       </>
   );
}


export default Component;

Events, sending values

Component.jsx

const Component = ()=>{


const click = (my_message)=>{
   alert(my_message);
}
   return(
       <>
           <button onClick={()=>{click("My message")}}>Push me</button>           
       </>
   );
}


export default Component;

Access to the event object

Component.jsx:

const Component = ()=>{


const click = (ev)=>{
   alert(ev.type);
}
   return(
       <>
           <button onClick={(event)=>{click(event)}}>Push me</button>           
       </>
   );
}


export default Component;

How can I send parameters to React components?: Props

A name will be passed to the HelloWorld component:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './components/HelloWorld'

function App() {
 

  return (
    <>
      <h1>App component</h1>
      <HelloWorld name="Smith"/>

    </>
  )
}

export default App

In order for the HelloWorld application to receive the passed value, the following changes will need to be made:

function HelloWorld(props){

    return(<>
        <h2>Hello {props.name}</h2>
    </>)

}

export default HelloWorld;

Your browser window will look like this:

You are going to pass an object as parameter.

First define the constant that will contain the values. Finally, this constant is passed through a parameter called info.

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './components/HelloWorld'

const car ={
  color: "blue",
  wheels:4,
  engine: "diesel"

}

function App() {
  return (
    <>
      <h1>App component</h1>
      <HelloWorld info={car}/>

    </>
  )
}

export default App

The receiver of the object will access its values as follows:

function HelloWorld(props){

    return(<>
        <h2> Your car:
            <ul>
                <li key="0">Color: {props.info.color}</li>
                <li key="1">Wheels:{props.info.wheels}</li>
                <li key="2">Engine: {props.info.engine}</li>
            </ul>
        </h2>
    </>)

}

export default HelloWorld;

The result will be as follows:

Destructuring Props

Sometimes we are only interested in a few properties from all the ones sent to us.

App.jsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './components/HelloWorld'

const car ={
  color: "blue",
  wheels:4,
  engine: "diesel"
};

function App() {
  return (
    <>
      <h1>App component</h1>
      <HelloWorld color={car.color} wheels={car.wheels} engine={car.engine}/>

    </>
  )
}

export default App;

HelloWorld.jsx

function HelloWorld({color, engine}){

    
    return(<>
        <h2>Your car has {color} color and {engine} engine</h2>
        
    </>);

}

export default HelloWorld;

Props.children

Another project is created

App.jsx

import './App.css'
import Parents from './components/Parents'


function App() {
 return (
   <>
     <h1>App</h1>
     <Parents/>
    </>
 )
}


export default App

Parents.jsx

import Daughter from "./Daughter";
import Son from "./Son"


const Parents = ()=>{
   return(
       <>
           <Son>
               <h1> I am your son</h1>
           </Son>


           <Daughter>
               <h1> I am your daughter</h1>
           </Daughter>
       </>
   );
}


export default Parents;

Son.jsx

const Son  = (props)=>{
   return(
       <>
         {props.children}
       </>
   );
}


export default Son;

Daughter.jsx

const Daughter = (props)=>{
   return(
       <>
         {props.children}
       </>
   );
}


export default Daughter;

A new project will be created:

npm create vite@latest

It will then ask you for a proyect name . If you want, name it react03.

Inside the src folder, create the components folder. Then, create the HelloWorld.jsx file with the following contents:

function HelloWorld(){

    return(<>
        <h2>HelloWorld</h2>
    </>)

}

export default HelloWorld;

The component that was just created will be used in the App.jsx file:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import HelloWorld from './components/HelloWorld'

function App() {
 

  return (
    <>
      <h1>App component</h1>
      <HelloWorld/>

    </>
  )
}

export default App

In your browser you will see the following screen:

The following structure remains in your project:

You can now delete the following files:

App.css and index.css

Some lines are deleted from the main.jsx file:

Some lines are deleted from the App.jsx:

The index.html file would be reduced to the following:

We already have our basic structure to start a project

Check if you have Node.js and npm installed:

node -v
npm -v

If you don’t have them installed yet, run the following commands:

sudo apt update
sudo apt install nodejs npm -y

Run the following command to create a new project (answer the questions that the wizard will ask you):

npm create vite@latest react01

After selecting React and JavaScript, the following text will appear:

If you hold down the CTRL key and click on the link, an image similar to the one in the screenshot below will appear in your browser:

Inside the react01 folder, type the command «code .» (You will need to have Visual Studio Code installed)