Instalación con Create React App

4/23
Recursos

Instalar React.js es muy fácil, esa es otra de sus ventajas. Siguiendo la documentación oficial en pocos minutos estarás en posibilidad de desarrollar tu sitio con todas las funcionalidades que nos proporciona esta librería. Esta es una de las grandes ventajas de React.js, puedes empezar a usarlo de manera gradual, integrándolo poco a poco a tus proyectos o usando la totalidad de sus capacidades desde el principio.

Si quieres empezar a conocerlo, puedes utilizar los editores en línea de CodePenCodeSandbox  o Stackblitz.

La comunidad es tan grande, que en línea vas a encontrar una multitud de recursos, tutoriales y páginas destinadas a lograr que los usuarios obtengan un nivel avanzado de conocimiento en React.js con el menor dolor posible.

Para instalar por primera vez esta librería y comenzar a integrarla a tu proyecto, te recomendamos seguir las guías oficiales y actualizadas de la documentación. Ahí encontrarás las diferentes maneras que existen para este fin. El procedimiento de instalar React.js puede ser tan simple, como agregar unas pocas líneas de código. Si quieres tener un entorno de trabajo completo y complejo, React.js también te da esta posibilidad. Tú decides como quieres empezar.

Aportes 90

Preguntas 48

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Un comando que les puede ahorrar algo de tiempo si tienes Zsh

take curso-react

Es lo mismo que

mkdir curso-react && cd curso-react

Más info

Cuando creen el proyecto con npx create-react-app tengan en cuenta un par de cosas para que no les genere problemas.

  • El nombre del directorio no debe tener nombre con Capitalize. Es decir nombres como Curso_React genera problemas, en su lugar usen curso_react
  • Por otro lado tengan en cuenta si están instalando node y npm, que la versión de node sea superior a la 10.

Espero que sigamos aprendiendo mucho con este crack de JuanDC

Algo que quiero aportar es la estructura del ReactDOM.render(QUE, DONDE)

Quiere decir que como primer parámetro el render recibe el componente que queremos renderizar y el segundo parámetro es donde lo vamos a mostrar

El primer comando te crea una carpeta con el nombre que definas y toda la configuración de React que se muestra en la clase.

En el segundo comando usando punto al final te crea el proyecto dentro de la carpeta actual.

$ npx create-react-app mi-proyecto-react
$ npx create-react-app . 

NOTA

Con la ultima version estable de React “react”: “^17.0.2”, solo importamos react en un solo archivo y ya no es necesario importarlo en otro
import React from ‘react’;

Cuando dijo que no es común usar React con los tags de scripts

Si quieren iniciar un proyecto en React desde cero, aquí les dejo los comandos que usé:

  1. Abrí la terminal y me dirigí a la carpeta donde guardaré el proyecto con: cd <nombre-del-proyecto>
    -Si quieren crear una carpeta más, se puede usar: mkdir <nombre-de-carpeta>
  2. Una vez en la carpeta: npx create-react-app <nombre-de-carpeta>
  3. Al terminar de instalar las dependencias: cd <nombre-de-carpeta>
  4. Para abrirlo en VSC: **code . **
  5. Al abrir VSC, puedes abrir la terminal de a misma y escribir: npm start. Se abrirá un localhost:3000
    A partir de aquí nos quedaría eliminar logo.svg, reportWebVitals.js, setupTest.js, App.css y App.test.js de la carpeta SRC.
    En Index.js eliminamos la línea 5 y de la 14 a la 17
    En App.js la línea 1 , la linea 2 y de la linea 6 a la 21. Dentro del return podemos escribir un <div>Hola</div>, y listo, se debería poder ver ese Hola, y ya estaría listo para crear y jalar componentes 😄

3.-Instalación con Create React App

Se pueden importar los scripts del código fuente de react directamente en el html o creando un entorno de desarrollo completo con empaquetadores y otras herramientas.

Hay varias versiones que podemos usar como lo son la de desarrollo o la de producción que están más optimizadas.

Para hacer el ambiente de desarrollo usamos create react app, el cual podemos personalizar manualmente. En el dado caso de que queramos usar una configuración predeterminada usamos

npx create-react-app (npx instala temporalmente nuestras herramientas para ejecutarlas y luego borrarlas, eso permite tener siempre la última versión actualizada de la herramienta que queramos ejecutar). Además de esto, actualiza automáticamente los cambios hechos en el código

react-scripts es la configuración que hizo create-react-app por nosotros. Es un paquete que acelera el proceso de trabajo con react, pero no está tan optimizado a diferencia de hacerlo manualmente.

div id=“root” es donde se va a renderizar el código escrito en JS con react.

ReactDOM.render es donde enviaremos los componentes que queremos renderizar

Babel es el que hace la traducción que nos facilita la escritura de código de una manera más cómoda.

npm start para ejecutar el servidor de desarrollo.

Si ha alguien le da un fallo que pone “you are running create-react-app 4.0.3 which is behind the latest release”, prueba en terminal “npx clear-npx-cache”. Tras probar muchas cosas, esto fue lo que me funcionó.

Profe Juan David, yo sé que estas joven y bello, pero te recomiendo cuidar la postura, estas muy encorvado cuando escribes el código.

React Installation

Node stable version installation and npx installation

# Installation of ultimate stable version of node
sudo npm install -g n
sudo n stable
# Instalation npx 
sudo npm install npm -g
sudo npm install npx -g

Project Creation with npx create-react-app

npx: Command that allows us to temporarily install the latest version of the tool we need (in this case create-react-app), use it and remove it after its use.

sudo npx create-react-app <name-of-our-prject>
# RUN your pŕoject
cd <name-of-our-prject>
sudo npm start 

If we already have the folder of our project, we can use:

sudo npx create-react-app ./

(while we are inside the folder of our project)

Si correcto react se actualizo a su versión 18 (para mayores de edad) y con eso su documentación.

Aqui comparto cómo terminar de implementar el ejemplo de David


<body>
  <div id="root"></div>
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>


  <script>
    'use strict';

    const e = React.createElement;

    class LikeButton extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          liked: false
        };
      }

      render() {
        if (this.state.liked) {
          return 'You liked this.';
        }

        return e(
          'button', {
            onClick: () => this.setState({
              liked: true
            })
          },
          'Like'
        );
      }
    }

    const domContainer = document.getElementById('root');
    const root = ReactDOM.createRoot(domContainer);
    root.render(e(LikeButton));
  </script>

</body>

😮 Yo segui el consejo del profesor de Juan David, de aprender primero como funciona Javascript en su totalidad, el DOM, etc y estoy entendiendo todo 😃 es emocionante

Si quieres usar React en html, una forma fácil seria así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>React App</title>
    <script
      crossorigin
      src="https://unpkg.com/[email protected]/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/[email protected]/umd/react-dom.development.js"
    ></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      const w = "World!";
      ReactDOM.render(
        <div>
          <h1>Hello, {w}</h1>
          <h2>Basic App</h2>
          <p>{2 * 4 - 2}</p>
        </div>,
        document.getElementById("root")
      );
    </script>
  </body>
</html>

Hola! Si tienen problemas con react, y les aparece esto:
You are running create-react-app 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:

  • npm uninstall -g create-react-app
  • yarn global remove create-react-app

Y ejecutan el comando que react sugiere, y aun falla. No desesperen, hay una solucion.

Lo unico que deben hacer, es ejecutar este comando: npx clear-npx-cache
Y luego ejecutan el comando de create react app.

video: https://www.youtube.com/watch?v=KCjOZT48UaM

Pienso comenzar este curso con TypeScript también

Acá está la documentación de cra

Acá pueden ver el detalle de cra con template de TS
.
Así es comando para crear el template con TS:

npx create-react-app my-app --template typescript

Por si acaso… la diferencia entre npm y npx

NPM - Administra paquetes pero no hace la vida fácil ejecutando cualquiera.
NPX - Una herramienta para ejecutar paquetes de nodo.

Mas info

**JSK Sintaxis ** de JavaScript para escribir elementos y componentes de React que se siente como HTML.

No me sabia eso de create-react-app ./ MUY BUENO

Si quieren probar este curso con Vite (Acá más información de este mismo)

Acá les dejo el código para crear su proyecto con esta super herramienta:

# npm 7+,es necesario agregar los dos guiones

npm create [email protected] my-react-app -- --template react

#Cuando termine la instalación sigue estos pasos
cd my-react-app

npm install
npm run dev

cuando ejecutes el npm run dev quedarás asombrado con la velocidad que tiene esta herramienta 😄

Si tenéis problemas con npx create-react-app intro-react, porque os sale el siguiente mensaje:

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/

Podéis probar de ejecutar lo siguiente:

  1. npx clear-npx-cache
  2. De nuevo npx create-react-app intro-react

Se puede trabajar con React desde un HTML solo pegando unas estiquetas script que nos van a permitir tener varias herramientas de React en nuestra página web. (Esta opción nadie la utiliza pero existe).
.
Una mejor opción es teniendo un entorno de desarrollo y esto lo vamos a lograr con el comando npx create-react-app que nos va a ayudar a instalar temporalmente nuestras herramientas de react, esto nos permite tener siempre las herramientas actualizadas que vamos a ocupar.
.
Comando npx create-react-app nombreCarpeta
O en su defecto si se quiere crear el proyecto en la carpeta actual usamos el comando npx create-react-app ./

Recuerden que para inicializar un proyecto de react con configuraciones predeterminadas, esto dentro de la carpeta en la que estamos introducimos el siguiente código en la terminal:

npx create-react-app ./

Recuerden que el " ./ " hace referencia a la carpeta en la cual nos encontramos posicionados dentro de la terminal.

Recién intenté levantar un proyecto con create-react-app y me di cuenta que a la hora de hacer un cambio y guardarlo, no se refrescaba el navegador.

Desconozco la razón pero haciendo un poco de investigación encontré la solución:

  1. Crear un archivo .env en root del directorio (a nivel del package.json)
  2. Agregar la variable FAST_REFRESH=false
  3. Guardar y reiniciar el servidor de React. 😀

Al querer instalar, npx create-react-app

Me daba este error:
npm ERR! code ERR_SOCKET_TIMEOUT

lo pude resolver con:

Console
$ npm config rm proxy
$ npm config rm https-proxy

Si tienen este error en Ubuntu:

npm ERR! cb.apply is not a function

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-04-04T07_45_27_182Z-debug.log

En el log:

verbose stack     at /usr/local/lib/node_modules/npx/node_modules/npm/node_modules/graceful-fs/polyfills.js:287:18

Eliminar graceful-fs y ejecutar npx otra vez.

rm -fR /usr/local/lib/node_modules/npx/node_modules/npm/node_modules/graceful-fs

Fuente

Hola, por si a alguien le da el error:

"You are running create-react-app 4.0.3 which is behind the latest release (5.0.0)"

Y no les deja crear la app (es una especie de bucle infinito) solo hay que ejecutar el comando:

npx clear-npx-cache

Luego de eso ejecutar de nuevo el comando de create y listo, ya debería de correr la instalación.

Al inicio del codigo que copio Juan del ejemplo de React, podemos ver una linea que dice use strict

Sasha nos explica a detalle por qué es importante en su video

Y tambien tenemos la documentación de MDN

El profe ya habla en velocidad 1.5x

Chicos, si les va lento el npm les recomiendo que trabajen con yarn

Para crear mi proyecto con npm , le tomo 8 min y con yarn solo 2 min, y para inicializar npm start le tomo 3 min y a yarn solo 15 segundos

Dejo documentación si desean leer más

npx es capaz de ejecutar el paquete indicado sin tenerlo previamente instalado, busca los archivos binarios asociados al paquete y actualiza a la versión actualizada de la herramienta que queremos ejecutar

cuando ejecutan npm start y les dice que no reconoce: “react-scripts”, pueden ejecutar en la terminal esta línea: npm install react-scripts --save (a mi me funcionó)

hay otra forma de crear una aplicación de react diferente que se esta volviendo popular y trabaja mas rapido que create-react-app y se llama VITE
y solo tienes que escribir en tu terminal

npm init vite
  • Eliges el nombre del proyecto
  • Nombre del package
  • Seleccionas el framework que en este caso es React (tambien puedes elegir entre Js vanilla, vue, y svelte)
  • Por ultimo si quieres trabajar React usando typeScript o no

Hay una alternativa muy interesante y con mucho mayor performance que Create React App;
Vite: https://vitejs.dev/

Aparte de React, también permite crear proyectos de Svelte, Vue y Preact, que es un fork de React mucho mas liviano.

Si recién estan arrancando, recomiendo seguir el curso con CRA así no se pierden, pero si ya están un poco más avanzados recomiendo usar Vite!

Yo usare vite en verdad, es muy chuilto y rapido

Curso Excelente hasta el momento sin ningún incoveniente: Gracias Juan DC 🤞 ✨ 🤩

take curso-react # Crea carpeta de forma rápida
npx create-react-app ./ # npx instala temporalmente nuestras herramientas para ejecutarlas y  luego borrarlas, instala la ultima version y ./ Hace referencia a la carpeta donde esta el projecto.
npm start # Probar la ejecucion del servidor de desarrollo

Crear un entorno de desarrollo en React

El primer paso para iniciar a desarrollar una aplicación en React es crear la arquitectura de carpetas e instalar las dependencias necesarias: webpack, babel, etc. Existen dos formas de hacerlo, una muy rápida a través de él comando npx create-react-app y otra más personalizada.

  1. Crear un entorno con npx create-react-app

    Debemos actualizar a la última versión de NPM.

    Abrimos la terminal, creamos una carpeta mkdir curso_react && cd curso_react y en la carpeta de nuestro proyecto ejecutamos:

    npx create-react-app ./
    

    Una vez finalizada la instalación de las dependencias ejecutamos nuestro proyecto con el comando npm run start

Si os da error npx create-react-app poner esto npx clear-npx-cache y empezar otra vez a instalar

<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <script>
    'use strict';

    const e = React.createElement;

    class LikeButton extends React.Component {
      constructor(props) {
        super(props);
        this.state = { liked: false };
      }

      render() {
        if (this.state.liked) {
          return 'You liked this.';
        }

        return e(
          'button',
          { onClick: () => this.setState({ liked: true }) },
          'Like'
        );
      }
    }
    const root = document.getElementById("root");
    ReactDOM.render(e(LikeButton), root);

¿Te gustaría instalar varias versiones de nodeJs en tu sistema y gestionarlos al mismo tiempo?
Mira este articulo .


¿Escuchaste hablar de Vite?
Déjame decirte que es una alternativa a create-react-app. ¿Quieres iniciar tus proyectos con Vite?
Mira este articulo .


Despues de instalar REACT se recomienda Instalar las librerías siguientes que se van a necesitar:

Se cierra la terminal donde se instaló el npm run start y se abre una nueva para instalar las librerías

1- C:\Users\usuario\Desktop\2021netflix> npm add @material-ui/core
    @material-ui/core tiene millones de componentes que van a ser útiles (clicks, botones, icons, logos, emojis etc)
2- C:\Users\usuario\Desktop\2021netflix> npm add axios
    axios nos va a permitir hacer request de los APIs (peliculas, imagenes, etc)
3- C:\Users\usuario\Desktop\2021netflix> npm add firebase
    firebase...ayuda con las librerias para hacer logins de acceso, passwords, usuario, etc. tiene detras a google y es seguro https//
4- C:\Users\usuario\Desktop\2021netflix> npm add react-uuid
    Genera un codigo aleatorio que podemos usar como ID o password sugerido etc etc
5- C:\Users\usuario\Desktop\2021netflix> npm add styled-components
    Instala componentes customizados y reutilizables para nuestra aplicación

6- C:\Users\usuario\Desktop\2021netflix> npm add react-router-dom
Nos permite crear rutas, establecer dominios en nuestra URL y rutas entre ellas

Como depurar el código después de Instalar el REACT…
Proceso de limpieza:

En index.html se puede cambiar el nombre del proyecto
Se borran:

  • App.test.js
  • setupTests.js
  • logo.svg (sale un error, entonces hay que ir a App.js y quitar las importaciones):
  • Import React from ‘react’;
  • Import logo from ‘./logo.svg’;
  • Import {Counter} from ‘./features/counter/Counter’; (es el contador de usuarios de la web de REACT)
  • Import ‘./App.css’;
  • Quitar todo el <header></header>
  • App.css … se quita si no se va a usar
  • En index.css se coloca lo siguiente al principio:
    *{
    margin: 0;
    padding: 0;
    }
    Y listo, ya puedes comenzar a crear tu propio código en REACT

<div id="root"></div> CONVENCIÓN RENDERIZAR TODO NUESTRO CÓDIGO QUE ESCRIBAMOS CON JS CON REACT.

!hola si estás utilizando wls2 para que react renderice los elementos cada vez que guardas cambios en VS debes estar en la carpeta home(~$) en la terminal. ya que wsl2 esta optimizado para eso y si usas wsl1 no hay problema puedes estar en la carpeta ©. para ir a home solo es (cd) y enter

hice un video para asimilar como crear un proyecto, espero les sirva: https://youtu.be/B5kwSgga8As

Inicio explicación create-react-app


element
react

carpeta react creada

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;


aprendiendo


instalanto react esta muy interesante el curso

Les dejo la instalación con yarn. Por acá la documentación. Enlace

Buena explicacion del scaffolding de react app

En caso de que hayan instalado react en el curso gratis de programacion con javascript puede que tengan este problema

les dejo el comando que me ayudo a solucionarlo

npx [email protected] my-app

Me paso lo siguiente:

Error al ejecutar npm start:

opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ],
library: ‘digital envelope routines’,
reason: ‘unsupported’,
code: ‘ERR_OSSL_EVP_UNSUPPORTED’

Solucion:
En el archivo package.json en el bloke “scripts”:

Cambiar la linea

"start": "react-scripts start",

Por

"start": "react-scripts --openssl-legacy-provider start",

Explicacion:

Estaba usando la versión react 17.0.2 en un entorno de trabajo con node 17.5.0
El error no ocurre en un entorno de trabajo con la versión LTS de node 16.14.0

Pregunta de examen:
¿Qué es Create React App?

Estoy viendo este curso el 18/01/21 y cuando intenté correr el comando Create react app me decia que necesitaba el node 14 o mayor, asi que ojito para que no les genere problemas al instalar. Si necesitan como actualizar su node en windows chequense este link, me sirvió a mi
https://es.stackoverflow.com/questions/24268/cómo-actualizo-nodejs-en-windows/24303

Para crear nuestro primer proyecto en react ejecutar comando
npx create-react-app ./
Estando dentro de la carpeta en la que vamos a guardar nuestro proyecto

Aquí no hacemos eso… :v

Les recomiendo instalar la extension de visual studio code html to JSX.
.
Ayuda mucho a la hora de trabajar con react. Solo deben seleccionar el código html, click derecho, convert html to jsx y listo. Ya tienen código que React puede entender 😃

Si al momento de guardar tu archivo no se te reflejan los cambios en el navegador puedes consultar esta pagina donde te vienen distintas soluciones.

En mi caso tengo WSL instalado y solucione este problema creando mi archivo de React en la distribucion de Ubuntu y no en Windows

En este curso se explica la configuración del entorno por si están teniendo problemas con npx
https://platzi.com/clases/2042-prework-windows/32928-como-configurar-tu-primer-proyecto-en-reactjs/

Si por alguna razón, al correr el comando “npm start” les genera un error como este:

Error: digital envelope routines::unsupported

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

Esto me paso y leyendo al respecto me di cuenta que sucede con Node 17.0.1.
Para solucionarlo encontré la siguiente información.
Copia y pega las siguientes líneas de código en tu package.json, en la parte de scripts

"start": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start","build": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build"

y listo, eso me funciono a mi.

Tambien puede instalar esta aplicacion llamada vite la utiliza vue para crear aplicacion mas rapido, en react
puedes elegir si trabajar con react solito o react con typeScript

npm 7+, extra double-dash is needed:

$ npm init [email protected] <project-name> – --template react

$ cd <project-name>
$ npm install
$ npm run dev

Hola.
Tuve el mismo error que en la pregunta https://platzi.com/comentario/3052408/
al ejecutar npm start
Revisando la respuesta de ODCenteno a esta pregunta, usé la solución en el link

Lo que funcionó para mí fue ejecutar en el terminal(GIT BASH) dentro del proyecto
Hace unas semanas actualicé node.

export NODE_OPTIONS=--openssl-legacy-provider

Me urge esto u.u

He tenido un problema con el npm start y la solución fue cambiarle el script:start en el package.json de esta manera:

"scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
  },

Cuando aparezca un mensaje como “npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.”,
Usar el comando: npm i tar, para actualizar el tar de Linux

Espero les sea de utilidad 😉

JSX es HTML dentro de Javascript, esto se verá más adelante en detalle.

Si alguien le tiro el error en Vscode NPX el termino npx no se reconoce…hay que instalar las variables de entorno

  1. Instalar node https://nodejs.org/es/download/

  2. Colocar las variables de entorno

https://www.youtube.com/watch?v=jgrbAVvNmmM

Y reiniciar…

¿Como configurar react?

CDN links, puedes copiar y pegar links en el

  • Se coloca el text/babel dentro del script
   <script src="index.js" type="text/babel"></script>

La filosofía de react es crear grandes cosass usando componentes pequeños
Esto hace que podamos fraccionar nuestro código html metiendolo en funciones e invocandolos como si fuera una etiqueta html

<body>
    <componente1/>
    <componente2/>
    <componente3/>

existen dos tipos de entornos de desarrollo de react:

  1. development
  2. Production

React recomienda el atributo crossorigin

<script crossorigin src="..."></script>

para una mejor experiencia de manejo de errores

ReactDOM

El paquete react-dom proporciona métodos específicos para el DOM que pueden ser utilizados en el nivel más alto de la aplicación

para que el código funcione bien, hay que poner en nuestro js script:

render()

ReactDOM.render(elemento, contenedor[ ,callback ])

Traduce los elementoa de html, luego lo almacena con un document.getElementById o algun otro elemento contenedor y como tercer parámetro el callback opcional que será ejecutado después de que el elemento sea renderizdo

Nota personal.

React me ha parecido muy interesante, al principio me funcionaba bien cuando estaba usando los links CDN. Llegó un momento en el cual ya el código de la parte de react no me compilaba con el live server(vs code), ni con el plugin de vim Bracey. Así que fui a la siguiente parte del vídeo donde mostraban como instalar suando el otro método de entorno virtual.

Para instalar el entorno virtual, se debe hacer a través de npm

npx create-react-app nombre-de-carpeta o .(en caso de que lo quieras hacer en la misma carpeta)
cd my-app
npm start

En mi caso me salió esto al instalar mi entorno virtual

Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd /home/carlos/Documentos/a/apuntes/react-apuntes/react-codigo
  yarn start

¿Como configurar react?

CDN links, puedes copiar y pegar links en el

  • Se coloca el text/babel dentro del script
   <script src="index.js" type="text/babel"></script>

La filosofía de react es crear grandes cosass usando componentes pequeños
Esto hace que podamos fraccionar nuestro código html metiendolo en funciones e invocandolos como si fuera una etiqueta html

<body>
    <componente1/>
    <componente2/>
    <componente3/>

existen dos tipos de entornos de desarrollo de react:

  1. development
  2. Production

React recomienda el atributo crossorigin

<script crossorigin src="..."></script>

para una mejor experiencia de manejo de errores

ReactDOM

El paquete react-dom proporciona métodos específicos para el DOM que pueden ser utilizados en el nivel más alto de la aplicación

para que el código funcione bien, hay que poner en nuestro js script:

render()

ReactDOM.render(elemento, contenedor[ ,callback ])

Traduce los elementoa de html, luego lo almacena con un document.getElementById o algun otro elemento contenedor y como tercer parámetro el callback opcional que será ejecutado después de que el elemento sea renderizdo

Nota personal.

React me ha parecido muy interesante, al principio me funcionaba bien cuando estaba usando los links CDN. Llegó un momento en el cual ya el código de la parte de react no me compilaba con el live server(vs code), ni con el plugin de vim Bracey. Así que fui a la siguiente parte del vídeo donde mostraban como instalar suando el otro método de entorno virtual.

Para instalar el entorno virtual, se debe hacer a través de npm

npx create-react-app nombre-de-carpeta o .(en caso de que lo quieras hacer en la misma carpeta)
cd my-app
npm start

En mi caso me salió esto al instalar mi entorno virtual

Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd /home/carlos/Documentos/a/apuntes/react-apuntes/react-codigo
  yarn start

En empresas es poco usual el uso de create-react-app, para fines educativos es muy usable y normalmente se usa una configuración custom por medio de npm y webpack, recomiendo que tomen los cursos que siguen en esta línea de aprendizaje vienen ejemplos claros y escalables.

me salia este error al inicializar npm start
Error: error:0308010C:digital envelope routines::unsupported

solución
en el package.json: cambia esta linea

“start”: “react-scripts start”

“start”: “react-scripts --openssl-legacy-provider start”

You are using npm 2.15.12 so the project will be boostrapped with an old unsupported version of tools

Este error me detuvo todo el día, pero aquí les dejo la solución:

  • Primero se tiene que instalar Yarn
npm install --g yarn
  • Verificas que se instalo correctamente
yarn --version
  • Limpias la cache
yarn cache clean
  • Y listo, instalas React
npx create-react-app ./


No sabia que se poda hacer React importando directamente 🤙

Leyendo la documentación se puede usar JSX solo agregándole un secript que contiene BABEL, con esto puede agregarle estilos mucho mas fácil😃

A que no esta genial este diseño?😏
diseño sacado de online Tutorials
como subir un gif 👉Gif
Abajo te dejo el código por si quieres verlo 👇

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Prueba</title>
</head>
<style>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Georgia, 'Times New Roman', Times, serif;
  }

  body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
    background: #0e1538;
  }

  .style1,
  .style2,
  .style3{
    position: relative;
    padding: 20px 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0, 0.5);
    margin: 40px;
    overflow: hidden;
    text-decoration: none;
  }

  .style1:hover{
    background: #ff22bb;
    box-shadow: 0 0 10px #ff22bb,
    0 0 30px #ff22bb,
    0 0 60px #ff22bb,
    0 0 100px #ff22bb;

  }
  .style2:hover{
    background: #00ccff;
    box-shadow: 0 0 10px #00ccff,
    0 0 30px #00ccff,
    0 0 60px #00ccff,
    0 0 100px #00ccff;
  }
  .style3:hover{
    background: #22e622;
    box-shadow: 0 0 10px #22e622,
    0 0 30px #22e622,
    0 0 60px #22e622,
    0 0 100px #22e622;
  }

  .style1::before{
    content: '';
    position: absolute;
    width: 40px;
    height: 400%;
    background: #ff22bb;
    transition: 1s;
    animation: animate 2s linear infinite;
    animation-delay: calc(0.33s * 0);
  }
  .style2::before{
    content: '';
    position: absolute;
    width: 40px;
    height: 400%;
    background: #00ccff;
    transition: 1s;
    animation: animate 2s linear infinite;
    animation-delay: calc(0.33s * 1);
  }
  .style3::before{
    content: '';
    position: absolute;
    width: 40px;
    height: 400%;
    background: #22e622;
    transition: 1s;
    animation: animate 2s linear infinite;
    animation-delay: calc(0.33s * 2);
  }

  .style1:hover::before{
    width: 120%;
  }

  @keyframes animate {
    0%{
      transform: rotate(0deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }

  .style1::after{
    content: '';
    position: absolute;
    inset: 4px;
    background: #0e1538;
  }
  .style2::after{
    content: '';
    position: absolute;
    inset: 4px;
    background: #0e1538;
  }
  .style3::after{
    content: '';
    position: absolute;
    inset: 4px;
    background: #0e1538;
  }

  .style1:hover::after{
    background: #ff22bb;
  }
  .style2:hover::after{
    background: #00ccff;
  }
  .style3:hover::after{
    background: #22e622;
  }

  .style1 span,
  .style2 span,
  .style3 span{
    position: relative;
    z-index: 1;
    font-size: 2em;
    color: #fff;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 4px;
    transition: 0.5s;
  }

  .style1:hover span,
  .style2:hover span,
  .style3:hover span{
    opacity: 1;
  }
</style>
<body>
  <div id="root" class="button"></div>


  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

<script  type="text/babel">
  'use strict';

  const e = React.createElement;

  class LikeButton extends React.Component {
    constructor(props) {
      super(props);
      this.state = { liked: false };
    }

    render() {
      if (this.state.liked) {
        return 'You liked this.';
      }

      return (
        <div>
          <a href="#" onClick={() => this.setState({ liked: true })} className="style1"><span>Button</span></a>
          <a href="#" onClick={() => this.setState({ liked: true })} className="style2"><span>Button</span></a>
          <a href="#" onClick={() => this.setState({ liked: true })} className="style3"><span>Button</span></a>
        </div>
      );
    }
  }
  const root = document.getElementById('root');
  ReactDOM.render(e(LikeButton), root);
</script>

</body>
</html>

Otra forma en la podrian utilizar react seria con el uso de plataformas como CodePen y Glitch, en las que no necesitan instalar nada, solo es cosa de acceder desde el navegador. Por ejemplo, en el caso de Glitch, solo buscas el template de react en la página de inicio y empiezas tu proyecto con todo ya configurado

Algo bueno de saber, al tener this.state, en cuanto modifiquemos un elemento del objeto state, se renderizará nuevamente ese componente.

Nadie usa React así

Aquí una breve explicación de lo que es JSX que encontré por ahí:
JSX es una extensión de JavaScript creada por Facebook para el uso con su librería React. Sirve de preprocesador (como Sass o Stylus a CSS) y transforma el código a JavaScript. De primeras te puede parecer que estás mezclando código HTML dentro de tus ficheros JavaScript, pero nada más lejos de la realidad.

comando
npx create-react-app proyect-app

para correr
npm start

A mi gusto Angular maneja mejor la parte de tener un archivo con el html aparte, quizá en React se pueda hacer igual, no lo se

Despues de correr npm start se abria la ventana de mi navegador (Edge) pero forzaba usar https y no corria la app. Para desactivar esto segui estos pasos https://stackoverflow.com/questions/63825407/microsoft-edge-redirects-http-localhost-to-https-localhost