Creacion de un proyecto en React


*

">

Primeros pasos en React


Estructura base de React

En la carpeta donde deseamos crear el proyecto, podemos ejecutar en la consola el siguiente comando:
npx create-react-app mi-app
luego entramos a la carpeta con
cd mi-app
y podemos iniciar nuetra app con
npm start 

> 📁 node_modules
> 📁 public
> 📁 src
    🥊 .gitignore
    🥦 packages.json
    💎 README.md
    🎾 yarn.lock
">

Componentes en React

Componentes vs Estado

🧝‍♀ COMPONENTES: La tarea de un componente es hacer lo macro en pequeñas piezas mas faciles de mantener a su vez cada pieza o componente deberia realizar una tarea distinta
🧙‍♂ ESTADO: Es como se encuentra la informacion de los componente a traves del tiempo Recordar que cuando un componente es renderizado tiene un estado inicial 

import React from 'react'

const Hola = () = > {
    return (
        < div >

            // Codigo a ejecutar

        < /div >
    )
}

export default

Es buena practica nombrar cada componente con la convención de UpperCamelCase
Gracias a las extenciones instaladas podemos escribir RAFCE en vscode y obtener asi rapidamente esta extructura

">

Div vs Fragment vs < >

Que deberiamos usar Div, fragment o < >?

🍕 DIV: si necesitamos asignar clases podemos usar los div y de esta manera poder identificarlos a traves de sus className

🍔 FRAGMENT: Si no queremos cargar divs ineccesarios es bastante util, pero lo malo es que de igual manera debemos importar a Fragment

🌭 < >: No es un chiste, podemos remplazar DIVS o FRAGMENTS usando estos signos, lo unico malo es que no podemos asignar clases 

// DIV
import React from "react";
export const HolaMundo = () => {
  return (
    <div>
      <h1>Hola Mundo</h1>
    </div>
  );
};
export default HolaMundo; 

// FRAGMENT
import React, { Fragmnent } from "react";
export const HolaMundo = () => {
  return (
    < Fragmnent >
      <h1>Hola Mundo</h1>
    < /Fragmnent >
  );
};
export default HolaMundo;

// < >
import React from "react";

export const HolaMundo = () => {
  return (
    <>
      <h1>Hola Mundo </h1>
    </>
  );
};
export default HolaMundo;
">

Impresion de elementos en el DOM con React

Diferencia en el DOM con React y JavaScript

🎮 A diferencia de usar JavaScript vanilla imprimir elementos usando React es relativamente mas sencillo, con menos lineas podremos conseguir ese objetivo

👾 Para poder enviar informacion al usaremos las llaves {hola} con este metodo podremos imprimir distintos tipos de elementos desde strings, numeros (tambien numeros decimales), e incluso arrays pero nada de booleanos u objetos

🎲 Pero existe un TRUCO para imprimir objetos dentro de nuestro DOM usando React 

import React from 'react';
const HolaMundo = () => {
  const hola = 'Hola mundo bienvenido a React';
  return (
    <div>
      <h1> {hola} </h1>
      <p>Soy un parrafo</p>
    </div>
  );
};
export default HolaMundo;

// TRUCO Impresion de objetos
import React from "react";
const HolaMundo = () => {
  const hola = {
    nombre: "Rocky",
    raza: "Pastor Aleman",
    edad: "3",
  };
  return (
    <div>
      <pre> {JSON.stringify(hola, null, 2)} </pre>
      <p>Soy un parrafo</p>
    </div>
  );
};
export default HolaMundo;