¿Cómo crear un nuevo proyecto con Create React App?
Iniciar un proyecto en React es una tarea fundamental para cualquier desarrollador que desea trabajar con esta poderosa biblioteca de JavaScript. Para comenzar, debes asegurarte de estar en la carpeta deseada donde vas a crear tu proyecto. Usaremos el comando NPX para facilitar este proceso. Específicamente, el comando npx create-react-app nombre-proyecto instalará todas las herramientas necesarias para tu proyecto React.
Pasos básicos para iniciar el proyecto
Navegar a la carpeta donde deseas crear el proyecto.
Ejecutar el comando: npx create-react-app curso-manejo-estado-1.
Una vez completada la instalación, ingresar a la carpeta del proyecto con cd curso-manejo-estado-1.
Iniciar el proyecto utilizando npm start, lo cual abrirá una ventana en tu navegador predeterminado en localhost:3000.
¿En qué consiste el proyecto de códigos de seguridad?
Este proyecto tiene como objetivo desarrollar un sistema que permite a los usuarios escribir un código de seguridad para confirmar acciones, como la eliminación de un elemento. Este enfoque emula medidas de seguridad básicas encontradas en plataformas como GitHub y Amazon Web Services.
Flujo del proyecto
Ingreso del código incorrecto: Muestra un mensaje de error.
Ingreso del código correcto: Confirma la acción y pregunta si se desea proceder o cancelar.
Este sistema fomenta una comprensión más completa de cómo funcionan las clases y componentes de funciones en React, y cómo utilizar React Hooks para gestionar estados.
¿Cómo estructurar y modificar el proyecto en Visual Studio Code?
Una vez que el proyecto está funcionando, es crucial importarlo a un editor de código como Visual Studio Code. Aquí, ejecutarás comandos para abrir y manejar tu proyecto, haciendo modificaciones necesarias para personalizarlo.
Comandos y estructura inicial
Pausar el servidor: Para abrir el proyecto en Visual Studio Code, utiliza code -r . después de detener el servidor.
Configurar el editor: Confía en los autores del proyecto y abre los archivos necesarios.
Modificar archivos: Personaliza archivos como index.js y elimina cualquier contenido innecesario al inicio, como React.StrictMode.
¿Cómo crear y estructurar componentes en React?
Crear componentes en React es esencial para un desarrollo modular y eficiente. Iniciaremos con dos tipos básicos de componentes: con funciones y con clases.
Creación de componentes
Componente de función (UseState):
importReactfrom'react';exportfunctionUseState(){return(<div><h2>EliminarUseState</h2><p>Por favor, escribe el código de seguridad</p><input placeholder="Código de seguridad"/><button>Comprobar</button></div>);}
Componente de clase (ClassState):
importReact,{Component}from'react';classClassStateextendsComponent{render(){return(<div><h2>EliminarClassState</h2><p>Por favor, escribe el código de seguridad</p><input placeholder="Código de seguridad"/><button>Comprobar</button></div>);}}export{ClassState};
Implementación en App.js
Importe y utilice los componentes creados dentro de App.js.
Asegúrese de que la estructura permita una fácil gestión y adicionamiento de lógica posteriormente.
¿Ver resultados en el navegador?
Después de configurar tus componentes y archivos, ejecuta nuevamente el proyecto con npm start. Visualiza en tu navegador en localhost:3000 los componentes funcionales con su respectiva lógica de entrada y botones.
Continuar explorando la forma en que React maneja estados y eventos te permitirá avanzar hacia un diseño más interactivo y dinámico. ¡Sigue adelante y no te detengas! Cada clase es un escalón más hacia la maestría en React.
Es una herramienta para destacar problemas potenciales en la aplicación. Al igual que Fragment, StrictMode no renderiza nada en la interfaz de usuario. Este modo también activa advertencias y comprobaciones adicionales para sus descendientes.
StrictMode en la actualidad ayuda a:
Identificar ciclos de vida inseguros
Advertencia sobre el uso de la API legado de string ref
Advertencia sobre el uso del método obsoleto findDOMNode
Detectar efectos secundarios inesperados
Detectar el uso de la API legado para el contexto
Documentación oficial
Suponía que era algo parecido al strict mode de JS
gracias
Agregen la siguiente configuración a su visual studio code, para que emmet les autocomplete HTML dentro de la sintaxis JSX
Luego crea el archivo UseState.js y escribe el siguiente código:
importReactfrom'react'exportdefaultfunctionUseState(){return(<div><h3>EliminarUseState</h3><p>Por favor, escriba el código de seguridad.</p><input type='text' placeholder='código de seguridad'/><button>Comprobar</button></div>)}
Por último crea el archivo ClassState y escribe el siguiente código:
importReact,{Component}from'react'exportdefaultclassClassStateextendsComponent{render(){return(<div><h3>EliminarClassState</h3><p>Por favor, escriba el código de seguridad.</p><input type='text' placeholder='código de seguridad'/><button>Comprobar</button></div>)}}
Corre la aplicación con ++npm start++ o ++yarn start++
Te recomiendo que no exportes por default. Aquí te dejo el cometario que el profe escribió diciendo el porque no es recomendable:
"Para asegurarme de que en todas partes estemos casi obligados a usar los mismos nombres. Los imports por defecto nos permiten darle cualquier nombre a lo que estemos importante. Los imports nombrados requieren que escribamos exactamente el nombre de la propiedad que queremos importar, la única forma de cambiarles el nombre es con un as (import { whatever as otracosa })."
De hecho cuando miras la doc de react, lo hacen todo con default mira esta ref
Ahora con la versión 18 de React ya no usamos ReactDOM.render sino **createRoot **
Para realizar acción de eliminar un elemento nos pedirá un código de seguridad.
Si ingresamos uno incorrecto no realiza
Si ingresamos un código correcto pasamos al estado de confirmación.
Si le damos no, volvemos al estado anterior.
Si le damos si, se realiza la acción.
Conforme avancemos el proyecto:
Entenderemos mejor como funcionaban las clases con React.component
Conoceremos diferencias con los componentes en funciones utilizando React Hooks
Conoceremos que paradigmas no daban los estados de las clases comparado con los estados de las funciones.
Aprovecharemos características que se usaban en las clases pero no en las funciones las cuales son herramientas poderosas.
Estos son los estados complejos o compuestos y los estados declarativos. (useReducer)
AppContext Y UseReducer
Si alguna vez has trabajado con Redux notaras que el uso de appcontext y useReducer es parecido pero por que no usar AppContext o useReducer en lugar de redux. Pues porque estos hooks actualizan por completo tu aplicación es decir vuelven a renderizar todos los componentes de tu aplicación y esto causa un problema de optimización.
En cambio redux solo actualiza la parte de la aplicación que cambio
No necesariamente tiene que ser así. Podemos estudiarlo mucho más a fondo en un Curso de Optimización de Render y Debugging en React.js. ¿Te gustaría? :wink:
Juan David sería chévere tener un curso así, ¿ ya lo están grabando?
El strict mode se viene aplazando desde el primer curso de react, jaja
discriminacion #justiceForStrictMode
Me encanta la energía con la que este chico enseña, además de su versatilidad con la tecnología que está enseñando.
super recomendado hacerlo con vite, le facilita a uno la vida
$ npm create vite@latest
completamente recomendado, ya tengo proyectos grandes en vite cuando se sirven archivos estáticos... si es dinámicos con renderizado en el servidor sen pensarlo con Next Js
Por si no les funciona a la hora de modificar el ++index js++. Es porque apartir de la version 18, React ya no utiliza el render asi, sino que lo utiliza createRoot.
Desde React 16.8 ya no se recomienda el uso de componentes de clases, sino la creación de Hooks.
Esto no quiere decir que no esté de más comprender cómo funciona por si nos encontramos código legacy... pero para proyectos nuevos, no se deben usar.
Antes del 2019 se tenia que crear los estados por medio de clases ya que no existian los hooks, por ende el profe lo explica para que también entendamos código legacy que puede existir aún en empresas...
conclusion, si el proyecto es mas reciente, no debemos preocuparnos por ClassStates ? si o no ?
asi es, no debemos preocuparnos, debido a que los hooks es la aplicabilidad moderna de React. Sin embargo, nunca se sabe si te topas con una empresa que aún utilice las clases para usar React...
¿Por qué prefieres usar exportado por nombres y no usar el export default ?
Para asegurarme de que en todas partes estemos casi obligados a usar los mismos nombres. Los imports por defecto nos permiten darle cualquier nombre a lo que estemos importante. Los imports nombrados requieren que escribamos exactamente el nombre de la propiedad que queremos importar, la única forma de cambiarles el nombre es con un as (import { whatever as otracosa }).
importReactfrom"react";functionUseState(){return(<div><h3>Eliminar UseState</h3><p>Por favor, escribe el código de seguridad</p><inputplaceholder="Código de Seguridad"/><button>Comprobar</button></div>);}export{UseState};
ClassState.js
importReactfrom"react";classClassStateextendsReact.Component{render(){return(<div><h3>Eliminar ClassState</h3><p>Por favor, escribe el código de seguridad</p><inputplaceholder="Código de Seguridad"/><button>Comprobar</button></div>);}}export{ClassState};
Every time I start a React course with Create React App, the React team's recommendation comes to mind: never use it, as it is bad practice. Their recommendation is to use the Vitejs template.
Tengo un problema cuando ejecuto el comando npx create-react-app "Name-APP" me sale este error, por favor si alguien sabe como solucionarlo que me ayude, es primera vez que me pasa y ya he buscado en varios sitios y nada que he podido llegar a solucionarlo.
