React 組件 Component 和 JSX 語法

要從哪裡開始學，或許先看看 React 的組件結構比較容易懂？

在開始學習 React 的時候，或許先從觀察開始，看看應有的組件檔案裡，需要有什麼塊狀結構，就像學 HTML ㄧ樣，也會有<html><head>和<body> 。
除了我們認識的 HTML、CSS 和 JavaScript 外，React 也有屬於自己的語言標記，但嚴格說起來不能說是語言，而應該說是語法糖，什麼是語法糖？算是介於 HTML 和 JavaScript 之間的一種標籤語法，主要是要讓 JSX 來描述使用者界面的外觀，如官網JSX – React的介紹。

JSX 與 HTML 不同的地方

JSX 標籤語法一定要有 close tag。ex.<a> </a>
所有的 JSX 標籤語法一定可以自動閉合 self close tag。ex.<input />
tag 內的 class 屬性需改為className ; label 內的 for 則改為htmlFor，其他 CSS 屬性為兩個字的如 font-size也要改成fontSize也就是轉換成駝峰式命名法的方式。
原本事件監聽觸發的事件名稱onclick也需要改成是駝峰式命名的onClick。
使用大括號{}括著一個值或表達式{this.onClick} 表示是這個組件的onClick()函式。

新增一個新組件

所有我們設計的組件，都要繼承於Component，而組件內必須要有一個 render ()函式會回傳return 一個JSX的物件。
在書寫新組件(Component)的檔案時，需要至少有三個結構：

引入所需。ex. import - from
組件本身。ex. class [組件名] extends [組件名]
輸出組件。ex. export default

引入所需文件:(1.)

先引進必須要有的 React 的 Component，引入有兩種寫法：

import React, { Component } from 'react';
class App extends Component {}

// 或是 此種比較常用
import React from 'react';
class App extends React.Component {}

定義`render ()`方法：(2.)

render()方法是渲染頁面最重要的函式，利用render()將顯示內容以回傳return()物件的方式回傳，return(JSX動態 or HTML靜態)需用()包起來。

class Item extends React.Component {
  render(){
    return (
      <il>Hello Paris !<il/>
    )
  }
 }

輸出組件(3.)

將組件以export default [組件名];形式輸出，以供其他組件使用。

1	export default Item;

實作組件

兩個組件實作，在 List(ol)組件裡引入幾個 Item(li)組件。
檔案名：Item.JS

import React from 'react';

class Item extends React.Component {
  render(){
    return (
      <il>Hello Paris !<il/>
    )
  }
}
export default Item;

在另一個組件裡把 Item 這個組件安插進來。
檔案名：List.js
記得需引入Item.js，置入組件時須以 self close tag 的型態插入，如<Item />>

import React from 'react';
import Item from 'Item'; // 引入檔名可以不寫.js

class List extends React.Component {
  render(){
    return (
      <ol>
        <Item/>
        <Item/>
        <Item/>
      <ol/>
    )
  }
}
export default List;

如何渲染到畫面

組件都完成後，就可以在引入主要頁面的index.js並且告知要放在哪一個 DOM 元素的位置。

在專案裡src/index.js，是 react 預設的程式進入點。
react是核心。react-dom是把 react 掛載到 dom 上面的必需組件。
src/index.js裡面宣告的ReactDom.render(<List />,documentgetElementById('root'));元件，會自動 bind 綁定到public/index.html裡面的<div id=”root>`位置。

檔名：index.js
render()函式有兩參數:

react element 元素,型態是物件。ex.<List/>
DOM contener 裝 DOM 的容器。ex.document.getElementById('root')

import React from 'react';
import ReactDOM from 'react-dom';
import List from './List'; // 引入組件

ReactDOM.render(<List />, document.getElementById('root'));
// 把 list 放到 root 裡面