Instalación de React y React DOM

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 “rafce” para crear el componente.
import React from ‘react’

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 “Integració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: “command not found: code” pueden solucionarlo desde VS Code presionando shift+cmd+p y buscando “Shell command: Install ‘code’ 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

💻️⚛️La 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,

Notas de la clase(3/29): https://occipital-abrosaurus-f85.notion.site/Instalaci-n-de-React-y-React-Dom-75147f3aab7c483fb157e5307147359a

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 “react-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 “MKdir” 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 “public” y dentro creamos un archivo “index.html”. Luego creamos otra carpeta “src” dentro de esta ultima creamos un archivo llamado “index.js” y por ultimo creamos una carpeta “components” y luego dentro de esta carpeta creamos “App.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 “rcc” 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 “slr” ,“imr”

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

Si la extensión no les funciona con ese Shortcut pueden usar “rfce”. 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 “imr” 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 “cd my-app” y se ejecuta “npm start”

Comando : Rafce
Nos crea la estructura de un component