Curso Pr谩ctico de React.js

Curso Pr谩ctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

Instalaci贸n de React y React DOM

3/29
Recursos

Cambios en el uso de ReactDOM a partir de la versi贸n 18 de React: Cambios en React 18: ReactDOM.createRoot
.

No te preocupes, solo son 2 l铆neas de c贸digo, el resto del c贸digo del curso sigue funcionando sin problemas. 馃槃

Aportes 30

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Les recomiendo esta extensi贸n de react que es mas completa para los snippets si es que no les resulta el imr

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

ocupen el comando 鈥渞afce鈥 para crear el componente.
import React from 鈥榬eact鈥

import React from 'react'

const $1 = () => {
  return <div>$0</div>
}

export default $1

Helloooo
Copa帽eros aqui les comparto el link para instalar el snippet (SLR). https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux
Espero les sirva para ir con nuestro maestro.

Comandos de inicializaci贸n

  1. Creaci贸n de la carpeta de trabajo
mkdir react-shop
cd react-shop
  1. Inicializar
git init
npm init
// colocamos datos relevantes al momento de inicializar con git
// name: react-shop
// description: react-eshop
// entry point: src/index.js
// author: nombre <correo>
// license: MIT 
  1. Instalar dependencias
npm intall react react-dom
// luego, abrir el proyecto en vscode
  1. Crear estructura de carpetas del proyecto
mkdir public
cd public 
touch index.html
cd ..
mkdir src
cd src
touch index.js
mkdir components
cd components
touch App.jsx
  1. Importaci贸n de react y creaci贸n de componentes b谩sicos
// en index.js
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<App />, document.getElementById('app'));
// en App.jsx
import React from 'react';

const App = () => {
    return (
        <h1>Hola Mundo!</h1>
    );
}

export default App;

Podemos usar el comando npx create-react-app nombre_archivo para que se genere todas las carpetas que Oscar esta creando manualmente.
Seguido del comando npm start para poder comenzar con el servidor de desarrollo

Instalaci贸n de React y React Dom

  1. En el cmd
  2. Crear carpeta con mkdir
  3. Ingresar a la carpeta
  4. Inicializar repo - git init
  5. npm init y configurar el proyecto
  6. Instalamos las dependencias
    npm install react react-dom
  7. code - Abrir VSCODE
  8. Creamos Carpeta SRC (se crear谩 el codigo)
  9. Creamos Carpeta public (archivos p煤blicos)
  10. Dentro de public y de src creamos index.js
  11. Dentro src creamos carpeta componentes
  12. Dentro de components creamos archivos App.jsx
  13. En el archivo App.jsx
import React from 'react'
const App = () => {
    return(
	<h1> Hola Mundo </h1>
    );
}
export default App;
  1. En el archivo index.js de la carpeta src
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<App />, document.getElementById(app))

Recomiendo la secci贸n 鈥淚ntegraci贸n b谩sica de React鈥 del curso de Webpack, donde hacen lo mismo que en toda esta secci贸n y se llega a un punto de configuraci贸n m谩s acabando:
Webpack

Si al escribir code . les sale el mensaje de error: 鈥渃ommand not found: code鈥 pueden solucionarlo desde VS Code presionando shift+cmd+p y buscando 鈥淪hell command: Install 鈥榗ode鈥 command in Path鈥

Podemos usar

take react-shop

en lugar de utilizar

mkdir react-shop
cd react-shop

COMANDOS

git init

npm init 

npm instal react react-dom


ReactDOM.render(elemento, contenedor[, callback])
.
Renderiza un elemento React al DOM en el contenedor suministrado y retorna una referencia al componente (o devuelve null para componentes sin estado).
.
https://es.reactjs.org/docs/react-dom.html

馃捇锔忊殯锔廘a extensi贸n para escribir m谩s r谩pido componentes justa ahora funciona de una manera diferente:

  • A m铆 me funciono escribiendo rsc que es (react stateless component) y luego presionar enter

  • Hay muchos m谩s comandos con su explicaci贸n a la derecha un poco abajo en la documentaci贸n de la extensi贸n:
    aqui

Una gran extensi贸n 馃槃, Gracias por compartirla,

Buenas noches.

Recuerden que el 29 de Marzo de 2022 salio la nueva versi贸n de React V18.0 por lo cual si instalan esta versi贸n se van a topar con incovenientes m谩s adelante. Si bien lo desesan pueden sar esta nueva versi贸n pero si no pueden instalar la versi贸n de React 17.0.2 con este comando.

npm install [email protected]17.0.2 [email protected]17.0.2

O si quieren usar la nueva versi贸n de React V 18.0.0
Deben implementar este codigo en el index.js

import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App/>); */

Adicional cuando Lleguen a la parte de Routes, recuerden que actualmente se maneja 鈥渞eact-router-dom鈥 VS 6 y la forma de implementaci贸n ha cambiado, en los principales comentarios se encontraran con esta informaci贸n para que lo chequeen.

Tengo una duda, no es m谩s r谩pido ejecutando.

  • npm install -g create-react-app

  • npx create-react-app nombre_carpeta:proyecto

  • entramos a la carpeta creada

  • npm start
    y con eso nos crea la estructura del proyecto de carpetas y componentes

escribiendo rsc y enter al inicio del componente App.jsx se crea autom谩ticamente toda la estructura con el import, const y export

vamos empezar creando la carpeta de nuestro proyecto. Tenemos 2 formas de hacerlo con el comando 鈥淢Kdir鈥 desde la consola o bien creandola desde el entono visual. Tambien puedo aconsejar que desde visual code activando la consola(Ctrl+shift+帽) se puede acceder al proyecto y una consola solo destinada para ese proyecto.Luego de esto tendremos q inicializar GIT con el siguiente comando

git init

luego de esto tenemos que instalar npm con el siguente comando y luego contestar todas las preguntas que nos haga npm

npm install

o si queremos evitar las preguntas podemos utilizar el siguiente comando

npm install -y

Luego de instalar npm vamos a instalar la libreria de React.js con el siguiente comando

npm install react react-dom

Luego creamos en la carpeta raiz una carpeta llamada 鈥減ublic鈥 y dentro creamos un archivo 鈥渋ndex.html鈥. Luego creamos otra carpeta 鈥渟rc鈥 dentro de esta ultima creamos un archivo llamado 鈥渋ndex.js鈥 y por ultimo creamos una carpeta 鈥渃omponents鈥 y luego dentro de esta carpeta creamos 鈥淎pp.jsx鈥

Codigo de src/index.js

import React from "react";
import ReactDom from "react-dom";

ReactDom.render( <App /> , document.getElementById('app'));

codigo de components/App.jsx

// en index.js
import React from'react';
import ReactDOM from'react-dom';

ReactDOM.render(<App />, document.getElementById('app'));

// en App.jsx
import React from'react';

const App = () => {
    return (
        <h1>Hola Mundo!</h1>
    );
}

exportdefault App;

Instalaci贸n de React y React DOM

1.- crear el fichero react shop:

mkdir react-shop && cd react-shop

2.- Inicializar el proyecto con:

git init && npm init

3.- Instalar react al proyecto

npm install react react-dom 

4.- Entrar con VSCODE con el comando:

code .

el punto del final es porque no deberiamos encontrar en el folder de nuestro proyecto en la terminal, entonces el comando funciona asi:

code + ruta-de-folder-o-archivo-que-deseamos-abrir

5.- Crear el fichero public en la raiz del proyecto y dentro index.html
6.- Crear el fichero src en la raiz del proyecto y dentro el archivo index.js
7.- Crear dentro de src el fichero componentsy dentro el archivo App.jsx
8.- Con el shortcut rafce creamos nuestro componente en App.jsx

Y por ultimo index.js:

import React from "react";
import ReactDOM from 'react-dom'

ReactDOM.render(<App />, document.getElementById('app'));

Utilizando React 18

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './components/App';

const container = document.getElementById('app');
const root = createRoot(container);

root.render(<App/>);

Para los que esten empezando (como yo), les recomiendo leer la documentaci贸n para entender mejor los conceptos y lo que vaya realizando el profesor a lo largo del curso https://es.reactjs.org/tutorial/tutorial.html

Nueva actualizaci贸n en React 18 para renderizar, aqu铆 la discusi贸n.

actualmente el primer comando es 鈥渞cc鈥 y ya te pone toda la estructura

import React from 'react';

const app = () => {
    return (
        <div>
            <h1>Hola Mundo</h1>
        </div>
    );
};

export default app;

Si usan StudioCode pueden buscar la siguiente extensi贸n para los atajos como el profesor 鈥渟lr鈥 ,鈥渋mr鈥

React-Native/React/Redux snippets for es6/es7

Si la extensi贸n no les funciona con ese Shortcut pueden usar 鈥渞fce鈥. Es la que me funciona


const App = ()=>{
    return(
        <h1>
            Hola mundo!!!
        </h1>
    )
}

export default App;
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <App/>, document.getElementById('app')
);

A mi me funciono rfce para crear todo incluyendo el import con funcion y rsc con arrow function

Esta parte no es tan divertida, pero vaya que ayuda el saber todas las configuraci贸n desde el core de la App

Si les da error el 鈥渋mr鈥 para importar React es porque est谩 mal el link al snippet, el correcto es: https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets

React tiene comandos para crear el proyecto de manera autom谩tica, de tal forma que el mismo React te crea los archivos necesarios para configurar y ejecutar el proyecto.
Para ello se usa el comando:

npx create-react-app my-app

donde my-app es el nombre del proyecto a crear. React crear谩 una carpeta con el nombre del proyecto y en su interior crear谩 los archivos base iniciales a partir de los cuales puede empezar a trabajar.

Una vez que React a creado el proyecto, se ingresa a la carpeta 鈥渃d my-app鈥 y se ejecuta 鈥渘pm start鈥

Comando : Rafce
Nos crea la estructura de un component