この記事は私が React を学習していたときに書いた学習メモなので、ここに記録して共有します。jsx言語を中心に紹介する2回目の記事です。

jsx定義

jsx の正式名は、JavaScript XML 言語です。

jsx は、react で定義された XML に似た JS 拡張構文、JavaScript+XML

jsx 構文

1. 仮想 DOM を定義する場合は、引用符を記述しないでください。

2. JS 式をタグに混在させる場合は、{} で囲みます。

3. スタイルのクラス名を指定するには、class の代わりに className を使用します。

4. インラインスタイルは、 style={ {key: "value"}} の形式で記述する必要があります。

5. ルートタグは 1 つだけ存在できます

6. ラベルは閉じていなければなりません

7. ラベルの頭文字問題

(1) 先頭文字が小文字の場合、ラベルはHTML上の同名の要素に変換され、HTML内に同名の要素が存在しない場合はエラーとなります。

(2) 最初の文字が大文字の場合、react は対応するコンポーネントをレンダリングしますが、コンポーネントが定義されていない場合はエラーが報告されます。

コード例は次のとおりです。

<!-- 准备好容器 -->
    <div id="test"></div>

<!-- 引入react库，以下依次为核心库，操作dom的库和babel（将jsx转为js的库），此顺序不可有错误 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">//写为babel格式，否则识别为普通js文件
        const myId = "React"
        const myData = 'Hello,React'
        //1.创建虚拟dom,只能有一个跟标签，且标签必须闭合
        const VDOM = (//标签混入js表达式时需要用{}括起来,使用className给标签添加class名字,内联样式，要用style={
   
   {key:"value"}}的形式写
            <div>
                <h1 id={myId.toLocaleLowerCase()} className="title">
                    <span style={
   
   { color: 'red' }}>{myData.toLocaleLowerCase()}</span>
                </h1>
                <h1 id={myId.toUpperCase()} className="title">
                    <span style={
   
   { color: 'red' }}>{myData.toUpperCase()}</span>
                </h1>
                <input type="text"></input>
            </div>
        )


        //2.渲染dom到页面，就是根据虚拟dom生成真实dom
        ReactDOM.render(VDOM, document.getElementById('test'))//此api是将dom节点塞入容器中，所以第一个参数是dom名称，第二个是js原生方法拿取容器id

効果は次のとおりです。

jsx の小さな演習

React を使用して小さなケースを作成し、配列内のデータを走査してページ上にレンダリングします。

配列 const data = ['Angular','React','Vue'] を書き込み、li を使用してデータを ul に運び、map() を使用してデータを走査します。

js式とjsステートメント

js 式を使用する場合は、{} で囲む必要がありますが、js 式と js ステートメント (コード) を区別する必要があることに注意してください。js ステートメントが {} で囲まれている場合、エラーが報告されます。

1.js 式: 式は値を生成し、値が必要な場所にどこにでも配置できます。これらはすべて表現です。

(1) 変数a

(2) 変数a + 変数b

（3）arr.map()

（4）関数テスト() {}

（5）デモ(1)

2.js ステートメント (コード):

(1) if文

(2) forループ

（3）スイッチ（）{ケース：xxx}

トラバーサル中のキー値の問題

マップを使用して配列を走査し、操作を実行するには、各 DOM ノードの一意性を示すキー値を設定する必要があります。一時的にインデックスを一意の識別子として使用します。

コードは以下のように表示されます。

<!-- 准备好容器 -->
    <div id="test"></div>

<!-- 准备好容器 -->
    <div id="test"></div>
    <!-- 引入react库，以下依次为核心库，操作dom的库和babel（将jsx转为js的库），此顺序不可有错误 -->
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

    <script type="text/babel">//写为babel格式，否则识别为普通js文件
        const data = ['Angular','React','Vue']
        
        const VDOM = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                    {
                        data.map((item,index)=>{
                            return <li key={index}>{item}</li>
                        })
                    }    
                </ul>  
            </div>
        )
        //2.渲染dom到页面，就是根据虚拟dom生成真实dom
        ReactDOM.render(VDOM, document.getElementById('test'))//此api是将dom节点塞入容器中，所以第一个参数是dom名称，第二个是js原生方法拿取容器id