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
- ...
Title Text
Roadmap
-
Definiciones
- transpile y babel
-
JSX o no JSX
- variaciones en el HTML (className, etc.)
-
Terminologia
- ReactElement
- ReactElement Factory
- ReactNode
- ReactComponent
- render()
- <Componente />
-
Webpack
- Starter Kit Base
-
Thinking in React
- Definir bloques
- HTML en React
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
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
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
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
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
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>
var Form, Row, Label, Input;
<Form color="blue">
<Row>
<Label />
<Input />
</Row>
</Form>
JSX
react Element
react Factory
react Node
react Components
Cuatro propiedades:
- type
- props
- key
- ref.
Sin metodos.
var root = React.createElement('div');
ReactElement
var child = React.createElement(
'li',
null,
'Text Content'
);
var root = React.createElement(
'ul',
{
className: 'my-list',
props: {}
},
child
);
ReactElement
var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.body);
var root = <ul className="my-list">
<li>Text Content</li>
</ul>;
React.render(root, document.body);
JS
JSX
Funcion que genera un ReactElement con un type especifico
var div = React.createFactory('div');
var root = div({ className: 'my-div' });
ReactFactory
Puede ser:
- ReactElement
- string (aka ReactText)
- number (aka ReactText)
- Array of ReactNodes (aka ReactFragment)
Pueden ser ReactElements que represente elementos hijos (children).
ReactNodes
Para crear objetos encapsulados con un determinado estado (state).
createClass funciona como un constructor que devuelve un objeto que siempre debe tener como minimo un metodo render()
var MyComponent = React.createClass({
render: function() {
...
}
});
ReactComponet
var element = React.createElement(MyComponent);
var element = <MyComponent />;
JS
JSX
Como JSX es JavaScript, ciertos identificadores como class y for no son recomendables como nombres de atributos tipo XML.
En su lugar, los componentes de ReactDOM esperaran nombres de propiedades del DOM como className y htmlFor, respectivamente
react BASE
React Starter Pack
HTML
<!DOCTYPE html>
<html>
<body>
<!--contenedores donde mostrar nuestros componentes-->
<div id="container"></div>
<div id="container-2"></div>
<!--JS de React-->
<script src="../../build/react.js"></script>
<script src="../../build/react-dom.js"></script>
<!--Nuestro JS-->
<script src="scripts.js"></script>
</body>
</html>
scripts.js
var Hello = React.createClass({
render: function() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
});
ReactDOM.render(
React.createElement(Hello, {name: "World"}),
document.getElementById('container')
);
var ExampleApplication = React.createClass({
render: function() {
return React.DOM.p(null, 'Hello');
}
});
var ExampleApplicationFactory = React.createFactory(ExampleApplication);
ReactDOM.render(
ExampleApplicationFactory(),
document.getElementById('container-2')
);
JSX
JS
React Base
By dax pablo
React Base
- 646