npx create-react-app 01-intro-javascript
y te create todo el entorno, lo corres usando
el comando npm start
//guardamos la ubicación de nuestro div
const contenedor = document.getElementById('app');
//Creamos un encabezado,en las comillas va la etiqueta html en los {} van los atributos
const encabezado = React.createElement('strong', {}, 'Hola Mundo')
//Renderizamos el encabezado dentro delcontenedor
ReactDOM.render(encabezado, contenedor);
npx create-react-app NombreDelProyecto
npm start
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
Hola mundo
,
document.getElementById('root')
);
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
Hola mundo
,document.getElementById('root'));
El ID root se encuentra en el archivo index.html en la carpeta public
Son como etiquetas similares a html, necesitas importar react para poder usar JSX.
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1> Hola mundo </h1> ,document.getElementById('root'));
En el código JSX puedes ejecutar dentro de el código Javascript, ejemplo:
import React from 'react';
import ReactDOM from 'react-dom';
const nombre = 'Ric';
const JSX = <h1> Mi nombre es { nombre } y la suma de 2 más 2 es { 2 + 2 } </h1>
ReactDOM.render(JSX ,document.getElementById('root'));
Si quieres usar varias etiquetas, tienes que crear un contenedor, ejemplo:
import React from 'react';
import ReactDOM from 'react-dom';
const JSX = (
<div>
<h1> Soy ric </h1>
<p> Y estoy usando React JS </p>
<div>
)
ReactDOM.render(JSX ,document.getElementById('root'));
También puedes resumir las etiquetas de esta manera, e igual te encerrara todo en un div.
import React from 'react';
import ReactDOM from 'react-dom';
const JSX = (
<>
<h1> Soy ric </h1>
<p> Y estoy usando React JS </p>
<>
)
ReactDOM.render(JSX ,document.getElementById('root'));
Para usar clases y estilos, tengo que poner className y en la etiqueta style, utilizar corchetes dobles {{}} porque se ponen objetos
import React from 'react';
import ReactDOM from 'react-dom';
const JSX = (
<>
<h1 className="titulo" style={{color: 'red'}} > Soy ric </h1>
<p> Y estoy usando React JS </p>
<>
)
ReactDOM.render(JSX ,document.getElementById('root'));
Pero esta no es la forma correcta.
import React from 'react';
import ReactDOM from 'react-dom';
const JSX = (
const verde = 'green';
<>
<h1 className="titulo" style={{color: verde}} > Soy ric </h1>
<p> Y estoy usando React JS </p>
<>
)
ReactDOM.render(JSX ,document.getElementById('root'));