React nos permite crear aplicaciones y proyectos que antes tomaban meses en un plazo de dias.
Nos dio manera de organizar codigo en una manera mejor que antes, iterar y mejorar las aplicaciones mas facil y crear una experiencia del usuario mucho mejor.
En React, la estructura de una aplicación es un árbol de componentes o elementos.
Creat React App es la herramienta que nos permite crear la estructura de React con todas las configuraciones y archivos necesarios.
Configuraciones son los configuraciones de Webpack y Babel que nos permiten usar el JSX y convertir la sintaxis de JSX al Javascript.
Para crear la estructura, ejecutaremos el commando create-react-app:
# Crear la applicacion
npx create-react-app ejemplo-react-1
# Entrar a la carpeta de proyecto
cd ejemplo-react-1Create React App instala todas las herramientas y paquetes, es decir, no es necesario correr npm i.
Para arrancar la aplicación, usamos el commando npm start, provisto por Create React App.
React nos permite 2 maneras de crear una función, usando sintaxis de clase o sintaxis de función.
Crearemos 2 archivos, uno para el ejemplo de componente de clase y otro para el componente de función.
# Crea la carpeta components
mkdir src/components
# Crea los archivos
touch ./src/components/ClassComponent.js ./src/components/FuncComponent.js ./src/components/MyComponent.jsEn React el componente de clase es mas poderoso, y tiene mas funcionalidades:
el componente de clase nos permite guardar estado dentro del componente con el state, y tambien hacer cosas durante de diferentes ciclos de vida (antes de creación, durante de la vida, antes de que se elimine.).
Hablaremos mas tarde sobre los ciclos de vida.
El componente de clase tambien puede recibir datos desde fuera por los props.
import React from 'react';
// el atajo para crear el componente de clase: rcce + `Tab`
class ClassComponent extends React.Component {
// `state` permite al componente tener su datos privados que pertenecen solo a este componente,
// y se pueden mostrar o actualizar.
constructor(){
super();
this.state = {
name: 'Pepito',
age: 25,
img: 'https://pickaface.net/gallery/avatar/20130325_120204_3808_pepito.png'
}
}
// el método render es obligatorio en los componentes de clase
// los valores devueltos del return del render,son lo que componente muestra
render() {
return(
<div>
<img src={this.state.img} alt="avatar"/>
<p>Name: {this.state.name}</p>
<p>Age: {this.state.age}</p>
</div>
)
}
}
// tenemos que exportar el componente para poder utilizarlo
export default ClassComponent;En React el componente de función es mas simple, y ligero y nos permite crear componentes simples rapido.
El componente de funcion no tiene estado, no tiene state y se utiliza como componente de presentación. En el mundo de React solemos llamarlo en esa manera - **componente de presentación **.
El componente de función puede recibir datos desde fuera por los props. Es decir otros componentes pueden inyectar cualquier dato (incluido funciones) en el componente.
import React from 'react'
// El componente de función puede recibir datos desde fuera por los `props`.
// Otros componentes pueden inyectar cualquier dato (incluyendo funciones) en el componente.
function FuncComponent(props) {
// El componente de funcion no tiene estado, no tiene `state`
// Los valores devueltos del return son lo que componente muestra
return (
<div>
<h2>Películas favoritas</h2>
<ul>
<li>Guardians of The Galaxy</li>
<li>The Warriors</li>
<li>Inception</li>
</ul>
</div>
)
}
export default FuncComponent;// ...
// ...
import ClassComponent from './components/ClassComponent'; // <== !
import FuncComponent from './components/FuncComponent'; // <== !
function App() {
return ( // <== !
<div className="App">
<ClassComponent />
<FuncComponent />
</div>
);
}
// ...Que es state y donde lo encontramos:
-
'state' es un objeto en react que tiene cada componente de clase.
-
Se utiliza para guardar los datos/estado relacionados con el componente.
-
'state' representa datos que son privados para cada componente de 'clase'.
import React from 'react';
class MyComponent extends React.Component {
state = {
name: 'Sarah',
};
render() {
return (
<div>
<p> Hello {this.state.name}</p>
</div>
);
}
}
export default MyComponent;
// 'state' es un objeto en react que tiene cada componente de clase.
// Se utiliza para guardar los datos/estado relacionados con el componente.
// 'state' representa datos que son privados para cada componente de 'clase'.
// Cada componente de react es un objeto. Cada componente clase de react tiene dos objetos mas dentro - el objeto `state` y el objeto `props`Que son los props y donde los encontramos:
Los componentes de React,componente de clase tal como componente de funcion, pueden de recibir datos desde fuera.
Es decir que, podemos pasarlos / inyectar datos en los componentes, desde fuera.
Lo hacemos creando atributos personalizados en cada componente, llamados props.
Comentario:
Nos referimos a los atributos predeterminados de HTML solo como atributos,
y a los atributos personalizados como props.
Sin embargo los atributos y los props van a ser inyectados al componente y disponible como los props.
// src/App.js
import React from 'react';
import './App.css';
import MyComponent from './components/MyComponent'; // <== !
function App () {
return (
<div>
{/* city="Barcelona" es un prop ( datos que pasamos al MyComponent ) */}
<MyComponent city="Barcelona" />
<MyComponent />
</div>
);
}
export default App;
# Crear la applicacion
npx create-react-app ejemplo-react-2
# Entrar a la carpeta de proyecto y instala axios
cd ejemplo-react-2
npm install axios
# Crea la carpeta components
mkdir src/components
# Crea el archivo/componente
touch ./src/components/ListItem.js ./src/countries.jsonhttps://github.com/ironhack-labs/lab-wiki-countries/blob/master/src/countries.json
En este ejemplo re-implemetaremos el ejemplo de Wiki Countries pero sin usando el router, centrándose en los conceptos claves de state y props.
import React, { Component } from 'react';
import countriesJSON from './countries.json'
class App extends Component {
state = {
countries: countriesJSON
}
render() {
return (
<div>
{ this.state.countries.map((countryObj) => {
return <p> {countryObj.name.common} - {countryObj.capital[0]}</p>
})}
</div>
)
}
}
export default App;Los componentes nos permiten simplificar el codigo y tenerlo organizado por las funcionalidades.
En lugar de usar elemento p de parrafo , vamos a crear un comopnente de función cuya funcionalidad será mostrar el nombre de paiz y el capital.
import React from 'react'
function ListItem(props) {
return (
<p> {props.countryObj.name.common} - {props.countryObj.capital[0]}</p>
)
}
export default ListItemimport React, { Component } from 'react';
import countriesJSON from './countries.json';
import ListItem from './components/ListItem'; // <== !
class App extends Component {
state = {
countries: countriesJSON
}
render() {
return (
<div>
{ this.state.countries.map((countryObj) => {
return <ListItem countryObj={countryObj} />
{/* return <p> {countryObj.name.common} - {countryObj.capital[0]}</p> */}
})}
</div>
)
}
}
export default App;props = inyectadoDesdeFueraPorAtributo
Los ciclos de vida existen solo en los componentes de clase. Se utilizan para
Los ciclos de vida nos dan más control sobre el componente y nos permiten hacer cosas durante los diferentes tiempos en el ciclo de vida de un componente.
constructor() - se ejecuta primero, antes de que se muestre el componente
componentDidMount()-
// se ejecuta justo después de crear el componente y mostrarse por primera vez
componentDidMount() {
// console.log("did mount - fue creado y mostrado");
axios
.get("https://countries.tech-savvy.tech/countries")
.then(response => {
// console.log("api response");
this.setState({ countries: response.data });
})
.catch(err => console.log(err));
}