Se le escapó al profesor que para usar:
create-react-app nombre_proyecto
No solo debe tener instalado NodeJS, sino también el paquete create-react-app. Este se instala con el comando:
npm install -g create-react-app
Bienvenido al curso
Conoce a tu profesor y todo lo que aprenderás sobre Redux
¿Qué conocimientos me recomiendan para tomar este curso?
Repaso React
¿Qué es React y cómo funciona?
Preparando nuestro entorno de trabajo
Creación de la app con React
Agregando funciones a la app con React
Stateful vs Stateless
Ciclo de vida de React
Manejando promesas
React Router DOM
Introducción a Redux
¿Qúe es Redux, cuándo usarlo y por qué?
Fases de Redux
Introducción: las fases de Redux
Store
Reducers
Conexión a un componente
Action Creators
Redux Thunk
Explicación teórica: ciclo completo de Redux
Práctica: ciclo completo de Redux
Fases Extra
Archivos Types
Try Catch
Escenarios asíncronos
Componente Spinner
Componente Fatal
Tabla como componente
Compartir información en Redux
Introducción Compartir información en Redux
Parámetros por URL
Compartir Reducer
Múltiples Reducers
Llamando a múltiples reducers en una acción
Uso del estado en la acción
Evitar segundas búsquedas
Inmutabilidad
Evitar sobrescritura
Validación compuesta
Validación de errores
Modificando respuesta de url
Estado con interacción
Mostrar componentes dinámicamente
Llamadas asincronas dinámicas
Props por herencia vs estado
Estado compartido
Métodos HTTP
Introducción a métodos HTTP
Nuevo ciclo Redux
Normalizar datos
Mapear Objetos
Componente para agregar tarea
Manejar inputs con Reducer
POST
Deshabilitando botón
Redireccionar
Reutilizar componentes
PUT
DELETE
Últimos detalles
Conclusión
Conocimientos adquiridos
Qué hacer a continuación
Aportes 57
Preguntas 12
Se le escapó al profesor que para usar:
create-react-app nombre_proyecto
No solo debe tener instalado NodeJS, sino también el paquete create-react-app. Este se instala con el comando:
npm install -g create-react-app
Para que les sea mucho más fácil escribir código en JSX en VSCode y se auto-complete, pueden ir a archivos, preferencias, configuraciones, ahí buscan settings.json abren ese archivo y colocan lo que esta en la siguiente imágen, yo lo realice en área de trabajo, lo pueden hacer en ususario también
El clásico “Yo no lo descargo porque ya lo tengo” 😁
Para los amigos que están utilizando Visual Studio Code y desean autocompletar código JSX vayan a File - Preferences - Settings y busquen el archivo settings.json y agreguen lo siguiente:
JSX
Si quieren hacerlo todo desde la linea de comando seria
nos movemos a la carpeta de blog-platzi ya que halla terminando create-react-app
con cd blog-platzi
Después eliminar los archivos
rm App.css App.test.js logo.svg serviceWorker.js
Creamos la carpeta de components
mkdir components
Movemos App.js a components
mv App.js components
Te regresar a la raíz con cd ..
x2
y corres tu editor favorito, en mi caso el comando es code
para VScode
Happy Hacking!
Recomiendo instalar Node.js con NVM. Esta pequeña utilidad nos permite mantener múltiples versiones de Node https://github.com/nvm-sh/nvm
¿CUÁNTO TIEMPO TENÍAS SIN HACER UNA TABLA EN HTML?
Primer (o tal vez segundo) profesor que veo que usa Windows xD
Recomiendo usar VS con Prettier para que se ordenen las líneas de código más fácilmente. Gracias por el curso 😄
Algunos aspectos sobre la clase de hoy de React:
👋
Si previamente habias instalado create-react-app de forma global, se recomienda desinstalar esta versión. De no hacerlo, create-react-app no creara toda la estructura del proyecto.
Después de esto puedes hacer la creación de tu proyecto con el siguiente comando:
npx create-react-app app_name
Esto garantiza que siempre estemos usando la ultima versión de CRA.
Saludos.
les dejo el repo de mi proyecto, lo estoy desarrollando cambiando las clases por componentes funcionales y hooks
https://github.com/guzmandiegoandres12/react_redux_course_platzi
A los que les aparezca que la version de create-react-app ya no es soportada pueden crearlo asi:
npx [email protected] my-app
o ya sea que esten dentro de la carpeta que quieren crear el proyecto pues solo colocan:
npx [email protected] ./
Nice!
¿POR QUE USAR SOLO NPX Y NO NPM ?
Cuando instalas con NPX tienes:
La ultima versión de react en este caso, y lo haces únicamente en el contexto de tu proyecto y no en todo tu equipo.
Cuando instalas con npm tienes:
Debes usar la bandera -g para instalar globalmente(en todo tu equipo) y tu equipo se convierte en una especie de nodo donde sacaras tu entorno react para cada proyecto, por lo que no siempre descargaras la ultima versión, si no la que tienes en tu equipo.
Entonces ¿Cuál es el factor decisivo para elegir NPX?
-Resulta mas eficiente dar mantenimiento únicamente al proyecto en cuestión que al nodo(equipo) en si, para luego actualizar cada proyecto.
-Es mas sencillo tener las ultimas versiones con NPX.
-Es menos invasivo manejar a nivel de la carpeta de tu proyecto.
Como todo, para gustos los colores
Tuve un problema en el momento de iniciar el el proyecto en el servidor local cuando tenemos que digitar
npm run start
ya que no me abria en el puerto 3000 y me aparecía este mensaje
Something is already running on port 3000.
Lo logré solucionar matando el puerto, ya que estaba en uso. entré a consola y puse esto
npx kill-port 3000
Espero que les sirva 😁
genial, usa windows…
Tablas en html? hola 2019, creo que no es buena idea, wtf?
Cuando interiorizas las lecciones de otros cursos y haces cosas por habito.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
Si no te corre el npm run start
cuando has solucionado todas las turas te recomiendo agregar un archivo en la ruta del proyecto llamado.env
y pones esto dentro
SKIP_PREFLIGHT_CHECK=true
VS Code es mucho mejor. Hay un plugin que se llama Prettier https://github.com/prettier/prettier-vscode
Hola Devs:
-Para los que deseen aventurarse como yo con un proyecto 100% configurado desde 0, pueden acceder a este con la config desde cero aqui: Click Aqui
chicos alguna extension para trabajar con jsx
Excelente introducción, explica muy bien.
Excelente clase, me encanto el repaso de HTML, CSS, React y JS.
para moverse entre carpetas en la terminal se usa el comando
$ cd Directorio
Excelente resultado el codigo del App.js:
import React from 'react';
const App = () => {
return (
<div className="margen">
<table className="tabla">
<thead>
<tr>
<th>Nombre</th>
<th>Correo</th>
<th>Enlace</th>
</tr>
</thead>
<tbody>
<tr>
<td>Paul</td>
<td>[email protected]</td>
<td>paul.com</td>
</tr>
</tbody>
</table>
</div>
);
export default App;
Para los que quieran usar Typescript pueden correr el siguiente comando
NPM
npx create-react-app platzi_blog --template typescript
YARN
yarn create react-app platzi_blog --template typescript
Para los que tengan algún proglema, recuerden que tienen que instalar bootstrap con el siguiente comando:
npm install bootstrap
Excelente!
no hace falta poner el run en el comando start. Sirve nomas con el npm start.
Mejor usar grid, no?
Usen ES7 React/Redux/GraphQL/React-Native snippets una extension de VSC que les ayuda a autocompletar la sintaxis de JSX.
Para los que le sale el siguiente mensaje cuando van crear la app de react:
You are running `create-react-app` 4.0.1, which is behind the latest release (4.0.3).
We no longer support global installation of Create React App.
Deben primero desinstalar la versión de create-react-app que tengan, con el siguiente comando:
npm uninstall -g create-react-app
Luego vuelven a instalarlo, por NO DE FORMA GLOBAL:
npm install create-react-app
Si lo instalan con el parámetro -g (global), seguirá mostrando el mismo error. Ya con esto pueden volver a ejecutar :
npx create-react-app blog_platzi
Genial Gracias…
si alguien le pasa este error:
You are running create-react-app 4.0.1, which is behind the latest release (4.0.2).
We no longer support global installation of Create React App.
recomiendo que ejecuten este comando que a mi me lo resolvió:
npm uninstall -g create-react-app && npm i -g npm@latest && sudo npm cache clean -f
Excelente
Excelente clase, me agrado mucho ver los conceptos relacionados de todos los cursos vistos. 🙂
a mi me salieron node_modules, package.json y package-lock.json que puede haber ocurrido?
Gracias por la explicacion de la instalacion de node e iniciacion de una aplicacion a demas de las clases pasadas en explicar lo que es react.js
Excelente primer comando
npx create-react-app blog_platzi
Los archivos que deben de quedar dentro de src son:
App.js
index.css
index.js
se debe de crear una carpeta llamada components: y pasar a esta carpeta el archivo App.js
con en shortcut rafc pueden crear el componente
Vengo de trabajar en una app de otro curso, entonces la terminal me indica que ya hay algo corriendo en el puerto 3000. Como puedo hacer como para cerra o resetarlo?
Me gusta como explica
Hoy 20/06/2020, presenté un problema con la creación de una nueva app de React, y parece ser un tema de la version del autoprefixer.
npm install autoprefixer@9.8.0
Prueba con este comando, y deberá funcionar todo correctamente.
Excelente
Redux = triforce! :3 Este curso deberian ponerlo en la escuela de js para no llegar pelados a ciertos temas jajajaja
Tengo un problema, cuando intento ejecutar npm run start y me aparece este error:
./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: Package exports for 'C:\Users\dell\Desktop\JavaScrip\redux\blog\node_modules\colorette' do not define a valid '.' target
no lo he podido arreglar, solo he visto que si quito las importaciones de css si se ejecuta
Se que el profesor para fines demostrativos está utilizando nombre de clases en español, pero normalmente en proyectos es casi obligatorio escribir todo en inglés (Funciones, componentes, clases, etc.).
iniciando
Lo que hace creat-react-app es configurar tanto babel, webpack y varias dependencias adicionales para crear el entorno de desarrollo local, pero aquí también instala muchas otras dependencias que tal vez no serán necesarias añadiendo peso adicional a nuestro proyecto.
Para los interesados les dejo una configuración de Webpack con lo necesario para arrancar un proyecto de React totalmente funcional:
React-Webpack
En 2021, nunca había hecho una tabla de esa manera. Es bueno saberlo.
Por defecto create-react-app descarga el proyecto configurado con yarn. Si quieren seguir usando npm agregan --use-npm
al final.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.