React 快速實作

React 基本介紹

  1. 用來開發「使用者介面」的 JavaScript 套件
  2. 以組件(Component)為核心
  3. 容易理解與除錯
  4. Facebook 開發團隊支援
  5. 可延伸至手機應用開發

快速入門

安裝 React 套件

**最快速開始入門的方式去是用 react CDN
https://reactjs.org/docs/cdn-links.html

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Install React</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
https://unpkg.com/react@16/umd/react.production.min.js
https://unpkg.com/react-dom@16/umd/react-dom.production.min.js

</head>

貼到 html 的 head 後,可以試試看寫以下 script 來測試:

// React 和 ReactDOM 這兩個物件,是 React 套件的核心物件
console.log("React: ", React);
console.log("ReactDOM: ", ReactDOM);

 

 

React Element(React 應用中最小的組成單位)

React Element 分成兩種:

1.基本的 HTML DOM Element (如在:H1 標籤裡包東西)

2.React 組件(Component) → 自訂的 React Element

 

 

1.基本的 HTML DOM React Element 寫法:

React.createElement(型態,[屬性],[子元件]), 接者使用 ReactDOM.render(React_Element,容器)

window.addEventListener("load", () => {
//1. 建立型態為 H1 的 React Element. 並且包含文字 Hello World (文字也是一種子元件)
// 相當於 Hello World

let reactElement = React.createElement("H1", null, "Hello World");
//2.建立好的 React Elemtn 畫到容器中,這裡的容器使用 HTML Body Element
ReactDOM.render(
reactElement, document.body
 );
});

 

 

2.React 組件(Component) → 自訂的 React Element 寫法:

 

//定義一個組件類別來繼承 React.Component :

class 組件類別名稱 extends React.Component{
//組建類別內的程式碼
}

//在組件類別中定義 render 方法 :

class 組件類別名稱 extends React.Component{
render(){
//重點:一定要 return
return React_Element;
 }
}

//建立組件實體 :

React.createElement(
組件類別名稱,[屬性物件],[子元件]
);

// 將組件實體加入畫面中 :

ReactDOM.render(
組件實體, 容器元件
);

實際寫一次:

//設計組件類別
class MyHead extends React.Component {
render() {
return React.createElement("H1", null, "Hello Component");
 }
}

window.addEventListener("load", () => {
// 1.建立自訂的 React 組件實體
let myComponent = React.createElement(MyHead, null);
// 2. 將建立好的組件放到容器中
ReactDOM.render(myComponent, document.body);
});

 

解釋:瀏覽器 load 後要把 myComponent 畫到 body 上,回去找 MyHead return 的東西,畫出來。

把 React 專案發佈到 Github Page :

1.參考 https://pages.github.com/ 的說明,建一個 repo,並有 gh-pages 的 branch,切到這個 branch。 2.先把步驟 1 的專案 git clone 下來,切到 gh-pages 這個 branch。 3.打以下指令:

npm install -g create-react-app
create-react-app my-app
cd my-app

4. 修改 my-app 裡頭的 package.json:

加入"homepage": "https://<github 帳號名稱>.github.io/你開的 repo 名稱",

scripts 加入:

"deploy": "npm run build&&gh-pages -d build"

5. 把目前的記錄 commit(很重要~~~我一直忘記 T_T):

git add .
git commit -m "first reactProject"

6. 發布指令

npm install --save-dev gh-pages
npm run build
npm run deploy

7.完成
確認一下,連到:
連到 https://<帳號&gt;.github.io/<專案名稱>
我做好的案例(很醜XD): https://annie101101046.github.io/todolist/