詳細JSX構文で反応

1、基本的な概念：

React使用JSXの代わりに、定期的にJavaScript。

JSXXML構文仕様JavaScript構文拡張。

JSX自然の構文：直接ではないJSXページにレンダリングが、最初の内部に変換createElementフォーム、その後、レンダリング。

2、JSXの利点：

• JSX それがコンパイルされたJavaScriptコードで最適化されているので、高速に実行。
• これは、タイプセーフである、あなたはコンパイル時にエラーを見つけることができます。
• 使用JSX簡単かつ迅速にテンプレートを書きます。

3、JSX文法の基礎：

JSX注：お勧めします{/* 这是注释 */}。

JSXクラスのクラス名が追加さ：必要className交換するとclass、htmlFor交換する属性を。labelfor

ではJSXDOMの作成時、すべてのノードは、ラップ独自のルート要素を持っている必要があります。

ではJSX、構文、ラベルが単一ラベルならば、それは自己閉鎖しなければなりません、ペアで現れなければなりません。

コード例：

const mydiv = <div>这是一个Div标签</div>;
ReactDOM.render(mydiv, document.getElementById('root'));

コンポーネント開発コード例の使用：

App.js コンポーネントファイルコード

import React from 'react';

class App extends React.Component{
  render(){
    return (
      <div>
        {1+1}
        <hr/>
        Hello，Reactjs！！
      </div>
    );
  }
}

export default App;

他のドキュメントで使用するJSX構文基準成分：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

4、JSXアプリケーション：

デジタルレンダリング

import React from 'react';
import ReactDOM from 'react-dom';

let a = 10;

ReactDOM.render(
    <div>{a}</div>
, document.getElementById('root'));

文字列をレンダリング

import React from 'react';
import ReactDOM from 'react-dom';

let str = 'hello react';

ReactDOM.render(
    <div>{str}</div>
, document.getElementById('root'));

レンダリングブール

import React from 'react';
import ReactDOM from 'react-dom';

let rel = true;

ReactDOM.render(
    <div>{rel ? '结果为真' : '结果为假'}</div>
, document.getElementById('root'));

プロパティ値をレンダリング

import React from 'react';
import ReactDOM from 'react-dom';

let title = "this is a div";

ReactDOM.render(
    <div title={title}>Hello React</div>
, document.getElementById('root'));

レンダリングラベルオブジェクト

import React from 'react';
import ReactDOM from 'react-dom';

const h1 = <h1>Hello React!</h1>;

ReactDOM.render(
    <div>
        {h1}
    </div>
, document.getElementById('root'));

レンダリングアレイ

import React from 'react';
import ReactDOM from 'react-dom';

const arr = [
    <h1>第1行</h1>,
    <h2>第2行</h2>,
];

ReactDOM.render(
    <div>
        {arr}
    </div>
, document.getElementById('root'));

通常の配列JSXの配列、およびページへのレンダリング

解决警告：リストの各子供はユニークな「キー」小道具を持っている必要があります。

この方法の一つ：

import React from 'react';
import ReactDOM from 'react-dom';

//原数组
const arr = ['html','css','vue'];
//新数组
const newArr = [];
//forEach()方法没有返回值
arr.forEach((item,index) => {
    const temp = <h2 key={index}>{item}</h2>
    newArr.push(temp);
});

ReactDOM.render(
    <div>
        {newArr}
    </div>
, document.getElementById('root'));

方法2：

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import './style.css';

//原数组
const arr = ['html','css','vue'];

ReactDOM.render(
    <div>
        {/* map()方法有返回值 */}
        {arr.map((item,index) => {
        return <h2 key={index}>{item}</h2>
        })}
    </div>
, document.getElementById('root'));