React CSS for job 2017

react-css-for-job-2017.md

React CSS for job 2017

https://gist.github.com/xgqfrms-GitHub/bcd7b957a6d581c644abda07fcf79473/

安装 React CSS Module & React

https://github.com/facebook/react
https://facebook.github.io/react/docs/installation.html#creating-a-single-page-application
https://facebook.github.io/react/docs/installation.html#adding-react-to-an-existing-application

$ npm i -g create-react-app
> create-react-app xyz-react-app & cd xyz-react-app & npm start

> create-react-app xyz-react-app
> cd xyz-react-app & npm start

$ yarn init
$ yarn add react react-dom

$ npm init
$ npm i -S react react-dom

https://webpack.js.org/guides/get-started/
https://webpack.js.org/guides/installation/
https://www.npmjs.com/package/webpack
https://github.com/webpack/webpack

https://lodash.com/
https://www.npmjs.com/package/lodash
https://github.com/lodash/lodash

http://redux.js.org/
https://www.npmjs.com/package/redux
https://github.com/reactjs/redux/

$ npm i -D style-loader css-loader sass-loader node-sass webpack
$ npm i -S react react-dom redux react-router lodash


$ npm install --save-dev webpack
$ npm install --save lodash
$ npm install --save redux

安装 babel for ES6-to-ES5

# babel-preset-es2015

$ yarn init
$ yarn add babel-loader babel-core babel-preset-es2015 babel-preset-react --dev


$ npm init
$ npm i -D babel-loader babel-core babel-preset-es2015 babel-preset-react

Web 安装 react-router-dom

https://reacttraining.com/react-router/
https://www.npmjs.com/package/react-router
https://www.npmjs.com/package/react-router-dom

https://github.com/ReactTraining/react-router/tree/master/packages/react-router
https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom

$ npm install --save react-router
$ npm install --save react-router-dom


$ npm i -S react-router-dom@next

# or

$ yarn add react-router-dom@next

webpack.config.js

development & sourceMap

    {
        test: /\.scss$/,
        loaders: [
            'style?sourceMap',
            'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
            'resolve-url',
            'sass?sourceMap'
        ]
    }

production

    {
        test: /\.scss$/,
        loaders: [
            'style',
            'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
            'resolve-url',
            'sass'
        ]
    }

Class Composition

https://github.com/gajus/react-css-modules#class-composition

https://glenmaddern.com/articles/css-modules

.box {
    width: 100px;
    height: 100px;
}

.empty {
    composes: box;
    background: #4CAF50;
}

.full {
    composes: box;
    background: #F44336;
}

===

.empty {
    width: 100px;
    height: 100px;
    background: #4CAF50;
}

.full {
    width: 100px;
    height: 100px;
    background: #F44336;
}

https://github.com/gajus/react-css-modules/issues/218

css-modules/css-modules#218

https://gist.github.com/xgqfrms-GitHub/fe74994dfa2e8bba14b0a6412217f154

Class Composition Using CSS Preprocessors

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#extend

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_

@@extend

# % === placeholder

%box {
    width: 100px;
    height: 100px;
}

.box-empty {
    @extend %box;
    background: #4CAF50;
}

.box-full {
    @extend %box;
    background: #F44336;
}

===

.box-empty,
.box-full {
    width: 100px;
    height: 100px;
}

.box-empty {
    background: #4CAF50;
}

.box-full {
    background: #F44336;
}

@@extend

@mixin box {
    width: 100px;
    height: 100px;
}

.box-empty {
    @include box;
    background: #4CAF50;
}

.box-full {
    @include box;
    background: #F44336;
}

===

.box-empty {
    width: 100px;
    height: 100px;
    background: #4CAF50;
}

.box-full {
    width: 100px;
    height: 100px;
    background: #F44336;
}

more coming soon ...

https://github.com/gajus/react-css-modules

Airbnb React/JSX Style Guide

https://gist.github.com/xgqfrms-GitHub/b95f1824f2ea5a2e28b09dff6fd191bc

Airbnb React/JSX 编码规范 🇨🇳 zh-CN & zh-Hans

https://github.com/ufo-github/javascript/blob/master/react/zh-CN.md

https://gist.github.com/xgqfrms-GitHub/b95f1824f2ea5a2e28b09dff6fd191bc

https://github.com/ufo-github/javascript/blob/master/react/zh-CN.md

React

https://facebook.github.io/react/docs/react-api.html
https://facebook.github.io/react/docs/react-api.html#react.purecomponent
https://facebook.github.io/react/docs/react-api.html#react.component
https://facebook.github.io/react/docs/react-component.html

facebook/react#8870

text/babel

react-cli

https://github.com/facebookincubator/create-react-app
https://github.com/facebookincubator/create-react-app#getting-started

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component

import React, { Component } from 'react';

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap
https://react-bootstrap.github.io/

Setup a React Environment

https://gist.github.com/xgqfrms-GitHub/5862f5885acd10a956a72b14ee1c5f96