Librerias importantes de React

  • Create React App creas la carpeta pero sin meterte a ella y escribes el comando npx create-react-app 01-intro-javascript y te create todo el entorno, lo corres usando el comando npm start

API's para usarse con React

    Primeros pasos en React

  1. La manera sucia de usar react:

    //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);

  2. Click derecho en la carpeta y escribir npx create-react-app NombreDelProyecto
  3. Correr el nombre del proyecto con el comando npm start
  4. El codigo hace lo mismo en ambos casos:

    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'));

    5. El ID root se encuentra en el archivo index.html en la carpeta public

JSX

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'));