iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
1
Modern Web

以經典小遊戲為主題之ReactJS應用練習系列 第 2

Day02 - Tic Tac Toe篇:開發環境準備

開發環境及樣板介紹

我常用的開發環境是create-react-appreact-boilerplate。這邊簡單引用官方文件介紹一下,會分享一下我選用的理由,另外詳細部分我附上連結。

create-react-app

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

Github facebook/create-react-app
Create React App

react-boilerplate

The Hitchhikers Guide to react-boilerplate:

This is a production-ready boilerplate, and as such optimized for browsers, not for beginners. It includes tools to help you manage performance, asynchrony, styling, everything you need to build a real application.

Github react-boilerplate
The Hitchhikers Guide to react-boilerplate

選擇開發環境

這個30天系列我想選用create-react-app來當作快速開發的環境。雖然說我也蠻喜歡react-boilerplate的,因為react-boilerplate不用再自己一個一個安裝redux, reselect, immutableJS, Styled Components...等等常用的package,而且也定期有在更新,github上面關注的人也蠻多的。

但是我覺得create-react-app比起react-boilerplate更適合入門者,因為create-react-app很好心的幫忙把一些複雜的工具(例如webpack, babel)的配置封裝起來,所以大大的降低了入門者的門檻。而且依照我上網找教學文章的經驗,覺得比較容易找到create-react-app的相關資料,例如如何快速將ReactJS Web App部署到github page上,有很多的參考文章是以create-react-app為例,所以為了讓過程順利的進行,少踩一些雷,這次我先選擇create-react-app,讓焦點聚焦在我的主題上。

快速建立一個專案

快速建立一個名為tic-tac-toe的專案

npx create-react-app tic-tac-toe

ex:
create-react-app

進入資料夾之後,執行npm start,即可查看你的app

cd tic-tac-toe
npm start

ex:
create-react-app start

檔案結構如下
create-react-app file structure

部署到 GitHub-Pages

通常在這一步的時候,我就會把建立好的專案部署到GitHub-Pages,GitHub-Pages方便我們在GitHub建立靜態網站,在展示作品的時候非常方便,而且官網說

You get one site per GitHub account and organization, and unlimited project sites.

我之前都是用Heroku來展示我的作品,後來有一天發現有GitHub-Pages的時候我覺得很不可思議,unlimited project sites!!! 對前端開發者來說是一大福音啊!

部署的詳細步驟請容我省略,但是我附上我常參考的連結跟大家分享:

Deploy React to GitHub-Pages

GitHub-Pages README.md
Deploying a React App to GitHub Pages
Deploy React to GitHub-Pages to create an amazing website!

Absolute Imports

然後還有一件事情是我會在剛建立好create-react-app專案的時候做,就是我會讓我的讓案可以在import的時候指定絕對路徑,因為有時候指定相對路徑常會造成我在開發上的困擾,例如當專案變複雜的時候,我們很容易寫出下面這樣的東西,很容易寫錯

import { setInit } from ‘../../../../../TicTacToe/actions’;
import {  selectTicTacToe } from ‘../../../../../TicTacToe/selectors;

為了解決這個問題,我還去裝了一些VScode的extension,例如Path Autocomplete,來幫助我不要寫錯。

但是像我們在refactor的時候,或是想要把這段import複製到別的檔案裡面用的時候,相對路徑很容易會改變,所以常被重複使用的import我會乾脆寫成絕對路徑,方便我重複使用。

這邊我分享我在設定的時候常會參考的連結:

Absolute Imports with Create React App

Absolute Imports with Create React App
Setting Up Absolute Paths in create-react-app

補充說明

如果專案不是透過create-react-app建立的,或是我們的create-react-app已經執行npm run eject了,此時若要讓專案可以使用絕對路徑,就需要去修改webpack的path.resolve。

如何扩展 Create React App 的 Webpack 配置
ES6 Import Statement Without Relative Paths Using Webpack

總結一下,今天我們介紹了兩個不錯的開發環境及樣板,然後開始了我們的專案,並且也做了一些前置作業,像是可以部署到Github Page方便我們展示作品,以及如何設定絕對路徑,方便我們往後的開發。

接下來就要直接寫Code啦!我會用到的packages,之後會再邊寫邊介紹。


上一篇
Day01 - Tic Tac Toe篇:前言及功能構想
下一篇
Day03 - Tic Tac Toe篇:檔案結構與資料結構規劃
系列文
以經典小遊戲為主題之ReactJS應用練習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言