基底day01を反応させます

Vueのとは対照的に反応

何がモジュール化されて：コードの観点から、問題を分析するために、別のモジュールに分割、当社のプログラミングビジネスロジックは、開発された、これはコードの再利用を容易にすることができます。

コンポーネント化とは何か：UIの観点から問題を分析するために、ページが互いに独立のウィジェットの数に分割されますが、最後のページを達成する必要がある場合は、プロジェクトの開発と、コンポーネントは、より多くの手になります直接ステッチ来る既存のコンポーネントへの可能な、あなたはすぐにUIコンポーネントの再利用を容易にし、完全なアセンブリを、取得することができます。

コンポーネントのVueの実装方法：.vueテンプレートファイルは、ブラウザが認識しない、実行する前には、真のコンポーネントにプリコンパイルされます

あなたがコンポーネントを作成したい、の形で直接JSコード：コンポーネントの実装を反応させる方法

いくつかのコアコンセプトに反応します

仮想ドム（仮想ドキュメントオブジェクトモデル）

どのようなDOMの性質があることである：JS UIエレメントによって表されます。
DOM DOMおよび仮想違い：
- DOMは、ブラウザのJSが機能を提供し、我々は唯一の固定API制御を提供するために、ブラウザを使用することができますです。
- 仮想DOMは、ブラウザによって提供されていないが、ブラウザのDOMに似てますが、本質的に異なる、我々手動アナログ実装、。
なぜ仮想DOM：DOMノード効率的な更新を実現するために、

リアクトプロジェクトを作成します。

インストールパッケージに関連します

// 这个包是专门用来创建 React 组件, 组件生命周期等
npm install react -S
// 这个里面主要封装了和 DOM 操作相关的包, 比如要把组件渲染到页面上
npm install react-dom -S

// main.js 中导入相关的包
import React from 'react';
import ReactDOM from 'react-dom';
// createElement() 创建虚拟DOM对象, 至少接收3个参数
// 1. string 要创建的类型 2. 属性对象, 创建的元素身上有哪些属性 3. 后面可以放多个, 表示这个DOM对象的子节点
var myDiv = React.createElement('div', {id: 'this is div'}, '这是一个div');
// 1. 要渲染的DOM元素, 2. 要渲染到哪个位置
ReactDOM.render('myDiv', document.getElementById('app'));

使用および構文JSXの基本原則

あなたはDOM要素あまりにも多くの問題を作成するには、このメソッドを使用している場合は、それを見ることができる以上のことから、こんなに早く仮想DOM構造を定義する、公式の構文仕様は、コードのHTMLを書くのと同様のJSX、缶のjsファイルのセットを提供リアクト。

JSX（JSのXML準拠した構文）、JSX内部を実行している場合、このコードに似ていますが、HTMLは、ラベルに変換React.createElement()してから（JSXは、プログラマに優しいのシンタックスシュガーである）ページにレンダリング;フォーム

var myTitle = 'this is title';
// 如果需要使用 js 语法, 就用 {} 去解析
var myDiv = <div>
这是一个div
<h3 title={ mytitle }>JSX 真好用...</h3>
</div>

あなたは要素を追加したい場合はJSXでは、class属性を記述する必要がありますclassName。同様にラベル・タグがあるfor属性は、書き換えされなければならないhtmlForので、for classjsのキーワード属するすべて。

注：上記のコードは、JSファイルに直接使用することができない、あなたは、関連する構文変換ツールをインストールする必要があります

npm install babel-preset-react -D
// 在 .babelrc 文件中的 presets 项中, 添加 "react"
presets: ["react"]

最も基本的なコンポーネントの作成

コンストラクタを使用してコンポーネントを作成します

/**
 * 在 react 构造函数就是一个最基本的组件
 * 可以把组件的名称, 以HTML标签的形式引入页面中渲染组件
 * React在解析所有标签的时候, 是以标签的首字母区分的, 如果首字母小写, 按照普通的HTML标签解析, 如果首字母大写, 按照组件的形式解析
 */
var person = {
  name: 'ls',
  age: 22,
  address: '...'
};
function Hello (props) {
  // 如果什么都不渲染, return null
  return <div>
    <h3>这是通过组件渲染出来的标签</h3>
    {/* 如果想要接收外部的参数 必须显示的给组件定义一个props参数 */}
    <p>{ props.name }</p>
  </div>
}
ReactDOM.render(<div>
  {/* es6 中的属性扩散 */}
  <Hello { ...person }></Hello>
  {/* <Hello name = { person.name } age = { person.age }></Hello> */}
</div>, document.getElementById('app'));

クラスを使用してコンポーネントを作成します。

// Hello 继承自 React.Component
class Hello extends React.Component {
  constructor(props) {
    super(props);
    // 在组件的 constructor 构造器中, 不能使用this.props取值, 只能通过给constructor显示的加一个props参数才可以
    console.log(props.name)
  }
  // 内部必须有一个 render() 函数
  render () {
    // 必须return一个内容, 如果不需要就 return null
    return <div>
      <h3>这是通过 class 创建的组件</h3>
      // class内部不用定义 props参数, 可以直接通过 this. 的方式访问
      <p>{ this.props.name } -- { this.props.age }</p>
    </div>
  }
}
ReactDOM.render(<div>
  <Hello name="zs" age={20}></Hello>
</div>, document.getElementById('app'));

本質的に異なる2つの方法で部品上に作成されました。

コンポーネント（ステートレスコンポーネント）を使用して、関数コンストラクタが作成しました：

それに渡されたデータを受信するための内部状態のプライベートデータがありません、唯一の外部小道具ありません。

自分のライフサイクル機能なしで作成されたコンポーネントの機能

classキーワードを作成するためのコンポーネント（ステートフルなコンポーネント）を使用します：

内部小道具がデータを受信することに加えて、特殊なストレージがthis.state自身の私有財産データがあり、この状態では、読み書き可能です

これら二つの成分は、それを使用するどのような時に、その後ですか？

それは組み立てた状態での使用に適している場合には、それ自身のプライベートなデータを保存したり、ビジネス・ロジック・コンポーネントの異なる段階で異なるニーズを実行するコンポーネント必要がある場合、
外部小道具からの転送の成分のみが必要な場合は、固定されたページのレンダリングは、ステートレスコンポーネントに非常に適している;（サブアセンブリのライフサイクル機能の排除に起因し、速度が比較的速くなりますので）。

独立コンポーネント

JS / JSX文書、それらにコンストラクタ、およびそれまでに作成しexport default Helloたオブジェクトの露出の仕方を、

JSXファイル構成ローダー

module: {
  rules: [
    // 用 js 一样的loader 正则变化一下而已
    { test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ }
  ]
}

メインのインポートファイルの後に使用することができます