從零開始學react-1

keyword

React, ReactDOM, React.createElement, ReactDOM.render, JSX, props, state

初識react

• react是構建用戶界面的javascript庫
• react是世界範圍內應用最廣泛的js庫

react初用

1. 引入cdn (react核心庫，react-dom庫)
2. react.js：核心庫，提供瞭如組件，虛擬dom。提供了方法，React.createElement(type, props, children)
3. react-dom.js dom庫，提供了和瀏覽器交互的dom相關功能。如dom渲染
   提供了方法：ReactDOM.render(content, container, cb)。content要渲染的內容，container要渲染的元素容器，cb，渲染完成後回調函數，不常用。
4. 注意：react-dom依賴於react核心庫。

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

5. 構建視圖demo

// 創建要渲染的元素
const el = React.createElement(
 "h1",
   null,
   React.createElement("p", null, "this is p ele."),
   React.createElement("p", null, "this is p ele.")
 );
 // 視圖渲染
 ReactDOM.render(el, document.querySelector("#app"), () => {
   console.log("回調成功");
 });

JSX初識

什麼是jsx?
是基於javascript + xml 的一個語法擴展
爲什麼用jsx?
要創建元素，使用React.createElement可讀性差，維護性也差。jsx語法增強要渲染元素的可讀性可維護性
瀏覽器不識別jsx，怎麼辦？
引入babal.js將jsx轉化爲瀏覽器可以識別的js代碼。

1. jsx使用步驟（cdn引入，script標籤寫上類型type=“text/babel”）
2. jsx demo

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

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

<script type="text/babel">
ReactDOM.render(
	<div>
		<header>這是頭部內容</header>
		<main>這是內容哦</main>
	</div>,
	document.getElementById('app')
)
</script>

JSX進階使用

不同類型變量輸出結果

• 普通字符串 // 原樣輸出
• 數字 // 原樣輸出
• 布爾值 // 不輸出
• null // 不輸出
• undefined // 不輸出
• 數組 // 逗號被忽略，輸出多個文本
• 對象 // 直接報錯，編譯失敗

表達式

• 三目表達式
• ||
• &&

數組使用

• 注意：數組中一定要寫key，不建議用index爲key

const arr = [1,2,3,4,5];
<ul>
	{
		arr.map(item => {
			return <li key={item}>{item}</li>
		})
	}
</ul>

JSX其他注意點

• jsx不是字符串
• jsx不是html
  • 類名不是class, 而是 className
  • style接收對象，不接收字符串。
• jsx中標籤必須閉合，單標籤也要閉合
• jsx中標籤必須小寫字母
• jsx輸出的節點必須有一個父級節點包裹
• jsx如果不想包裹的父節點渲染出來，可以用React.Fragment標籤

認識react腳手架

日常開發中，都會使用腳手架提高開發效率

1. 全局安裝

npm i create-react-app -g
// 或者
yarn add create-react-app global

2. 創建項目
   -注意： 項目名稱不要和一些庫的名字重複

create-react-app <項目名稱>

3. 項目運行

npm start
// or
yarn start

react組件化開發

類組件：

1. 必須繼承自React.Component
2. 必須有render方法
3. render方法，必須返回要輸出的節點內容

1. 創建組件

// App.js
import React, {Component} from 'react';
class App extends Component {
  render() {
    return (
      <div>
        hello, react
      </div>
    )
  }
}
export default App; 

2. 使用組件

// index.js
import App from './App';

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

props使用

• props是父級組件傳遞給子組件的值

// 父組件index.js
const arr = [1,4,5,7,0]
 ReactDOM.render(
   <App name="小美" arr={arr} />,
   document.getElementById('root')
 );

// 子組件 App.js
class App extends Component {
  render() {
    return (
    // ⚠️此處可以取到父級傳入的值
    const {name, arr} = this.props;
      <div>
        hello, react
      </div>
    )
  }
}

jsx中事件

• 事件名，小駝峯eg: onClick
• jsx中this默認undefined
• 怎麼讓this指向組件類呢？
  • 定義函數時候使用箭頭函數
    • eg: <div onClick={() => {console.log(this)}}>
  • 在constructor時候綁定this
    • eg： this.handleFn = this.handleFn.bind(this);
  • 定義函數時候直接用箭頭函數定義
    • eg: handleFn = () => {// do sth…}

state使用

組件內部的狀態值。可以用setState({key: value}) 來修改，修改後會自動同步視圖。
定義state有2種方式

// App.js
class App extends Component {
  // 定義state的2種方式, 選擇一種即可
  // 1. 直接在類裏寫state
  // state = {
  //   active: true
  // };
  
  // 2. 在類的constructor裏定義state
  constructor(props){
  	super(props);
  	this.state = {
		active: true
	}
  }
  
  render() {
    return (
    	<div>
    		<button onClick={this.handleChange}>點我切換active</button>
    		<p>當前active狀態是: {this.state.active ? 'true' : 'false'}</p>
    	</div>
    )
  }
	
  // 事件定義
  handleChange = () => {
	this.setState({
		active: !this.state.active
    })
  }
}