Gateando

Gateando

  1. Leer
  2. Configurar
  3. Analizar
  4. Modelar
  5. Agregando datos

Leer

Text

Configurar

  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

  • npm init
  • 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 --global webpack --save-dev webpack-dev-server --global webpack-dev-server --save-dev react-hot-loader --save-dev

Instalar paquetes

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

<!DOCTYPE html>
<html>
<head>
    <title>Tempo</title>
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

Configurar Webpack para:

  • Transpilar
  • Unificar
  • Server con difernetes entornos
  • Hot Reload
  • Diferentes scripts a traves de npm
module.exports = {
   entry: "./app/componentes/Main.js",
   output: { 
     filename: "public/bundle.js"
   },
   module:{
      loader: [{
         test: /\.jsx?$/,

         exclude: /(node_modules|bower_componentes)/,

         loader: ['react-hot', 'babel'],

         query: {

            presets: ['react', 'es2015']

         }
      }]
 }
}

Main.js

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

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

  • don't use state at all

  • top-down or bottom-up

  • The component at the top of the hierarchy will take your data model as a prop

renders the UI / interactivity

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

      <BadgeName />
    <Badges />
  </Details>

<Main />

Data Model

  restaurant : {
    name,
    details:{

     description,
     pictures,
     badges: {
      icon,
      badge_name
     }
    }
  }

Modelar

var React = require('react');
var ReactDOM = require('react-dom');

import Footer from './templates/Footer.js';

var Main = React.createClass({
   render: function: function(){
      return (
         <div>
            Hello Me
            <Footer />
         </div>
      )
   }
});

ReactDOM.render(<Main />, document.getElementById('app'))
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
  1. Descargamos un template ( OnePageLove Free templates )
  2. Separamos el HTML en los futuros componentes
    1. top->down
  3. Convertimos los HTML en componentes
  4. Integramos en nuestro Main.js

Agregando datos

Recursos

  • Bullet One
  • Bullet Two
  • Bullet Three

gateando

By dax pablo

Made with Slides.com

gateando

  • 506

More from dax pablo