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

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"
        )
    )
);

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"
        )
    )
);

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"
        )
    )
);

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"
        )
    )
);

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);

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 />;

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

https://facebook.github.io/react/docs/getting-started.html

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