知識點回顧(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')
);
複製代碼