react+react-nativeハイブリッドアプリ開発--初めてです.

一、開発前準備
1、取り付けreact依存
プロジェクトのインストール依存

cnpm install react react-dom --save

cnpm install babel-preset-react --dev

プロファイルを変更します.babelrc:

{
	"presets":["evn","stage-0","react"]
}

2、jsxのための配置
webpack.co.nfig.jsにおいて、jsをjsxに修正しますか?

module:{
	rules:[
		{ test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/ }
	]
}

ここでプロジェクト開発前の準備が終わり、コード作成が開始されます.
二、知識説明:関数コンポーネントとクラスコンポーネント
3、関数コンポーネントとクラスコンポーネントの違い
propsの使用については、これらの2つのコンポーネントにいくつかの違いがあります.

props属性の違いを取得する

props属性値を読み書きする違い

stateの使用については、以下の違いがあります.

種類のコンポーネントの中には自分のプライベートstate(状態コンポーネントと呼ばれる)があり、関数コンポーネントの中にはプライベートstate(無状態コンポーネントと呼ばれる)がない

.
ライフサイクルについては、以下の違いがあります.

種類のコンポーネントには自分のライフサイクル関数があります.関数コンポーネントには

がありません.
3.1 propsの違いを取得する
関数コンポーネントでは、プロpsを使用するには、まず定義する必要があります.パラメータにpropsを書き込みます.

function MyCom(props) {
	return <p>{props.name}</p>
}

クラスコンポーネントの中で、propsを使って定義を必要としないで、直接にthisによって受け取ることができます.

class MyCom extends React.Component{
	render() {
		return <p>{this.props.name}</p>
	}
}

3.2読み書きの違い
propsに対しては、両方とも読み取り専用です.
関数構成要素では、プロps属性値に対して読み取り専用の(read only)がクラス構成要素であり、props属性値に対して読み取り専用の(read only)である.
4、関数コンポーネントとクラスコンポーネントの使用シーン
1つのコンポーネントがプライベートデータを持つ必要がある場合、または異なる段階で異なるトラフィックロジック(すなわちライフサイクルが必要)を実行する必要がある場合、クラスコンポーネントを使用するのは適切である.
一つのコンポーネントが外部から伝わってくるpropsだけを必要とする場合、固定されたページ構造をレンダリングするなら、関数コンポーネントを使用するのが適切です.