React 新手入門筆記(一)

沒錯!我要變成寫 React 了!其實是因為剛踏進門,現在還在四處碰碰找自己喜歡的風格,碰過 React 之後,我真的還滿喜歡 JSX 的。

現在寫Angular最麻煩的問題是,需要在 HTML 和 JavaScript 之間切換,有不少的邏輯同時存在在這兩者身上,但是 JSX 反而是把 HTML 帶進了 JavaScript ,雖然有一些語法不同造成了一些學習門檻,例如: class 變成 className 、 for 變 htmlFor 等等,但目前個人的看法,還挺值得一學的!

起步準備

安裝 Node.js 應該是必備程序了 ,為了久遠的未來會使用到 Ajax ,我們先來建立一個簡單的伺服器跑我們的網站!

  • 建立一個新資料夾:mkdir HelloReact
  • 進入該資料夾:cd HelloReact
  • 初始化package.json:npm init
  • 安裝 Express.js:npm install --save express
  • 新增 server.js 檔案:
var express = require('express');
// Create our app
var app = express();
app.use(express.static('public'));
app.listen(3000, function () {
    console.log('Express server is up on port 3000');
});
  • 新增 public 資料夾:mkdir public
  • 在 public 資料夾內新增 index.html 檔
  • 準備工作大功告成!

載入 React 和 Babel

首先我們先在<head>載入我們需要的 script

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/brower.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>

React 是我們最重要的函式庫,但是往下一看,還有一個 ReactDOM ,這個是因為 React 開始跨平台開發,所以把瀏覽器所使用的函式庫分割出來,變成 ReactDOM 。

我們前面有提到 React 可以用 JSX 來開發,但是瀏覽器當然看不懂這是什麼,所以我們需要 babel 來幫我們轉譯成瀏覽器看得懂的 JavaScript !

備註: Babel 更高的版本不支援直接寫在瀏覽器內,目前也只是因為示範所以先這樣寫,請各位直接先使用上面的版本!

Hello React

先在我們的<body>新增一個<div>

<div id='app'></div>

這個標籤是等著放我們的第一個 React App

<body>最下方準備寫我們的 React Code

<script type="text/babel">
    //.....something
</script>

Render 我們的 Hello React 在我們的頁面上

<script type="text/babel">
    ReactDOM.render(
        <h1>Hello React!</h1>,
        document.getElementById('app')
    );
</script>

ReactDOM.render()需要傳入兩個參數
第一個是我們要 Render 的東西,範例是<h1>Hello React</h1>
第二個參數是我們要 Render 的目標位置,範例目標是document.getElementById('app')

最後,啟動我們的 server.js
node server.js

2016-07-25 at 下午9.42

2 Comments

  1. 你現在還有空噢!!

    真是狂人!!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料