React 學習筆記【一】

起源：

1.Facebook內部用來開發Instagram

2.不是完整的MVC框架

3.2013年開源react

特點：

1.虛擬Dom

2.高效能

3.元件化

4.React Native 跨平臺開發

官方腳手架 create-react-app

1.安裝腳手架：

npm install create-react-app -g

2.建立腳手架專案：

create-react-app  my-project

3.進入我的專案

cd my project

4.啟動專案

npm start

預設埠3000

【專案結構解析】

package.json  專案安裝依賴

pubilc  公共檔案

測試：建立hello元件

1.在src資料夾下 建立hello.js檔案

2.在hello.js檔案裡，首先引入react

然後建立一個Hello的類繼承react元件

render代表元件最終渲染的結果

最後用export default將Hello元件匯出

import React from 'react'

class  Hello extends React.Component{
    render(){
        return <h1> Hello world </h1>
    }
}

export default Hello複製程式碼

3.在src資料夾下的index.js中，

引入hello.js檔案中的Hello元件

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

的方式渲染到index.html的id為root的標籤中

4.頁面即可顯示此樣式：

JSX語法

1.花括號可以內嵌任何js表示式

2.要注意的是標籤的class名，在這裡叫做className

for迴圈叫做htmlFor

3.定義一個陣列，用map方式可將陣列中內容遍歷展示

4.定義一個條件，{}可定義滿足條件的內容

class  Hello extends React.Component{
    render(){
        const todoList = ['Learn React','Learn Redux']
        const isLogin = true
        return (
        <div className="box" htmlFor="">
            <h1> Hello world </h1>
            <ul>
                {
                  todoList.map(item =>
                      <li>{item}</li>
                  )
                }
            </ul>
            {12 + 34}
            {<p>this is new</p>}
            {isLogin ? <p>你已經登陸</p>:<p>請登入</p>}
        </div>
        )
    }
}複製程式碼

對應頁面：

安裝bootstrap

1.npm install bootstrap --save

2.src下的index.js中引入：

import 'bootstrap/dist/css/bootstrap.min.css'複製程式碼

即可在頁面中使用

父子元件傳遞資料

1. 建立父元件，建立子元件，父元件中引入子元件

import NameCard from './components/NameCard'複製程式碼

2. 建立NameCard元件 【元件首字母名稱大寫】

用const定義資料名稱，用this.props輸入

且資料不可被改變

可將資料用{}繫結在模板dom元素中

遍歷的標籤記得寫key

class NameCard extends React.Component {
    render() {
        const {name, number, isHuman, tags} = this.props
        return (
            <div className="alert alert-success">
                <h4 className="alert-heading">{name}</h4>
                <ul>
                    <li>電話：{number}</li>
                    <li>{isHuman ? '人類':'外星生物'}</li>
                    <hr/>
                    <p>
                        {tags.map((tag ,index)=>(
                            <span className="badge badge-pill badge-primary" key={index}>{tag}</span>
                            ))}
                    </p>
                </ul>
            </div>
        )
    }
}複製程式碼

3. 父元件裡直接引用：

定義各項資料的值

注意：【條件表示式不寫預設為false 寫上為true】

<NameCard name={"winter"} number={12334555} isHuman tags={tags}/>複製程式碼

父元素內定義tags陣列：

const tags = ["活潑開朗","為人親和"]複製程式碼

最終效果