重回react，自己搭建类似react-boilerplate框架

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 将vue与id为app的DOM节点进行绑定
new Vue({
  render: h => h(App),
}).$mount('#app')

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

// 将vue与id为app的DOM节点进行绑定
// 且注入router路由和store状态管理
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// 将react与id为root的DOM节点进行绑定
ReactDOM.render(<App />, document.getElementById('root'));

// PWA模式不使用Service Worke
// 默认不使用，如果想使用，改成register()即可
serviceWorker.unregister();

/**
 * 主入口
 */

// redux-saga需要es6 generator生成器函数支持
import '@babel/polyfill';

// 导入的第三方库
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router/immutable';
import FontFaceObserver from 'fontfaceobserver';
import history from 'utils/history';
import 'sanitize.css/sanitize.css';

// 导入根组件
import App from 'containers/App';

// 导入国际化Provider组件
import LanguageProvider from 'containers/LanguageProvider';

// 导入favicon图标和.htaccess分布式文件
import '!file-loader?name=[name].[ext]!./images/favicon.ico';
import 'file-loader?name=.htaccess!./.htaccess'; // eslint-disable-line import/extensions

// 导入配置的store
import configureStore from './configureStore';

// 导入i18国际化信息
import { translationMessages } from './i18n';

// 创建自定义web字体Open Sans对象，@font-face
const openSansObserver = new FontFaceObserver('Open Sans', {});

// 当Open Sans字体加载后，将该字体加入到body标签内
openSansObserver.load().then(() => {
  document.body.classList.add('fontLoaded');
});

// 创建带管理会话历史记录的store，获取根节点
const initialState = {};
const store = configureStore(initialState, history);
const MOUNT_NODE = document.getElementById('app');

// 声明一个render渲染函数
// 将react与id为app的DOM节点进行绑定
// 将页面包裹三层、一层是state、二层是国际化、三层是会话历史记录
// 换句话说App的所有子组件默认都可以拿到state、i18n、history
// 可以直接在任何子组件内使用state、i18n、history
const render = messages => {
  ReactDOM.render(
    <Provider store={store}>
      <LanguageProvider messages={messages}>
        <ConnectedRouter history={history}>
          <App />
        </ConnectedRouter>
      </LanguageProvider>
    </Provider>,
    MOUNT_NODE,
  );
};

if (module.hot) {
  // 实现热更新
  // 加载i18n、App，销毁app的DOM节点
  // 重新渲染react组件和国际化
  module.hot.accept(['./i18n', 'containers/App'], () => {
    ReactDOM.unmountComponentAtNode(MOUNT_NODE);
    render(translationMessages);
  });
}

// 如果当前浏览器不支持国际化
// 则手动导入国际化信息，重新渲染
if (!window.Intl) {
  new Promise(resolve => {
    resolve(import('intl'));
  })
    .then(() =>
      Promise.all([
        import('intl/locale-data/jsonp/en.js'),
        import('intl/locale-data/jsonp/de.js'),
      ]),
    )
    .then(() => render(translationMessages))
    .catch(err => {
      throw err;
    });
} else {
  render(translationMessages);
}

// 如果是生产环境，使用ServiceWorker和AppCache实现离线缓存体验
if (process.env.NODE_ENV === 'production') {
  require('offline-plugin/runtime').install();
}

const zhLocaleData = require('react-intl/locale-data/zh');
...
const zhTranslationMessages = require('./translations/zh.json');
...
addLocaleData(zhLocaleData);
...
const DEFAULT_LOCALE = 'zh';
const appLocales = [
  'zh',
  'en',
  'de',
];

/*
 * Footer 信息
 * 包含Footer组件所有国际化内容
 */
import { defineMessages } from 'react-intl';

// 声明默认作用域，名称与translations目录下的json对应
export const scope = 'boilerplate.components.Footer';

// 定义该组件用到的文案
// 自定义文案名，值为id和defaultMessage组成的对象
// 注意：defaultMessage默认信息是在读取不到配置信息时展示的文案
// react-intl首先去加载translations下面的zh.json，如果读取值为空，则展示defaultMessage的内容
// 先translations，再defineMessages
export default defineMessages({
  licenseMessage: {
    id: `${scope}.license.message`,
    defaultMessage: 'This project is licensed under the MIT license.',
  },
  authorMessage: {
    id: `${scope}.author.message`,
    defaultMessage: `
      Made with love by {author}.
    `,
  },
});

import React from 'react';
import { FormattedMessage } from 'react-intl';

import A from 'components/A';
import LocaleToggle from 'containers/LocaleToggle';
import Wrapper from './Wrapper';
import messages from './messages';

// Wrapper相当于footer，FormattedMessage格式化信息解构
// FormattedMessage属性值有id、defaultMessage、values，
// values是声明在defaultMessage中使用的值
// ...ES6语法，解构出定义后的文案名
function Footer() {
  return (
    <Wrapper>
      <section>
        <FormattedMessage {...messages.licenseMessage} />
      </section>
      <section>
        <LocaleToggle />
      </section>
      <section>
        <FormattedMessage
          {...messages.authorMessage}
          values={{
            author: <A href="https://twitter.com/mxstbr">Max Stoiber</A>,
          }}
        />
      </section>
    </Wrapper>
  );
}

export default Footer;

import React from 'react';
import { defineMessages, FormattedMessage } from 'react-intl';

import A from 'components/A';
import LocaleToggle from 'containers/LocaleToggle';
import styled from 'styled-components';

const Wrapper = styled.footer`
  display: flex;
  justify-content: space-between;
  padding: 3em 0;
  border-top: 1px solid #666;
`;

const messages = defineMessages({
  licenseMessage: {
    id: `boilerplate.components.Footer.license.message`,
    defaultMessage: 'This project is licensed under the MIT license.',
  },
  authorMessage: {
    id: `boilerplate.components.Footer.author.message`,
    defaultMessage: `
      Made with love by {author}.
    `,
  },
});


function Footer() {
  return (
    <Wrapper>
      <section>
        <FormattedMessage {...messages.licenseMessage} />
      </section>
      <section>
        <LocaleToggle />
      </section>
      <section>
        <FormattedMessage
          {...messages.authorMessage}
          values={{
            author: <A href="https://twitter.com/mxstbr">Max Stoiber</A>,
          }}
        />
      </section>
    </Wrapper>
  );
}

export default Footer;

//多个export导出的导入
export const defineMessages = () => { xxx }
export const FormattedMessage = () => { xxx }

//方案一，{xxx}
import { defineMessages, FormattedMessage } from 'react-intl';

//方案二，别名
import * as reactIntl from 'react-intl';
//使用
reactIntl.defineMessages
reactIntl.FormattedMessage

//单个export default导出的导入
export default styled = xxx

//导入，无别名
import styled from 'styled-components';


// 函数的别名
import { defineMessages as define , FormattedMessage as Message } from 'react-intl';
// 使用
define
Message

/**
 * App
 * 所有页面的
 */

import React from 'react';
import { Helmet } from 'react-helmet';
import styled from 'styled-components';
// React Router里面提供的API后面会有详细说明
import { Switch, Route } from 'react-router-dom';

import HomePage from 'containers/HomePage/Loadable';
import FeaturePage from 'containers/FeaturePage/Loadable';
import NotFoundPage from 'containers/NotFoundPage/Loadable';
import Header from 'components/Header';
import Footer from 'components/Footer';
// 导入全局样式
import GlobalStyle from '../../global-styles';

const AppWrapper = styled.div`
  max-width: calc(768px + 16px * 2);
  margin: 0 auto;
  display: flex;
  min-height: 100%;
  padding: 0 16px;
  flex-direction: column;
`;

export default function App() {
  return (
    <AppWrapper>
      <Helmet
        titleTemplate="%s - React.js Boilerplate"
        defaultTitle="React.js Boilerplate"
      >
        <meta name="description" content="A React.js Boilerplate application" />
      </Helmet>
      <Header />
      // Switch 只会渲染一个子元素
      // 根据路由渲染对应的 Route
      // exact 完全匹配，如/a，/a可以访问，/a/b不可以访问
      // strict 严格匹配，如/a，/a和/a/b都可以访问
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/features" component={FeaturePage} />
        <Route path="" component={NotFoundPage} />
      </Switch>
      <Footer />
      <GlobalStyle />
    </AppWrapper>
  );
}

import React from 'react';
import { FormattedMessage } from 'react-intl';

import A from './A';
import Img from './Img';
import NavBar from './NavBar';
import HeaderLink from './HeaderLink';
import Banner from './banner.jpg';
import messages from './messages';

class Header extends React.Component {
  render() {
    return (
      <div>
        <A href="https://twitter.com/mxstbr">
          <Img src={Banner} alt="react-boilerplate - Logo" />
        </A>
        <NavBar>
          <HeaderLink to="/">
            <FormattedMessage {...messages.home} />
          </HeaderLink>
          <HeaderLink to="/features">
            <FormattedMessage {...messages.features} />
          </HeaderLink>
        </NavBar>
      </div>
    );
  }
}

export default Header;

/*
 * HomePage
 * 简单说下结构
 */

/**-------导入部分------**/
/*定义组件，需继承React.Component或React.PureComponent*/
import React from 'react';
/**定义组件的属性类型和默认属性**/
import PropTypes from 'prop-types';
/**定义当前页面head**/
import { Helmet } from 'react-helmet';
/**导入格式化信息方法，提供国际化**/
import { FormattedMessage } from 'react-intl';
/**连接组件与store**/
import { connect } from 'react-redux';
/**组装函数，增强store功能**/
import { compose } from 'redux';
/**创建selector对象**/
import { createStructuredSelector } from 'reselect';
/**注入reducer**/
import injectReducer from 'utils/injectReducer';
/**注入saga**/
import injectSaga from 'utils/injectSaga';
/**导入App/selectors里面的方法**/
import {
  makeSelectRepos,
  makeSelectLoading,
  makeSelectError,
} from 'containers/App/selectors';
/**导入各类组件**/
import H2 from 'components/H2';
import ReposList from 'components/ReposList';
import AtPrefix from './AtPrefix';
import CenteredSection from './CenteredSection';
import Form from './Form';
import Input from './Input';
import Section from './Section';
/**导入国际化信息**/
import messages from './messages';
/**导入actions方法**/
import { loadRepos } from '../App/actions';
import { changeUsername } from './actions';
/**导入当前页面selectors里面的方法**/
import { makeSelectUsername } from './selectors';
/**导入当前页面reducer**/
import reducer from './reducer';
/**导入当前页面saga**/
import saga from './saga';

/**------------定义HomePage组件-------------**/
class HomePage extends React.PureComponent {
  /**
   * when initial state username is not null, submit the form to load repos
   */
  componentDidMount() {
    if (this.props.username && this.props.username.trim().length > 0) {
      this.props.onSubmitForm();
    }
  }

  render() {
    const { loading, error, repos } = this.props;
    const reposListProps = {
      loading,
      error,
      repos,
    };

    return (
      <article>
        <Helmet>
          <title>Home Page</title>
          <meta
            name="description"
            content="A React.js Boilerplate application homepage"
          />
        </Helmet>
        <div>
          <CenteredSection>
            <H2>
              <FormattedMessage {...messages.startProjectHeader} />
            </H2>
            <p>
              <FormattedMessage {...messages.startProjectMessage} />
            </p>
          </CenteredSection>
          <Section>
            <H2>
              <FormattedMessage {...messages.trymeHeader} />
            </H2>
            <Form onSubmit={this.props.onSubmitForm}>
              <label htmlFor="username">
                <FormattedMessage {...messages.trymeMessage} />
                <AtPrefix>
                  <FormattedMessage {...messages.trymeAtPrefix} />
                </AtPrefix>
                <Input
                  id="username"
                  type="text"
                  placeholder="mxstbr"
                  value={this.props.username}
                  onChange={this.props.onChangeUsername}
                />
              </label>
            </Form>
            <ReposList {...reposListProps} />
          </Section>
        </div>
      </article>
    );
  }
}

/**定义当前页面的props属性**/
HomePage.propTypes = {
  loading: PropTypes.bool,
  error: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
  repos: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
  onSubmitForm: PropTypes.func,
  username: PropTypes.string,
  onChangeUsername: PropTypes.func,
};

export function mapDispatchToProps(dispatch) {
  return {
    onChangeUsername: evt => dispatch(changeUsername(evt.target.value)),
    onSubmitForm: evt => {
      if (evt !== undefined && evt.preventDefault) evt.preventDefault();
      dispatch(loadRepos());
    },
  };
}

const mapStateToProps = createStructuredSelector({
  repos: makeSelectRepos(),
  username: makeSelectUsername(),
  loading: makeSelectLoading(),
  error: makeSelectError(),
});

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'home', reducer });
const withSaga = injectSaga({ key: 'home', saga });

/**------------导出HomePage组件-------------**/
export default compose(
  withReducer,
  withSaga,
  withConnect,
)(HomePage);

import React, { Component } from 'react';
class Simple extends Component {
    handleClick() { ... }
    render() {
        const { title } = this.state
        return (
        <div>
            <p style={{fontSize:'20px',color:'#FFF'}}>{ title }</p>
            <button style={{ marginTop:'40px' }} onClick={this.handleClick.bind(this)}>点击</button>
        </div>
        )
    }
}
export default Simple

const Simple = {
    title:'xxx',
    data:{'xxx':'xxx'},
    onClick:function(){
        console.log(this.title)
    }
}
const handleClick = Simple.onClick;
handleClick();

const Simple = {
    title:'xxx',
    data:{'xxx':'xxx'},
    onClick:function(){
        console.log(this.title)
    }
}
const handleClick = Simple.onClick.bind(Simple);
handleClick();

import React, { Component } from 'react';
class Simple extends Component {
    handleClick() { ... }
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this)
    }
    render() {
        return (
            <button onClick={this.handleClick}>点击</button>
        )
    }
}
export default Simple

const Simple = {
    title:'xxx',
    data:{'xxx':'xxx'},
    onClick:function(){
        console.log(this.title)
    }
}
const handleClick = Simple.onClick();
handleClick;

import React, { Component } from 'react';
import store from './store';
class Simple extends Component {
    state = store.getState()
    handleClick = ()=> { 
        //1.创建action，action是一个object对象
        const action = {
            type: 'set_change_title', //告诉store做啥事
            value: '已点击' //给store值
        }
        //2.通过dispatch传给store
        store.dispatch(action)
    }
    render() {
        const { title } = this.state
        return (
        <div className="App">
            <p>{title}</p>
            <button onClick={this.handleClick}>点击</button>
        </div>
        )
    }
}
export default Simple

import React, { Component } from 'react';
import store from './store';
class Simple extends Component {
    state = store.getState()
    constructor(props) {
        //5.让组件订阅store，有情况，则通知组件更新
        store.subscribe(()=>{
            this.setState(store.getState())
        })
    }
    handleClick = ()=> { ... }
    render() {
        const { title } = this.state
        return (
        <div className="App">
            <p>{title}</p>
            <button onClick={this.handleClick}>点击</button>
        </div>
        )
    }
}
export default Simple

import { createStore } from 'redux';
const store = createStore();
export default store;

import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;

import React, { Component } from 'react';
import Simple from './contianers/simple';
import store from './store';
import { Provider } from 'react-redux';

class App extends Component {
  render() {
    return (
    <Provider store={store}>
          <Simple/>
    </Provider>
    );
  }
}

export default App;

import React, { Component } from 'react';
import { connect } from 'react-redux';
class Simple extends Component {
    render() {
        const { title } = this.props
        return (
            <div className="App">
                <p>{title}</p>
                <button onClick={this.props.handleClick}>点击</button>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
  return {
    title: state.title
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
        handleClick () { 
            const action = {
                type: 'set_change_title',
                value: '已点击'
            }
            dispatch(action)
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Simple)

import React from 'react';
import { connect } from 'react-redux';
const Simple = (props) => {
    return (
        <div className="App">
            <p>{props.title}</p>
            <button onClick={props.handleClick}>点击</button>
        </div>
    )
}
const mapStateToProps = (state) => {
  return {
    title: state.title
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
        handleClick () { 
            const action = {
                type: 'set_change_title',
                value: '已点击'
            }
            dispatch(action)
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Simple)

import { combineReducers } from 'redux';
import simpleReducer from '../containers/Simple/reducer';

const reducer = combineReducers({
  simple: simpleReducer
})

export default reducer;

import * as CONST from './constants';
export function setTitle(title) {
  return {
     type: CONST.SET_CHANGE_TITLE,
     value: title
  };
}

import React from 'react';
import { connect } from 'react-redux';
import { setTitle } from './actions'
const Simple = (props) => {
    return (
        <div className="App">
            <p>{props.title}</p>
            <button onClick={props.handleClick}>点击</button>
        </div>
    )
}
const mapStateToProps = (state) => {
  return {
    title: state.simple.title
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
        handleClick () { 
            const action = setTitle('已点击')
            dispatch(action)
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Simple)

//使用redux中的applyMiddleware，将redux-thunk注入到store中
import { createStore ,applyMiddleware } from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk';
const middlewares = [
    thunk
];
const store = createStore(reducer, applyMiddleware(...middlewares));
export default store;