光纤 === guāng xiān

guāng-xiān.md

光纤 === guāng xiān

https://chinese.yabla.com/chinese-english-pinyin-dictionary.php?define=%E5%85%89%E7%BA%A4%E6%8E%A5%E5%8F%A3

http://cidian.xpcha.com/23860nbzf3e.html

• A .元素是对在屏幕上显示的DOM节点或其他组件简单的对象描述；
• B .元素是React中最小基本单位；
• C .组件是由元素构成的；
• D .元素数据结构是普通对象，而组件数据结构是类或纯函数；

• A .React是一个用于构建用户界面的JavaScript库；
• B .React主要用于构建UI；
• C .React是一款MVC框架；
• D .React起源于Facebook的内部项目；

https://yq.aliyun.com/articles/80248

learning-react

https://github.com/yiminghe

https://github.com/react-component/calendar
http://react-component.github.io/calendar/

https://github.com/yiminghe/css-animation

https://github.com/yiminghe/react-scoped-style

https://github.com/yiminghe/react

https://github.com/yiminghe/learning-react

http://yiminghe.me/learning-react/tutorial/zh-cn/advanced.html#/4/1

https://facebook.github.io/react/

http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/

https://github.com/react-component

react-intl.js

https://github.com/yiminghe/learning-react/blob/master/examples/react-intl.js

https://github.com/yiminghe/learning-react/blob/master/examples/react-intl.html

import 'normalize.css';

import qs from 'qs';
import { addLocaleData, IntlProvider, FormattedMessage } from 'react-intl';
import React from 'react';
import ReactDOM from 'react-dom';
import scriptjs from 'scriptjs';

const locale = qs.parse(location.search && location.search.slice(1)).locale || 'en-US';
const localePrefix = locale.slice(0, locale.indexOf('-'));

const scripts = [];

if (!window.Intl) {
  // should output by server by <script>
  scripts.push(`https://as.alipayobjects.com/g/component/intl/1.0.1/Intl.js`);
  scripts.push(`https://as.alipayobjects.com/g/component/intl/1.0.1/locale-data/jsonp/en-US.js`);
  // the following should be output by server template conditionally by <script>
  if (locale !== 'en-US') {
    scripts.push(`https://as.alipayobjects.com/g/component/intl/1.0.1/locale-data/jsonp/${locale}.js`);
  }
  // end
}
// should output by server by <script>
scripts.push(`https://as.alipayobjects.com/g/component/react-intl/2.0.0/locale-data/en.js`);
// the following should be output by server template conditionally by <script>
if (localePrefix !== 'en') {
  scripts.push(`https://as.alipayobjects.com/g/component/react-intl/2.0.0/locale-data/${localePrefix}.js`);
}
// end

const ready = () => {
  addLocaleData(window.ReactIntlLocaleData[localePrefix]);

  window.app = {
    // output by server conditional
    'zh-Hans-CN': {
      'app.zh': '选择中文',
      'app.en': '选择英文',
    },
    'en-US': {
      'app.zh': 'choose chinese',
      'app.en': 'choose english',
    },
  };

  const defaultApp = window.app['en-US'];

  const Test = React.createClass({
    render() {
      return (<div>
        <p>
          npm install react-intl@2.0.0
        </p>
        <p>
          <a href="?locale=en-US"><FormattedMessage
            id="app.en"
            defaultMessage={defaultApp['app.en']}
          /></a>
        </p>
        <p>
          <a href="?locale=zh-Hans-CN"><FormattedMessage
            id="app.zh"
            defaultMessage={defaultApp['app.zh']}
          /></a>
        </p>
      </div>);
    },
  });

  ReactDOM.render(
    <IntlProvider
      locale={locale}
      messages={window.app[locale] || defaultApp}
    >
      <Test />
    </IntlProvider>,
    document.getElementById('__react-content'));
};

if (scripts.length) {
  scriptjs(scripts, ready);
} else {
  ready();
}