React.js

1

React

2013

1

Problem

1

Components

1

var HelloComponent = React.createClass({
    render: function render() {
        return React.createElement(
            "div", null,
            "Hello ",
            this.props.name
        );
    }
});

React.render(
    React.createElement(
        HelloComponent, 
        { name: "Igor" }
      ), 
    document.body
);

React Component

1

var HelloComponent = React.createClass({  
    render: function() {
        return <div>
            Hello {this.props.name}
        </div>;
    }
});

React.render(
  <HelloComponent name="Igor" />, 
  document.body
);

JSX

1

1

function FieldGroup({ id, label, help, ...props }) {
  return (
    <FormGroup controlId={id}>
      <ControlLabel>{label}</ControlLabel>
      <FormControl {...props} />
      {help && <HelpBlock>{help}</HelpBlock>}
    </FormGroup>
  );
}

const formInstance = (
  <form>
    <FieldGroup
      id="formControlsEmail"
      type="email"
      label="Email address"
      placeholder="Enter email"
    />
    <FieldGroup
      id="formControlsPassword"
      label="Password"
      type="password"
    />
  </form>
);

react-bootstrap

Virtual DOM

1

Re Render

1

State Manager

1

FLUX

1

Redux

1

Immutable JS

https://habrahabr.ru/post/260319/

1

Flow

1

// @flow
function bar(x: string): number {
  return x.length;
}
bar('Hello, world!');

Webpack

2

2

2

How it work

2

import { Button } from 'react-bootstrap';

import './style.css';

function render(params) {
  const view = require("./buttons.jade");
  ...
  return html;
}

if (__DEV__) {
  console.log('LOG');
  connectToSSH('#password')
}
  
import Hello from '~/components/Hello';

webpack.config.js

2

ENV

2

Extends

2

class WebpackConfig {
  getConfig() {}
}

class WebpackClientConfig extends WebpackConfig {
}

class WebpackServerConfig extends WebpackConfig {
}

github.com/isuvorov/lsk-build

WebpackConfig

2

getPreConfig() {
 return {
  context: this.resolvePath('src'),
  target: this.getTarget(),
  entry: this.getEntry(),
  resolve: this.getResolve(),
  output: this.getOutput(),
  module: this.getModule(),
  plugins: this.getPlugins(),
  cache: this.isDebug(),
  debug: this.isDebug(),
  stats: this.getStats(),
  postcss: (...args) => this.getPostcssModule(...args),
 }
}

github.com/isuvorov/lsk-build

Loaders

2

getLoaders() {
  return [
    this.getJsxLoader(),
    ...this.getCssLoaders(),
    {
      test: /\.json$/,
      loader: 'json-loader',
    },
    {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)(\?.+)?$/,
      loader: 'url-loader',
      query: {
        name: this.isDebug() ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
        limit: 10000,
      },
    },
    {
      test: /\.(eot|ttf|wav|mp3)(\?.+)?$/,
      loader: 'file-loader',
      query: {
        name: this.isDebug() ? '[path][name].[ext]?[hash]' : '[hash].[ext]',
      },
    },
  ]
}

CssLoaders

2

{
  test: /\.global\.css$/,
  loaders: [
    'isomorphic-style-loader',
    `css-loader?${JSON.stringify({
      sourceMap: this.isDebug(),
      modules: false,
      minimize: !this.isDebug(),
    })}`,
  ],
},
{
  test: /\.css$/,
  exclude: /(global.css)/,
  loaders: [
    'isomorphic-style-loader',
    `css-loader?${JSON.stringify({
      sourceMap: this.isDebug(),
      modules: true,
      localIdentName: this.isDebug() ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
      minimize: !this.isDebug(),
    })}`,
    'postcss-loader?pack=default',
  ],
},

Globals

2

  getGlobals() {
    return {
      'process.env.NODE_ENV': JSON.stringify(this.getEnv()),
      __ENV__: JSON.stringify(this.getEnv()),
      __DEV__: this.getEnv() === 'development',
      __PROD__: this.getEnv() === 'production',
    }
  }

  getTarget() {
    return 'web'
  }
  getEntry() {
    return './client.js'
  }
  getGlobals() {
    return {
      ...super.getGlobals(),
      __SERVER__: false,
      __CLIENT__: true,
      __BROWSER__: true,
    }
  }

PostCSS

3

PostCSS

3

Transforming styles with JS plugins

Everything is PLUGIN

3

Plugins

3

Plugins

3

postcss-simple-vars
postcss-animation
postcss-utilities
rucksack-css

postcss-custom-media

LostGrid

http://postcss.parts

NPM & React

4

4

react-overlays

react-css-modules

react-autosuggest

react-datepicker

react-tooltip

react-select

react-responsive

react-color

react-mdl

react-flip-move

markdown-it

react-player

immutable.js

redux, react-redux

mobx, mobx-react

react-storybook

react-bootstrap

react-router

classnames

react-intl

enzyme

react-dnd

react-icons

react-highcharts

NPM

5

Бочка дегтя

5

Styles

5

ES*

5

Webpack

6

Практика

Chrome

6

Chrome / react-developer-tools

Chrome / redux-devtools

Starter Kits

6

andrewhfarmer.com/starter-project

RSK

6

kriasoft/react-starter-kit