iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 26
0
Modern Web

30 天 Progressive Web App 學習筆記系列 第 26

Day 26 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - React + Redux + Webpack 環境建置

接下來 3 篇文章的目標是以 React + Redux + Webpack 的技術來完成 To-Do List 功能與 PWA,而內容會假設讀者已經熟悉 React, Redux 及 Webpack,會把重點放在如何實作,不會逐步講解基礎觀念。

  1. 環境建置
    • 基本介紹(Intro/Install/Run)
    • 執行 React 專案前置作業
    • 打造可撰寫 JSX/ES6/ES7 的環境
    • Webpack 設定
  2. 建立檔案架構與功能
    • 規劃 React + Redux 架構
    • 顯示待辦事項清單
    • 新增/修改/刪除待辦事項清單
  3. 實作 PWA
    • 建立 Web App Manifest File
    • 新增 Service Worker

已完成範例如下:
https://github.com/AnnaSu/todolist-pwa-demo-react


而此篇文章為『環境建置』,內容如下:

基本介紹(Intro / Install / Run)

說明此範例的環境介紹(Intro)之外,也說明安裝方式(Install)以及如何執行(Run)如下:

延伸閱讀:環境建置 ( json-server、http-server 、concurrently )


  • Install
git clone https://github.com/AnnaSu/todolist-pwa-demo-react.git
cd todolist-pwa-demo-react
npm install

  • Run
npm start

可參考 package.json 內的 "start": "concurrently --kill-others 'webpack-dev-server --port 8000' 'json-server --watch db.json'"


執行 React 專案前置作業

為了建立 React 專案,首先安裝對應 module:

npm install --save-dev react react-dom react-redux react-router redux redux-thunk
  • react
    • A declarative, efficient, and flexible JavaScript library for building user interfaces.
  • react-dom
    • React package for working with the DOM.
  • react-redux
    • Official React bindings for Redux
  • react-router
    • Declarative routing for React
  • redux
    • Predictable state container for JavaScript apps
  • redux-thunk
    • Thunk middleware for Redux


打造可撰寫 JSX / ES6 / ES7 的環境

將 React 相關的 module 安裝完畢之後,由於 React 通常會使用 jsx,所以我們還需要安裝 babel-preset-react,如果我們程式碼會用到 ES7,那麼可以再安裝 babel-preset-stage-0

npm install --save-dev babel-preset-react babel-preset-stage-0

Webpack 設定

接下來再安裝 webpack 的相關 module

npm install --save-dev file-loader url-loader webpack-dev-server

完整 webpack.config.js 檔案如下:

var path = require('path');

module.exports = {
  context: __dirname,
  devtool: '#eval-source-map',

  entry: {
    main: path.resolve(__dirname, './src/boot.js'),
  },

  output: {
    path: path.resolve(__dirname, './assets'),
    filename: 'bundle.js',
    publicPath: '/assets/'
  },

  module: {
    loaders: [{
      test: /\.js(x)?$/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react']
      },
      exclude: /node_modules/
    }]
  }
}


本日小結

此篇文章針對『環境建置』做詳細的介紹,從安裝 module 開始,一步步說明如何建立 React + Redux + Webpack 的環境,而下一篇將會介紹『完成 To-Do List 專案架構與功能』。


本人小小筆記,如有錯誤或需要改進的部分,歡迎給予回饋。
我將會用最快的速度修正,m(_ _)m。謝謝

上一篇
Day 25 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - sw-precache-webpack-plugin 應用
下一篇
Day 27 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - 完成 React + Redux 專案架構與功能
系列文
30 天 Progressive Web App 學習筆記30

尚未有邦友留言

立即登入留言