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

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

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
1. Pasos
  1. instalar paquetes
  2. index.html con un script con bundle.js y un elemento con un Id
  3. webpack.config.js
  4. 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

e2eb5783667e89540be24894cc7238fe17cb34bc

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

e2eb5783667e89540be24894cc7238fe17cb34bc

Opcional

"scripts": {
    "start": "webpack-dev-server"
  },

e2eb5783667e89540be24894cc7238fe17cb34bc

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>

38fcfbe88982f1695146734768b3c63341c225cc

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']

         }
      }]
 }
}

1d2746a614eae088176774ddc33177bb48c30908

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

dc275bd5768519fc57149e69f588e3c3e553ec21

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

dc275bd5768519fc57149e69f588e3c3e553ec21

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

c57cb6730fefa3f2ed14ecb4447ccb7624cdf182

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...

https://github.com/jfresco

<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)
1. Ejemplo: Freelancer
Separamos el HTML en los futuros componentes
1. top->down
Convertimos los HTML en componentes
Integramos en nuestro Main.js

Gracias

https://github.com/ratonjuancarlos/reactWebpackBaseSlides

Empezando

By Pablo Hiyano

Empezando

Primeros pasos en React

1,237

Empezando con React

quiero aprender react

Transpile

JSX

Empezando

Leer

Configurar

Analizar

Modelar

Agregando datos

Leer

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

Instalar paquetes

Opcional

index.html con un script con bundle.js y un elemento con un Id

Configurar Webpack para:

Main.js

Analizar

renders the UI / interactivity

Main.js

Empiezo a separar en componentes

Empiezo a separar en componentes

Empiezo a separar en componentes

Analizar

renders the UI / interactivity

renders the UI / interactivity

Component Hierarchy

Data Model

Component Hierarchy

Data Model

Modelar

Gracias

Empezando

More from Pablo Hiyano

instalar node

instalar npm