本節大綱

• 前言
• 建立 React 專案的百百種方式
• 參考資料
• 結論

前言

這裡講到建立 React 專案的百百種方式，這是一個太跨張的方式，這裡也主要會介紹四種方式，這四種方式分為簡單及複雜的應用 (這好像是幹話)，廢話不多說，請看以下介紹，

建立 React 專案的百百種方式

以下分享如何使用 Codepen、JS Bin、CodeSandbox、Create React App 等等...來如何快速建立 React 專案來開發。

使用 Codepen 建立 React 簡單的應用

Codepen 簡介

Codepen 是一個線上編輯器，它可以利用瀏覽器開啟，不但支援 Html、Css，甚至還支援 JavaScript，現在還可以匯入各種套件，最方便的是還可即時預覽結果畫面。

示範如何使用 Codepen 建立 React

在 Codepen 這裡，要注意三件事：

• 左邊的 HTML 區塊這裡，要加上 <div id='root'></div>。
• 點選 Settings，打開裡面的設定：
  • 在 JavaScript Preprocessor 選擇 Babel，
  • 在 Add External Scripts/Pens 引用 React CDN。

使用 JS Bin 建立 React 簡單的應用

JS Bin 簡介

JS Bin 是一個線上編輯器，它可以利用瀏覽器開啟，，不但支援 Html、Css，甚至還支援 JavaScript，現在還可以匯入各種套件，最方便的是還可即時預覽結果畫面。

示範如何使用 JS Bin 建立 React

在 JS Bin 這裡，要注意三件事：

• 在 HTML 區塊這裡，要引用 React CDN。
• 在 HTML 區塊這裡，要加上 <div id='root'></div>。
• 在中間的 JavaScript 區塊，要選擇 JSX(React)。

之後就可以成功的撰寫 React 簡單的應用。