ReactJS a partir do zero

0_setup.md

Requisito: io.js

instalar nvm

curl https://raw.githubusercontent.com/creationix/nvm/v0.23.3/install.sh | bash

instalar io.js

nvm install iojs
iojs --version

Setup de um projeto em branco

mkdir myproject && cd myproject
npm init
npm install -D babel
npm install -D [email protected]
touch index.js && mkdir tutorial && touch tutorial/1.js

Copie os arquivos index.js e tutorial/1.js.

para executar

node . 1

troque 1 por 2, 3, 4, 5, 6, 7 para rodar os outros exemplos

Listando as funções da biblioteca React

• tutorial/1.js

Gerando HTML

• tutorial/2.js
• tutorial/3.js

Primeiros componentes

• tutorial/4.js
• tutorial/5.js

Uma página HTML completa

• tutorial/6.js

Criar um componente na página (front-end)

• tutorial/7.js

Task manager / build-system (npm scripts)

bundler (browserify + babelify)

npm install -D browserify babelify

package.json

  "scripts": {
    "mkdir": "mkdir -p ./dist/www/js",
    "html": "node . 6 > ./dist/www/index.html",
    "bundle": "browserify tutorial/7.js -t babelify --no-bundle-external --outfile ./dist/www/js/main.js",
    "bundle:vendors": "browserify --require react --outfile ./dist/www/js/vendors.js",
    "pretest": "npm run mkdir",
    "test": "npm run html & npm run bundle & npm run bundle:vendors"
  },

npm run mkdir
npm run bundle
npm run bundle:vendors
npm run html

ou simplesmente

npm run test

---

JSX: uma notação alternativa

transform para browserify

npm install -D reactify

editar a linha do package.json

"bundle": "browserify tutorial/8.jsx -t babelify -t reactify --no-bundle-external --outfile ./dist/www/js/main.js",

exemplos de componentes 4, 5, 6 escritos em JSX

• tutorial/8.jsx

1.js

import React from 'react';

console.log(React);

2.js

import {
    createElement,
    renderToStaticMarkup
} from 'react';

var a = createElement('p', null, 'A'),
    b = createElement('div', {className: 'B'}, a);

console.log(renderToStaticMarkup(b));

3.js

import {
    DOM,
    renderToString
} from 'react';

var hello = DOM.div(
        {className: 'hello'},
        DOM.p(null, 'Hello'),
        DOM.p(null, 'World')
    );

console.log(html(
    renderToString(hello)
));

4.js

import {
    createElement,
    renderToStaticMarkup
} from 'react';

var Hello = function(){
    this.render = function(){
        return createElement('p', null, `Hello ${this.props.msg}`);
    };
};

//escreve apenas se tiver sido carregado direto do index.js
if ((module.parent) &&
    (module.parent.parent === null)){
    console.log(renderToStaticMarkup(
        createElement(Hello, { msg: 'World'})
    ));
}

//exporta o componente Hello como um módulo
export default Hello;

5.js

import {
    createElement,
    DOM,
    renderToStaticMarkup
} from 'react';

import Hello from './4';

class List {
    render() {
        var firstItem = DOM.li(null, DOM.p(null, 'First!')),
            remainingItems = this.props.items.map(
                (item) => DOM.li(null, item)
            );
        return DOM.ul(null, firstItem, ...remainingItems);
    }
}

var helloA = createElement(Hello, {msg:'Alice'}),
    helloB = createElement(Hello, {msg:'Bob'}),
    helloList = createElement(List, {items: [helloA, helloB]}),
    body = DOM.body(null, helloList);

// console.log(html(renderToStaticMarkup(body) ) );
console.log(renderToStaticMarkup(body) );

6.js

import {
    createElement,
    DOM,
    renderToStaticMarkup
} from 'react';

var title = "Tutorial ReactJS",
    js = [
        './js/vendors.js',
        './js/main.js'
    ];

class HTMLPage {
    render() {
        var lang = (this.props.lang || 'en'),
            charset = (this.props.charSet || 'utf-8'),
            title = (this.props.title || 'Untitled'),
            js = (this.props.js || []),
            scriptTags = js.map(
                (src) => DOM.script({src: src})
            );
        return DOM.html({lang: lang},
            DOM.head(null,
                DOM.meta({charSet: charset}),
                DOM.title(null, title)
            ),
            DOM.body(null, ...scriptTags)
        );
    }
}

console.log(renderToStaticMarkup(
    createElement(HTMLPage,{
        title: title,
        js: js
    })
));

7.js

import {
    createElement,
    render
} from 'react';

import Hello from './4';

render(
    createElement(Hello, {msg: 'Browser'}),
    document.body
);

8.jsx

import React from 'react';

class HTMLPage {
    render() {
        var lang = (this.props.lang || 'en'),
            charset = (this.props.charSet || 'utf-8'),
            title = (this.props.title || 'Untitled'),
            js = (this.props.js || []),
            scriptTags = js.map( (src) => (<script src={src}/>) );
        return (
            <html lang={lang}>
                <head>
                    <meta charSet={charset} />
                    <title>{title}</title>
                </head>
                <body>
                    {scriptTags}
                </body>
            </html>
        );
    }
}

class List {
    render() {
        var firstItem = (<li><p>First!</p></li>),
            remainingItems = this.props.items.map(
                (item) => <li>{item}</li>
            );
        return (
            <ul>
                {firstItem}
                {remainingItems}
            </ul>
        );
    }
}

var Hello = function(){
    this.render = function(){
        return (
            <p>Hello {this.props.msg}</p>
        );
    };
};


React.render(
    <div>
        <List items={
            [
                <Hello msg="Alice"/>,
                <Hello msg="Bob"/>
            ]
        }/>
        <textarea
            value={React.renderToStaticMarkup(<HTMLPage/>)}
            />
    </div>
    ,
    document.body
);

index.js

'use strict';
require('babel/register');
// module.exports = require('./tutorial/1');
// module.exports = require('./tutorial/2');
// module.exports = require('./tutorial/3');
// module.exports = require('./tutorial/4');
// module.exports = require('./tutorial/5');
// module.exports = require('./tutorial/6');
// module.exports = require('./tutorial/7');
module.exports = require(`./tutorial/${process.argv[2]}`);