安裝與設定環境
React 從一開始就被設計為逐步採用，可以根據需求來選擇使用 React 的範圍。
CDN
- 建立一個靜態的
index.html檔案。 - 在
head中載入三個 CDN，分別是React、React DOM、Babel。 index.html中寫一個div，id是root。- 最後在
<body>end tag 之前新增script區塊放置程式碼。
<html>
<head>
<meta charset="utf-8" />
<title>React_CDN</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// React code will go here
</script>
</body>
</html>
-
目前已經載入寫作時穩定的版本：
- React - React 頂層的 API
- React DOM - adds DOM-specific methods
- The react-dom package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to. Most of your components should not need to use this module.
- Babel - a JavaScript compiler that lets us use ES6+ in old browsers
-
整個
app的進入點會是這個div#root，已經是使用慣例。
- 現在，使用
ES6的class來寫第一個 React 的程式，新增一個叫做app的component。
class App extends React.Component {
//...
}
- 加入
render()方法，這是class component唯一必須存在的method，用來渲染DOM節點。
class App extends React.Component {
render() {
return (
//...
);
}
}
- 在
return中，簡單放個 HTML 元素。要注意這邊放的類型並不是字串，所以不使用單引號或雙引號把內容包起來。這叫做JSX，之後會談到更多。
class App extends React.Component {
render() {
return <h1>Hello, I'm here</h1>
}
}
- 最後，使用 React 提供的 DOM 渲染方法
render()把App這個class創建到我們的div#root當中。
ReactDOM.render(<App />, document.getElementById('root'))
index.html 最後長這樣
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React_CDN</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text/babel">
class App extends React.Component {
render() {
return <h1>Hello, I'm here</h1>
}
}
ReactDOM.render(<App />, document.getElementById('root'))
</script>
</body>
</html>
可以在瀏覽器看到內容就代表成功了：
Local Environment (CRA/Create React App)
CDN 引入 libraries 的方法並不是很有效率，也不容易維護，所幸 facebook 提供了create-react-app，它幫你在設定好在開發React App 前的所需的環境。
- live server
- Webpack 自動編譯 React, JSX, and ES6, auto-prefix CSS 檔案
- ESLint測試並提醒程式碼錯誤的地方
設定 create-react-app （app 名稱）
打開 terminal，跟著以下步驟安裝。回到你想安裝專案的上一層資料夾，確定一下 Node.js 版本是否在 5.2 或以上。
一、安裝
npx create-react-app create-react-app
二、進入專案資料夾，開始專案
cd create-react-app
npm start
專案檔案包含：
觀察專案的結構，可以看到 /public、/src 兩個資料夾，和node_modules、.gitignore、README.md、package.json 這幾個檔案。
- 在
/public中，index.html是我們重要的檔案，跟先前使用 CDN 建立的index.html非常相似，都有著div#root，只是這次沒有載入任何 libraries 和程式碼。 /src會放置我們所建立的 React 程式碼。/src/App.js看環境如何自動編譯，找到以下這行改看動試試更新程式碼及樣板。
To get started, edit <code>src/App.js</code>
- 一旦更動程式碼發現
localhost:3000自動更新樣板，這就是live server。 - 把
/src資料夾中的檔案刪除，只留index.css和index.js，不會爆掉。
三、在 index.js 中 import React、ReactDOM、CSS 檔案：
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
我們再建立 App component 一次。使用 CDN 方法時，我們有個<h1>元素，但現在我們試著在<div>上加上className取代class來引入樣式規則。這意味著我們正在 JavaScript 中攥寫我們的樣板，而非真實 HTML 檔案。
class App extends Component {
render() {
return (
<div className="App">
<h1>Hello, I'm here</h1>
</div>
)
}
}
四、以下是完整的 index.js，這次我們要把 Component 當作 React 的參數載入，這樣也就不需再 extend React.Component：
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
class App extends Component {
render() {
return (
<div className="App">
<h1>Hello, I'm here</h1>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
五、打開瀏覽器 localhost:3000 看看，已經成功開始我們的 React 專案：
留言