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
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.
Pasos
instalar paquetes
index.html con un script con bundle.js y un elemento con un Id
webpack.config.js
Main.js
Text
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
"scripts": {
"start": "webpack-dev-server"
},
Agregar en package.json
<!DOCTYPE html>
<html>
<head>
<title>Primeros pasos</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
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
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"
}
]
}
}
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'))
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.
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
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'))
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
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
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
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.
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
Robemosle al Slide de Jose Fresco...
<Main />
<Header />
<Details>
<Info />
<Photos />
<Badges />
</Details>
<Main />
<Main />
<Header /> <Details> <Info /> <Photos /> <Badges /> </Details> <Main />
{ restaurant : { name, details:{
description, pictures, badges
} } }
<Main />
<Header /> <Details> <Info /> <Photos /> <Badges />
<Badges />
</Details> <Main />
restaurant : { name, details:{
description, pictures, badges: { }
} }
<Icon />
<BadgeName />
icon,
badge_name
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