reactmaker / simple_react_startkit Goto Github PK

This is a simple react boilerplate, without complex dependencies(eg. redux or router), this project can help you start the react project in seconds.

License: Other

JavaScript 82.95% HTML 15.48% Dockerfile 1.57%

eslint babel webpack4 react16-8 scss less

simple_react_startkit's Introduction

Simple React Startkit

This is a simple react boilerplate, without complex dependencies(eg. redux or router), this project can help you start the react project in seconds.

這個環境包可以讓你快速體驗 ReactJS 開發環境的便利，我們並沒有在裏面放入額外的套件(例如 redux, router)，希望可以讓你用最簡單的環境開始學習 React

特色 feature

需求配置 requirement

node ^6.11.5
npm ^3.10.10

開始 getting start

先確定好安裝了 node 6.11.5 以上的版本，接著就可以輸入以下指令

$ git clone https://github.com/ReactMaker/simple_react_start_kit_2017
$ cd simple_react_start_kit_2017
$ npm install                   # Install project dependencies
$ npm start                     # Compile and launch

如果一切成功，就會看到以下畫面，並且瀏覽器會打開的範例頁面

開發當中最常用到的是 npm start 指令，我們還有一些其他的指令要介紹給你知道

`npm run <script>`	說明
`start`	啟動網站在 8000 port
`dist`	編譯整個網站成品到 dist 資料夾下
`lint`	檢查所有的 js 檔案有沒有符合 coding style
`lint:fix`	檢查所有的 js 檔案有沒有符合 coding style ，如果是一些簡單的錯誤就會嘗試修復
`deploy`	編譯整個網站成品後，上傳至Github靜態頁面，https://[Github 帳號].github.io/[Repositories Name]/#/

Docker

如果想要把專案 build 到 docker 上面跑，請執行這條命令

npm run build:docker

輸入完命令之後會建立 docker image 名稱為 reactdocker

我們可以透過以下指令把映像檔跑起來

docker run --name reactmaker -d -P reactdocker

因為我是用-P參數自動分配port，所以跑起來之後輸入 docker ps 察看系統給我哪個 port

接著就可以在瀏覽器輸入localhost:32768看到我們包好的網頁了

simple_react_startkit's People

Contributors

Stargazers

Watchers

Forkers

keanucode kmsheng bearreact marskuo keyzf tkdchampion derickwarshaw kc17 ugiyo yaodehaung art-forks shenhua59 mengzhaofly eddieliu58 raphahsu liu-miao-miao masterkai mark9462

simple_react_startkit's Issues

Day 1 Drum Kit

open a repository and name : react_challenge_drum_kit

source file

https://github.com/wesbos/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit

React 程式碼產生器

點擊選項，並產生對應的React 程式碼

Day 11 Custom HTML5 Video Player

Source: Custom HTML5 Video Player

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Update dependency eslint to v9

Detected dependencies

dockerfile

Dockerfile

npm

package.json

react 18.2.0

react-dom 18.2.0

@babel/core 7.24.4

@babel/plugin-proposal-class-properties 7.18.6

@babel/plugin-proposal-decorators 7.24.1

@babel/plugin-transform-runtime 7.24.3

@babel/polyfill 7.12.1

@babel/preset-env 7.24.4

@babel/preset-react 7.24.1

@babel/runtime 7.24.4

autoprefixer 10.4.19

@babel/eslint-parser 7.24.1

babel-loader 9.1.3

core-js 3.36.1

css-loader 7.1.0

eslint 8.57.0

eslint-config-airbnb 19.0.4

eslint-plugin-import 2.29.1

eslint-plugin-jsx-a11y 6.8.0

eslint-plugin-react 7.34.1

file-loader 6.2.0

gh-pages 6.1.1

html-webpack-plugin 5.6.0

less 4.2.0

less-loader 12.2.0

node-sass 9.0.0

postcss-loader 8.1.1

rimraf 5.0.5

sass-loader 14.1.1

style-loader 4.0.0

webpack 5.91.0

webpack-cli 5.1.4

webpack-dev-server 5.0.4

travis

.travis.yml

Check this box to trigger a request for Renovate to run again on this repository

Day 5 Flex Panel Gallery

Day 6 Ajax Type Ahead

Source: Ajax Type Ahead

Day 13 Slide In on Scroll

這邊會用這個套件

https://www.npmjs.com/package/react-animate-on-scroll

Day 29 Countdown Clock

Day 17 Sorting Band Names without articles

安全性問題

你好：

我今天使用 simple_react_start_kit 的範本，然後上傳至github後，

有提醒我下列的問題，不知安裝新版的 hoek 後，是否需要調整什麼設定呢？

如：webpack

Known moderate severity security vulnerability detected in hoek < 4.2.1defined in package-lock.json.

package-lock.json update suggested: hoek ~> 4.2.1.

Day 30 Whack A Mole Game

Day 23 Speech Synthesis

Day12 Key Sequence Detection

https://github.com/wesbos/JavaScript30/blob/master/12%20-%20Key%20Sequence%20Detection/index-FINISHED.html

Day 3 CSS Variables

open a repository and name : react_challenge_css_variables

Day 16 - Mouse Move Shadow

upgrade to react react router v4

https://reacttraining.com/react-router/web
rr4 had released for a while, it would be nice to have a newer version

把 wiwi 拿來當作 webhook

修改 wiwi 功能讓他可以 line 通知有人 push 或是發 issue

Day 2 Clock

open a repository and name : react_challenge_clock

Can not be accessed in Docker

Hi,
The project cannot be accessed if it is running in Docker container
I ran the following commands:

docker run -ti --name ReactKit -p 123:8000 -v "$PWD":/app node:6.3 bash

When I was in the docker

npm install && npm start

I can even see the successful message like:
webpack: Compiled successfully.

But, I see the error on my Chrome as

This site can’t be reached

The webpage at http://localhost:123/ might be temporarily down or it may have moved permanently to a new web address.
ERR_UNSAFE_PORT

Any idea?

Thank you so much.

Thanks.

Day 22 Follow Along Links

Day 8 Fun with HTML5 Canvas

open a repository and name : react_challenge_html5_canvas