Empezando con React
quiero aprender react
- ... pero necesito saber JSX
- ... pero necesito transpilar
- ... entonces necesito Babel
- ... y si preciso Babel, entonces precisos Browserfy o Webpack
- ... y para eso preciso npm
- ... que viene en node
- ...
-
Definiciones
- transpile y babel
-
JSX o no JSX
- variaciones en el HTML (className, etc.)
- render()
Transpile
Convertir codigo de un lenguaje en otro similar
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
var pairs = evens.map(v => ({
even: v, odd: v + 1
}));
// Statement bodies
nums.forEach(v => {
if (v % 5 === 0)
fives.push(v);
});
"use strict";
var odds = evens.map(function (v) {
return v + 1;
});
var nums = evens.map(function (v, i) {
return v + i;
});
var pairs = evens.map(function (v) {
return { even: v, odd: v + 1 };
});
// Statement bodies
nums.forEach(function (v) {
if (v % 5 === 0) fives.push(v);
});
ES6
JS
Transpile con
Babel
JSX
Codigo JS , con sintaxis tipo XML que sera convertida a JS
<Nav color="blue" />
<Nav color="blue">
<Profile>click</Profile>
</Nav>;
<Form>
<Row>
<Label />
<Input />
</Row>
</Form>
ES6
render(return <Nav color="blue" />);
render(
return <Nav color="blue">
<Profile>click</Profile>
</Nav>
);
render( return
<Form>
<Row>
<Label />
<Input />
</Row>
</Form>
);
var Nav, Profile;
React.createElement(Nav, {color:"blue"});
React.createElement(
Nav,
{color:"blue"},
React.createElement(
Profile,
null,
"click"
)
);
React.createElement(
Form,
{color:"blue"},
React.createElement(
Row,
null,
React.createElement(
Label,
null,
"click"
),
React.createElement(
Input,
null,
"click"
)
)
);
JS
var Nav, Profile;
<Nav color="blue" />
<Nav color="blue">
<Profile>click</Profile>
</Nav>
<Form color="blue">
<Row>
<Label />
<Input />
</Row>
</Form>
JSX
Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively.
Como JSX ES JS, identificadores como class y for no son buenos como nombres de atributos en XML.
En su lugar, ReactDom espera en las propiedades del DOM de sus componentes, nombres como className y htmlFor, respectivamente.
El metodo render() es obligatorio en un componente de React.
Siendo React una libreria UI, o sea, para renderizado, esto tiene sentido.
Empezando
-
Leer
-
Configurar
-
Pasos
-
instalar paquetes
-
index.html con un script con bundle.js y un elemento con un Id
-
webpack.config.js
-
Main.js
-
-
-
Analizar
-
Modelar
-
Agregando datos
Leer
Text
Configurar
-
instalar paquetes
-
index.html con un script con bundle.js y un elemento con un Id
-
webpack.config.js
-
Main.js
Pasos
-
instalar node
-
instalar npm
Comenzamos el proyecto
mkdir proyecto cd proyecto
npm init -y
npm install react@0.14.3 react-dom@0.14.3 babel-core@6.3.13 babel-loader@6.2.0 babel-preset-es2015@6.3.13 babel-preset-react@6.3.13 webpack webpack-dev-server react-hot-loader style-loader css-loader --save-dev
Instalar paquetes
Opcional
"scripts": {
"start": "webpack-dev-server"
},
Agregar en package.json
index.html con un script con bundle.js y un elemento con un Id
<!DOCTYPE html>
<html>
<head>
<title>Primeros pasos</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
Configurar Webpack para:
- Transpilar
- Unificar
- Server con diferentes entornos
- Hot Reload
- Diferentes scripts a traves de npm
- Configuracion en webpack.config.js
module.exports = {
entry: "./Main.js",
output: {
filename: "./bundle.js"
},
module:{
loaders: [{
test: /\.js?$/,
exclude: /node_modules/,
loader: ['babel'],
query: {
presets: ['react', 'es2015']
}
}]
}
}
Configuracion en webpack.config.js
Archivos de
- entrada: todos los JS que definamos
- salida: un unico archivo JS
module.exports = { entry: "./Main.js", output: { filename: "./bundle.js" }, module:{ loaders: [{ test: /\.js?$/,
exclude: /node_modules/,
loader: ['babel'],
query: {
presets: ['react', 'es2015']
} }] } }
Procesamiento de los archivos de entrada
module.exports = { entry: "./Main.js", output: { filename: "./bundle.js" }, module:{ loaders: [{ test: /\.js?$/,
exclude: /node_modules/,
loader: ['babel'],
query: {
presets: ['react', 'es2015']
} }] } }
module.exports = {
entry: "./Main.js",
output: {
filename: "./bundle.js"
},
module: {
loaders: [
{
test: /\.js?$/,
exclude: /node_modules/,
loader: ['babel'],
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
}
}
Main.js
var React = require('react');
var ReactDOM = require('react-dom');
require("./stylesheet.css");
var Main = React.createClass({
render: function(){
return (
<div>
Hello Me
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById('app'))
Analizar
It's best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing.
renders the UI / interactivity
Es mejor desacoplar estos procesos, porque construir una version statica requere tipear un monton de condigo y no pensar ni analizar nada, mientras que agregar interactividad requiere pensar y analizar un monton, y casi nada de codigo
Main.js
var React = require('react');
var ReactDOM = require('react-dom');
var Main = React.createClass({
render: function(){
return (
<div>
Hello Me
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById('app'))
Empiezo a separar en componentes
App.js
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('app')
);
import React from 'react';
import ReactDOM from 'react-dom';
var App = React.createClass({
render: function(){
return (
<div>
Hello Mess
</div>
)
}
});
export default App
Empiezo a separar en componentes
App.js
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('app')
);
import React from 'react';
import ReactDOM from 'react-dom';
import Lista from './Lista';
var App = React.createClass({
render: function(){
return (
<div>
Hello Mess
<Lista />
</div>
)
}
});
export default App
Lista.js
import React from 'react';
import ReactDOM from 'react-dom';
var Lista = React.createClass({
render: function(){
return (
<ul>
<li>Hola</li>
<li>Mundo</li>
<li>World</li>
<li>Monde</li>
</ul>
)
}
});
export default Lista
Empiezo a separar en componentes
App.js
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('app')
);
import React from 'react';
import ReactDOM from 'react-dom';
import Lista from './Lista';
var App = React.createClass({
render: function(){
return (
<div>
Hello Mess
<Lista />
</div>
)
}
});
export default App
Lista.js
import React from 'react';
import ReactDOM from 'react-dom';
import ListaEl from './ListaEl ';
var Lista = React.createClass({
render: function(){
return (
<ul>
<ListaEl >Hola</ListaEl >
<ListaEl >Mundo</ListaEl >
<ListaEl >World</ListaEl >
<ListaEl >Monde</ListaEl >
</ul>
)
}
});
export default Lista
Analizar
It's best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing.
renders the UI / interactivity
Es mejor desacoplar estos procesos, porque construir una version statica requere tipear un monton de condigo y no pensar ni analizar nada, mientras que agregar interactividad requiere pensar y analizar un monton, y casi nada de codigo
-
No usar state
-
top-down o bottom-up
-
El componente mas alto en la jerarquia va a usar datos como props
renders the UI / interactivity
Robemosle al Slide de Jose Fresco...
<Main />
<Header />
<Details>
<Info />
<Photos />
<Badges />
</Details>
<Main />
Component Hierarchy
<Main />
<Header /> <Details> <Info /> <Photos /> <Badges /> </Details> <Main />
Data Model
{ restaurant : { name, details:{
description, pictures, badges
} } }
Component Hierarchy
<Main />
<Header /> <Details> <Info /> <Photos /> <Badges />
<Badges />
</Details> <Main />
Data Model
restaurant : { name, details:{
description, pictures, badges: { }
} }
<Icon />
<BadgeName />
icon,
badge_name
Modelar
var React = require('react');
var ReactDOM = require('react-dom');
var Main = React.createClass({
render: function: function(){
return (
<div>
Hello Me
</div>
)
}
});
ReactDOM.render(<Main />, document.getElementById('app'))
Mains.js
import Footer from './templates/Footer.js';
<Footer />
import React from 'react';
import ReactDOM from 'react-dom';
var Footer = React.createClass({
render: function() {
return (
<div id="footer">
<div className="container">
<p>
Copyright © Tempo. Design by
<a href="http://www.templategarden.com" rel="nofollow">
TemplateGarden
</a>
</p>
</div>
</div>
);
}
});
export default Footer
Footer.js
- Descargamos un template ( OnePageLove Free templates, startbootstrap)
- Ejemplo: Freelancer
- Separamos el HTML en los futuros componentes
- top->down
- Convertimos los HTML en componentes
- Integramos en nuestro Main.js
Gracias
Empezando
By Pablo Hiyano
Empezando
Primeros pasos en React
- 1,242