<react學習筆記(5)>知識點回顧(1)

.知識點回顧(1)

1.安裝包檔案

1. 三個包：babel-standalone, react, react-dom
2. 安裝：npm i -S babel-standalone react react-dom
3. 引入：

    //寫react語法 需要babel解析
    <script src="node_modules/babel-standalone/babel.js"></script>
    
    //react框架 實現 ui 使用者介面 只關注ui層
    <script src="node_modules/react/umd/react.development.js"></script>
    
    //react-dom  使用者互動  只處理dom
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
複製程式碼

2.babel作用

babel 解析器: 框架的程式碼想要瀏覽端預覽 需要進行轉換,轉換瀏覽器 認識的語言

3.ReactDOM.render

ReactDOM.render(element, container, callback);

<div id="app"></div>

demo1

ReactDOM.render(
    <h1>Hello World</h1>,
    document.querySelector('#app')
)
複製程式碼

demo2

const element2 = <h1>
    <span>Hello World</span>
    <span>Hello React</span>
</h1>;
ReactDOM.render(
    element2,
    document.querySelector('#app')
)

複製程式碼

demo3

function createJSX (){
    return (
        <h1>
            <span>Hello World</span>
            <span>Hello React</span>
        </h1>
    )
}
const element3 = createJSX()
    ReactDOM.render(
        element3,
        document.querySelector('#app')
    )
複製程式碼

4.插入資料

使用{}插入資料，括號中為js程式碼

demo1 使用{}插入資料

const person = {
    name: 'sjl',
    age: 18,
    sex: 0
};
const element1 = (
    <div>
        <h1> Hello World </h1>
        <h2> 名字： {person.name} </h2>
        <h2> 年齡： {person.age} </h2>
    </div>
);
ReactDOM.render(
    element1,
    document.querySelector('#app')
);
複製程式碼

demo2 迴圈map

const arr = ['張三','李四','王二','狗蛋','大錘'];
const element2 = (
    <div>
        <ul>
            {
                arr.length >0 && arr.map((item,index)=>{
                    // li標籤的是屬性繫結
                    return (
                        <li key={index}>{item}</li>
                        // key屬性相當於身份證id，唯一性
                    )
                })
            }
        </ul>
    </div>
);
ReactDOM.render(
    element2,
    document.querySelector('#app')
);
複製程式碼

demo3 三目運算判斷
後臺通過傳輸0，1資料，前端通過該資料判斷結果，以性別男女為例

const person = {
    name: 'sjl',
    age: 18,
    sex: 0
};
const element3 = (
    <div>
        <h2>
            性別：
            {
                // 不能寫if判斷 只是表示式
                person.sex ? '女': '男'
            }
        </h2>
    </div>
);
ReactDOM.render(
    element3,
    document.querySelector('#app')
);
複製程式碼

當sex為0時，性別為男;當sex為1時，性別為女

demo4 利用函式同理demo3

const person = {
    name: 'sjl',
    age: 18,
    sex: 0
};
const element4 = (
    <div>
        {
            (function () {
                if( person.sex ) return <h2>女</h2>;
                return <h2>男</h2>
            })()
        }
    </div>
);
ReactDOM.render(
    element4,
    document.querySelector('#app')
);
複製程式碼

demo5 展開陣列和物件(物件需要stringify,不能自動展開)

const person = {
    name: 'sjl',
    age: 18,
    sex: "男"
};
const arr = ['張三','李四','王二','狗蛋','大錘'];
const element5 = (
    <div>
        <p>{arr}</p>
        <p>{JSON.stringify(person)}</p>
    </div>
);
ReactDOM.render(
    element5,
    document.querySelector('#app')
);
複製程式碼

4.節點屬性繫結

注：在react中，用className代替class;

input標籤中的value用defaultValue代替，可以修改值。

demo1

const person = {
    name: 'sjl',
    age: 18,
    sex: "男"
};
const styles = {
    name:{
        backgroundColor: "#f66",
        color: "#fff"
    },
    age:{
        fontSize: '50px',
        color: 'skyblue'
    }

};
const element1 = (
    <div>
        <h1 style={{color:'hotpink'}}> Hello World </h1>
        <h2 style={styles.name}> 名字： {person.name} </h2>
        <h2 style={styles.age}> 年齡： {person.age} </h2>
    </div>
);
ReactDOM.render(
    element1,
    document.querySelector('#app')
);
複製程式碼