React-(二)JSX與render

JSX語法：用JS寫HTML

解析 JSX 語法

• 首先「import」引入 React 庫

  import React,{ Component } from 'react';

• 「App」是自己定義的 React 組件

• React 組件可以自己用 Class 來定義，但是要 「extends(繼承)」自 React 的 「Component」

• 「Component」是 React 定義好的 Class

  class App extends Component{
      // ...略
  }
  
  //或者是寫
  class App extends React.Component{
      // ...略
  }

• 每一個組件，都會有一個「render」函式

• 「render」函式裡面會 return 一個 JSX 物件

  class App extends Component{
      render(){
          return (
              <div className="App">
                  <header className="App-header">
                      // ...略
                  </header>
              </div>
          );
      }
  }

JSX 物件：是 React 發明要讓我們在 React 的 JS 程式中，可以快速定義 HTML 的模板

JSX 跟 HTML 的差異

1. JSX ㄧ定要 close(以”/“作為tag結束)

   • 起始標籤自己結尾(self colse)
   • 起始標籤(opening tag)+結束標籤(closing tag)

     <!-- JSX -->
     <img alt="logo" />
     <input type="test"/>
     <p>Hello</p>
     
     <!-- HTML不一定要clsoe(不加"/") -->
     <img alt="logo" >
     <input type="test">
     
     ``` 
     2.  JSX 的所有標籤都可 self colse
     ```htmlmixed=
     <!-- JSX -->
     <div/>
     <div></div>
     
     <!-- HTML -->
     <div></div>

2. “className” 取代 “class”

   <!-- JSX -->
   <div className=""/>
   
   <!-- HTML -->
   <div class=""></div>
   ``` 
   4. "htmlFor" 取代 "for"
   ```htmlmixed=
   <!-- JSX -->
   <input type="text" id="checkId"/>
   <label htmlFor="checkId"></label>
   
   <!-- HTML -->
   <input type="text" id="checkId"/>
   <label for="checkId"></label>

3. event 要用駝峰式命名

   <!-- JSX -->
   <input type="text" onChange=""/>
   <button onClick=""></button>

4. 用”{}”框住一個值或函式

   <!-- JSX -->
   <button onClick={this.onClick}>{this.state.count}</button>

入門組件

先在 「src」 資料夾中，新增兩個檔案，分別是 「Item.js」 跟 「List.js」，接下來的流程會分別製作這兩個組件，並且在最後於「List.js」引入「Item.js」

• 新增一個「Item.js」檔案
• 第2行，引入 React
• 第4行，定義一個新的class，命名為 Item ，繼承自 React 的 Component
• 第5行，使用 render 函式，其中 return 該物件的 html（用JSX語法寫html）

• 第12行，最後 export 這個物件

  //Item.js
  import React from 'react';
  
  class Item extends React.Component{
      render(){
          return (
              <li>Hello</li>
          )
      }
  }
  
  export default Item;

• 新增一個「List.js」檔案

• 第2行，引入 React，以及在 React 中的 Component
• 第3行，使用相對路徑，引入另一個物件「Item」（在”./Item.js”路徑中，可以省略副檔名”.js”），
• 第5行，定義一個新的class，命名為 List ，繼承自 React 的 Component
• 第6行，使用 render 函式，其中 return 該物件的 html（用JSX語法寫html）
• 第18行，最後 export 這個物件

  //List.js
  import React,{Component} from 'react';
  import Item from './Item';
  
  class List extends Component{
      render(){
          return(
              <ol>
                  <Item/>
                  <Item/>
                  <Item/>
                  <Item/>
              </ol>
          )
      }
  }
  
  export default List;

render：把組件畫上頁面

如果使用create-react-app指令，其 webpack 打包的入口為 「src」資料夾中的「index.js」檔案。意思是，webpack 在執行打包編譯時，會先找到「index.js」檔案，並且依序找到其中 import 的模組，接著再一層接一層去找「模組中 import 的模組」…。

ReactDom 跟 React 是兩個不同的東西，分屬於兩個不同的 package，React 是核心，而 ReactDom 是把 React 掛載到 DOM 上使用。

• 新增一個 「index.js」 檔案
• 第2行，因為會使用 JSX，所以import React，讓程式碼在 React 的 Scope 中
• 第3行，import ReactDom
• 第4行，import 定義好的組件
• 第7行，透過 ReactDom.render 函式有兩個參數
  • 第一個參數是 React Element（補充：被 import 的 List 是一個組件，但是如果用<>括起來，<List/>就代表是一個 Element ）
  • 第二個參數是 DOM Container(一個 id 為’root’的 DOM元素)

    //index.js
    import React from 'react';
    import ReactDom from 'react-dom';
    import List from './List';
    
    
    ReactDom.render(<List/>,document.getElementById('root'));

打開「public」資料夾中的「index.html」，可以看到 id 為’root’的 DOM元素就是我們上面指定的 DOM Container。意義就是，讓 <List/> 元素放到 id 為 ‘root’ 的 DOM 元素中

接著打開 termianl，使用指令將專案開啟於瀏覽器上

yarn start

---

• 參考課程內容：HiSKIO-React 16 完全精通 - 從原理到大量實戰應用