All Projects → ReactMaker → simple_react_startkit

ReactMaker / simple_react_startkit

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

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects
Dockerfile
14818 projects

Projects that are alternatives of or similar to simple react startkit

OSAPI
👋 OSAPI 是依靠通用性后台管理平台搭建的API管理平台,基于 vue3、Nestjs 技术栈实现,包含 RBAC 角色权限模块、数据展示、编辑等模块。
Stars: ✭ 32 (-70.64%)
Mutual labels:  less, eslint
Webpack4.x
webpack4.x详细配置步骤
Stars: ✭ 103 (-5.5%)
Mutual labels:  less, webpack4
Sku
Front-end development toolkit
Stars: ✭ 403 (+269.72%)
Mutual labels:  less, eslint
React-Whole-barrels
webapck + react + react-router +dva + es6 + less + antd 实现的脚手架 👌👌
Stars: ✭ 23 (-78.9%)
Mutual labels:  less, webpack4
Yarsk
Don't use this, use Create React App
Stars: ✭ 199 (+82.57%)
Mutual labels:  less, eslint
dva-typescript-antd-starter-kit
A admin dashboard application demo based on antd by typescript and dva
Stars: ✭ 61 (-44.04%)
Mutual labels:  less, eslint
React Redux Antdesign Webpack Starter
react + redux + ant design + react-router 4 + webpack 4 starter
Stars: ✭ 44 (-59.63%)
Mutual labels:  less, webpack4
Webpack React Boilerplate
Minimal React 16 and Webpack 4 boilerplate with babel 7, using the new webpack-dev-server, react-hot-loader, CSS-Modules
Stars: ✭ 358 (+228.44%)
Mutual labels:  eslint, webpack4
Web Study
本仓库是自己总结的前端开发一些基础知识,包括html5,css3, canvas, jQuery, less ,ES6, webpack,Vue等,也包含了一些算法和数据结构方面的练习,同时也记录了自己工作中的踩坑总结,适合想要学习前端开发的伙伴,你可以clone项目到本地,然后一步一步跟着我的demo敲,希望大家都能全栈。
Stars: ✭ 176 (+61.47%)
Mutual labels:  less, webpack4
Reactql
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Stars: ✭ 1,833 (+1581.65%)
Mutual labels:  less, webpack4
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (+110.09%)
Mutual labels:  eslint, webpack4
quickstart-miniprogram
🎉微信小程序webpack模板
Stars: ✭ 32 (-70.64%)
Mutual labels:  less, webpack4
Vue Webpack Config
Koa2、Webpack、Vue、React、Node
Stars: ✭ 151 (+38.53%)
Mutual labels:  eslint, webpack4
webpack-typescript-react
Webpack 5 boilerplate with support of most common loaders and modules (see tags and description)
Stars: ✭ 185 (+69.72%)
Mutual labels:  less, eslint
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-67.89%)
Mutual labels:  eslint, webpack4
React Latest Framework
a client framework of React
Stars: ✭ 835 (+666.06%)
Mutual labels:  less, webpack4
webpack-4-react-bootstrap-starter-template
Starter boilerplate template for webpack 4 with React, Bootstrap 4
Stars: ✭ 16 (-85.32%)
Mutual labels:  eslint, webpack4
Webpack-Starter-Kit
Webpack 4 stater kit with SCSS, PostCSS, Babel & ESLint
Stars: ✭ 41 (-62.39%)
Mutual labels:  eslint, webpack4
Static Site Boilerplate
A better workflow for building modern static websites.
Stars: ✭ 1,633 (+1398.17%)
Mutual labels:  less, eslint
Kit
ReactQL starter kit (use the CLI)
Stars: ✭ 232 (+112.84%)
Mutual labels:  less, eslint

Build Status Renovate enabled david-dm Known Vulnerabilities

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

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

Imgur

開發當中最常用到的是 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看到我們包好的網頁了

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].