reactjsmuperita

ReactJS mu Perita (VIII). Introducción a JSX

JSX es una extensión de JavaScript. Aunque JSX parece un lenguaje de plantillas se puede utilizar JavaScript sin problemas para darle una mayor potencia.

JSX genera elementos React (muchos elementos HTML tienen una correspondencia con un elemento React).

Entre las ventajas que tiene JSX es que está íntimamente ligado con el manejo de eventos, cómo el estado de los componentes cambia durante la vida de los mismos y cómo se formatean los datos para ser mostrados en el interfaz.

Los componentes de React contienen la lógica y la parte de interfaz en el mismo componente.

Es importante tener en cuenta que React no necesita utilizar JSX pero los desarrolladores lo utilizan porque lo encuentran sumamente útil tener el HTML dentro del código JavaScript puesto que está íntimamente ligado. Además permite a React ser más útil a la hora de depurar y mostrar los mensajes de advertencia o error.

jsx

En la imagen anterior se puede observar como los dos códigos de los objetos de la parte superior son similares para React. El método createElement de React creará el objeto que se describe en la parte baja de la figura.

Recurso

Para más información sobre JS:

https://reactjs.org/docs/introducing-jsx.html

8.1 ¿Cómo se puede embeber expresiones JavaScript en JSX?

Muy fácil, utilizando llaves:

const coche = { id: 0, marca:'Seat’, . . .};

return (

<div key={coche.id} className="col-12 mt-5">

<Media tag="li">

<Media body className="ml-5">

<Media heading>{coche.marca}</Media>

</Media>

</Media>

</div>

);

8.2 Reactstrap

Es el momento de introducir bootstrap a un proyecto. Bootstrap da mucha más versatilidad, calidad y definición a una aplicación web. Para incluir bootstrap en el proyecto hay que ejecutar el siguiente comando:

sudo yarn add bootstrap@4.0.0

reactstrap

Eso incluye bootstrap en nuestro proyecto React. También habrá que ejecutar los siguientes comandos:

sudo yarn add reactstrap@5.0.0 react-popper@0.9.2

reactstrap2

Esto permite añadir los componentes de bootstrap re-adaptados o re-implementados en React.

Ahora habría que adaptar el proyecto para que pueda utilizar bootstrap. Hay que añadir una línea al fichero src/index.js para añadir bootstrap al proyecto de la siguiente manera:

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import ‘bootstrap/dist/css/bootstrap.min.css’;

import ‘./index.css’;

import App from ‘./App’;

import registerServiceWorker from ‘./registerServiceWorker’;

ReactDOM.render(<App />, document.getElementById(‘root’));

registerServiceWorker();

La línea a insertar se marca en negrita. Es importante que esté antes de index.css dado que index.css podrá así redefinir elementos de bootstrap.

Ahora se va a cambiar un poco la aplicación creada por defecto:

cambiando app js

Las líneas que se han añadido son las siguientes:

import { Navbar,NavbarBrand } from ‘reactstrap’;

….

       <Navbar dark color=”primary”>

         <div className=”container”>

          <NavbarBrand href=”/”>Club de tenis</NavbarBrand>

         </div>

       </Navbar>

Se añaden elementos bootstrap como Navbar y NavbarBrand a la aplicación.

El resultado es automático y quedaría como sigue:

resultado react

Recurso.

Para más información sobre reactstrap:

https://reactstrap.github.io/

Para más información de cómo utilizar Navbar de reactstrap:

https://reactstrap.github.io/components/navbar/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>