Creación de la app con React

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:

• Los componentes de React empiezan por una letra mayúscula.
• Las etiquetas html siempre van en minúscula.
• El componente app, escrito por el profesor, usa un arrow function pero también se puede usar las sentencias de función y funciones anónimas.
• El componente app, escrito por el profesor, se declara como constante pero también se puede declarar como variable (no recomendado).

Autocompletado => https://stackoverflow.com/questions/39320393/jsx-or-html-autocompletion-in-visual-studio-code

👋
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

https://platzi.com/clases/terminal/

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

Para que quede bonito, pueden usar Skeleton

Lo pueden agregar desde CDN Aquí

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.