Web Famous MX

Iniciando proyecto en React JS

Iniciando proyecto en React JS

¿Qué es React JS? ☺️

Creado por el equipo de desarrolladores de Facebook, React JS es una librería javascript que nos permitirá construir la interfaz gráfica de nuestros sitios web creando y reutilizando elementos dentro del DOM, cabe destacar que React JS “no” es un Framework como Angular JS o Meteor JS, sin embargo permite crear proyectos muy potentes, optimiza la carga del lado del Back-end solicitado sólo la información necesaria, mejorando la experiencia de usuario, actualizando solo los sectores que sean necesarios dentro de nuestra interfaz.

¿Pero qué es un componente? 🤔

Los componentes son sectores de la interfaz gráfica, por ejemplo la barra de navegación, un formulario de contacto o cualquier elemento que represente información dentro del sitio web.

Estos componentes se pueden conformar de otros componentes más específicos, retomando el ejemplo de la barra navegación, podemos declarar un componente que genere los botones de navegación donde definiremos su nombre y comportamiento.

React JS provee de un meta-lenguaje que nos permitirá crear nuestras etiquetas HTML con un comportamiento y diseño totalmente personalizado, elegante y limpio, JSX permite escribir código increíble.

Esta librería es puro JavaScript y es necesario tener nociones en el uso de eventos, promesas, procesos asíncronos y POO, así como sentirse cómodo con el manejo de HTML y CSS.

Antes de empezar con React JS

Para empezar a escribir código necesitas un buen editor de texto como por ejemplo Sublime Text, Atom, Visual Code, y conocimientos básicos del uso de la terminal, recuerda tener instalado NPM.

Comencemos 😈

El equipo de Facebook creó la herramienta oficial de React JS, abrimos nuestra consola y escribimos:

npm install -g create-react-app

Para generar nuestra primera aplicación ejecutamos el siguiente comando:

create-react-app hello-world

Los comandos anteriores instalarán todo el entorno del proyecto, así como las dependencias necesarias y las herramientas de desarrollo, por ejemplo Web Pack. La estructura del proyecto se muestra a continuación en la siguiente imagen:

El archivo index.js es el punto de entrada de nuestra aplicación, a partir de aquí se desencadena todas las llamadas de los componentes que conforman la UI.

A continuación iniciamos el ambiente de desarrollo a través del siguiente comando, dentro del directorio antes generado, para este ejemplo el directorio se llama “hello-world”:

npm run start

a partir de aquí tenemos un servidor de pruebas que por default es http://localhost:3000/:

JSX permite crear elementos de DOM de manera legible, a continuación se muestra como crear un elemento con JavaScript así como con JSX de React JS, modificamos nuestro archivo index.js.

/* Version JavaScript */

const element = document.createElement('h1')
element.innerText = 'Hello World from element JavaScript!'

const container = document.getElementById('app')
container.appendChild(element)

A continuación creamos un elemento con React JS:

/* Version React JS */

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

const element = <h1>Hello World from element JavaScript!<h1/>

const container = document.getElementById('app')
ReactDOM.render(element, container)

Destacamos la función ReactDOM.render() donde siempre va a recibir dos argumentos muy importantes, el elemento que vamos a mostrar (element) y donde lo queremos mostrar (container)

JSX 😱

JSX nos permite interactuar con expresiones de JavaScript, como una variable, una función, una operación aritmética, etc.

/* index.js */

const name = 'Eric'
const element = <h1>Hello {name} and I'm { 10 * 3 } years old!<h1/>

const container = document.getElementById('app')
ReactDOM.render(element, container)

Los componentes React JS son bloques que construyen la interfaz gráfica de nuestro sitio web, se recomienda tener cada componente en su propio directorio. Para este ejemplo creamos el directorio llamado components y a su vez dentro de este creamos un directorio para cada componente de forma aislada.

/* 
./src/components/Navbar.js
*/

import React from 'react'
class Navbar extends React.Component{

  render(){
    return (
      
      <div>
        <nav>
          <ul>
            <li>
              <a>Home</a>
            </li>
            <li>
              <a>News</a>
            </li>
            <li>
              <a>Contact</a>
            </li>
            <li>
              <a>Blog</a>
            </li>
          </ul>
        </nav>
      </div>
    )
  }
}

export default Navbar



Creamos nuestra clase que extiende de React.Component y sobreescribimos el método render() que retorna un elemento en JSX, el método render() solo puede retornar un elemento (en este ejemplo retornamos un DIV ), dentro de este podemos retornar los elementos HTML que necesitamos.

Ahora necesitamos hacer un render dentro del DOM en el archivo index.js.

/* index.js */

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

import Navbar from './components/navbar'

ReactDOM.render(<Navbar />, document.getElementById('root'));

El resultado obtenido es nuestra Navbar en el navegador, sin embargo solo tenemos el HTML en limpio.

Styles 🕺

Las herramientas de desarrollo incluidas en create-react-app nos permiten incluir archivos externos, como archivos multimedia y CSS dentro de nuestro archivo JS, ahora incluimos el logo y los estilos para nuestro componente Nabvar.

/* 
./src/components/navbar.css
*/

body{
	font-family: 'Helvetica'
}

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

Importamos nuestro archivo CSS como cualquier librería de Javascript, para el nombre de clases dentro de los elementos JSX, usamos el atributo className cómo se muestra a continuación:

/* 
./src/components/navbar.js
*/
import React from 'react'
import './navbar.css'

class Navbar extends React.Component{

  render(){
    return (
      
      <div>
        <nav>
          <ul className='navbar' >
            <li>
              <a>Home</a>
            </li>
            .....
    )
  }
}

export default Navbar

Las hojas de estilos se crean de forma independiente para cada componente y durante el tiempo de Build, las herramientas de WebPack se encargan de presentar los estilos de manera optimizada.

Bootstrap en React JS 🧞‍♂️

Para usar Bootstrap es necesario importar a través de NPM y la instalación es igual que la importación de estilos.

npm install bootstrap

Importamos Bootstrap dentro de nuestro componente raíz que corresponde a index.js

import 'bootstrap/dist/css/bootstrap.min.css'

Es posible sobreescribir los estilos en Boostrap como lo haríamos convencionalmente en nuestro Header de HTML, creamos un directorio para hojas de estilo globales y la importamos posteriormente como se muestra a continuación.

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

import 'bootstrap/dist/css/bootstrap.min.css'
import 'global-styles/style.css'

import Navbar from './components/navbar'


ReactDOM.render(<Navbar />, document.getElementById('root'));

Atributos de componentes – PROPS. 🙈

Los PROPS son argumentos de función y para nuestros componentes JSX corresponden a los atributos como cualquier otra etiqueta de HTML. Es posible pasar datos como cadenas y enteros e incluso mas complejos como objetos previamente definidos.

A continuación importaremos el logo para nuestra barra de navegación sobre una estructura hecha en Bootstrap.

/* 
./index.js
*/
import logoImage from './img/logo-webfamous-mx.png'
import Navbar from './components/navbar'

ReactDOM.render(<Navbar logo={logoImage} />, document.getElementById('root'));

Declaramos el atributo de etiqueta a nuestro componente llamado logo y le pasaremos como atributo el nombre de la variable logoImage que contiene la URL de la imagen importada.

/* 
./src/components/navbar.js
*/
import React from 'react'
class Navbar extends React.Component{
  render(){
    console.log(this.props.logo)
    return (
      
      <nav className="navbar navbar-expand navbar-light bg-light">
        <a className="navbar-brand" href="#">
          <img src={this.props.logo}  width="140" />
        </a>
        ....
    )
  }
}
export default Navbar

Para obtener el valor del lado del componente (navbar.js) es necesario invocar this.props apuntando al atributo declarado que en este caso es logo, como se muestra en el ejemplo anterior.

Claro que es posible crear componentes a partir de otros componentes, para el caso de nuestra Nabvar generamos los items de listas para la composición del menu. Como atributos recibirá la URL para el vinculo y el nombre del ancla, estos datos los pasaremos a través del componente padre. A continuación el código.

/*
  ./src/components/ItemList.js
*/

import React from 'react'
class ItemList extends React.Component{
  render(){
    return (
      <li className="nav-item active">
        <a href={this.props.href} className="nav-link">{this.props.name}</a>
      </li>
    )
  }
}

export default ItemList

Importamos nuestro nuevo elemento en el componente Navbar.js.

import React from 'react'
import ItemList from './ItemList'


class Navbar extends React.Component{
  render(){
    return (
      <nav className="navbar navbar-expand navbar-light bg-light">
        <a className="navbar-brand" href="#">
          <img src={this.props.logo}  width="140" />
        </a>
        <div className="">
          <ul className="navbar-nav">
            <ItemList href="#hola" name="Hola" />
          </ul>
        </div>
      </nav>
    )
  }
}

export default Navbar

Creamos un objeto el cual contiene todo el contenido y se lo pasamos al componente Nabvar a través del atributo items.

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

import 'bootstrap/dist/css/bootstrap.min.css'
import './global-styles/style.css'

import logo from './img/logo-webfamous-mx.png'
import Navbar from './components/navbar'


let itemsMenu = [
	{ name: 'Home', href : '#home' },
	{ name: 'News', href : '#news' },
	{ name: 'Contact', href : '#contact' },
	{ name: 'Blog', href : '#blog' },
]

ReactDOM.render(<
	
	Navbar logo={logo} 
	items={itemsMenu} 
	
	/>, 
	document.getElementById('root'));

Finalmente obtenemos el objeto en el componente Navbar a través de la variable this.props.items, recordar que podemos ejecutar sentencias JavaScritp dentro de JSX usando corchetes, para este caso recuperamos los items a través de la función nativa de JS .map()

import React from 'react'
import ItemList from './ItemList'


class Navbar extends React.Component{
  render(){
    return (
      <nav className="navbar navbar-expand navbar-light bg-light">
        <a className="navbar-brand" href="#">
          <img src={this.props.logo}  width="140" />
        </a>
        <div className="">
          <ul className="navbar-nav">
            { 
              this.props.items.map( (item) => <ItemList href={item.href} name={item.name} /> ) 
            }
          </ul>
        </div>
      </nav>
    )
  }
}

export default Navbar

El resultado obtenido es una barra de navegación construida completamente con React JS.

Conclusiones 🤓

Definitivamente falta mucho que explorar sobre React JS, y por supuesto esta enfocado a crear Widgets más complejos que un Nabvar, sin embargo se toma este ejemplo para mostrar un elemento conocido por todos los que hacemos UI para sitios web.

En siguientes artículos se tomaran temas como el ciclo de vida de un componente, eventos, llamadas a servidor, etc.

Leave a Reply

Your email address will not be published. Required fields are marked *