React-babel-webpack-es6 Starter Project
A boilerplate using React, webpack and hot module reloading, and ES6 + JSX via Babel.You could use it as a base to build your own web app.
Features
The provided boilerplate enables client-side ES6 via the following technologies:
- webpack and webpack-dev-server as a client-side module builder and module loader.
- npm as a package manager and task runner
- Babel 6 as a transpiler from ES6 to ES5.
- React and JSX as a virtual Dom JavaScript library for rendering user interfaces (views).
- ESLint as a reporter for syntax and style issues. eslint-plugin-react for additional React specific linting rules.
- Sass as a compiler of CSS styles with variables, mixins, and more.
- Inline base64 URLs for images and fonts if their size is less than specified limit of file-loader
- Image compression processing of image-webpack-loader
- Watch
index.htmlfor changes of html-webpack-plugin
Getting Started
Installation
you should clone the repo and install the dependencies.
$ git clone https://github.com/chenbin92/react-redux-webpack-starter.git app-name
$ cd app-name
$ npm install //or cnpm install
Development
In the development mode. launch the boilerplate app：
// run the dev server http://localhost:8080
$ npm start
you should see a new browser tap opening and a title of "Hello React” in http://localhost:8080/, page hot reloads automatically when there are changes
When you run npm start:
- The sass-loader compiles Sass into CSS
- Webpack bundles the compiled CSS、JS into
bundle.js
Production
In the production mode, you can:
// run the prod server http://localhost:9090
$ npm run start: prod
// build the static files.
$ npm run build
npm run build. This will prepare and build the project for production use. It does the following:
- Minifies all JS and CSS
- Inline base64 URLs for images and fonts if their size is less than specified limit
- Sets NODE_ENV to production so that React is built in production mode
- Places the resulting built project files into
/builddirectory
All configuration tasks
npm start: start the development model of servernpm run start:prod: start the production model of servernpm run build: compile code in production modenpm run lint: lint with ESlint and Airbnb's style sheet.npm run lint:watch: eslint watchingnpm run remove:build: remove the dist directorynpm run clean:build: clean the dist directory
TODO
- add test
Others
-
redux+react+webpack+热加载+兼容IE8 动机 （备忘录，持续更新）项目需要支持到IE8，并且我是深度懒癌患者，于是选择了高配带有热加载 功能的（兼容了IE）环境。项目地址在下面。 刚刚接触react+redux架构没多久，用了大半天时间搭了redux+react+hot-middleware+supportIE8的环境。也分享给刚刚接触、需要现成脚手架的朋友。基础框架参照官方D
-
配置下环境先，记得➕‘－－dev'的就是运行在开发模式的，在开发模式普通dependecies也能用 npm init npm install //no need to npm install actually because we're in the initilization process. npm install webpack --save-dev npm install --save
-
npx create-react-app my-app --template typescript cd my-app npm start yarn add antd yarn add react-app-rewired customize-cra /* package.json */ "scripts": { - "start": "react-scripts start", +
-
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. 需要制定是开发环境还是正式环境 //
-
react+webpack+es6 安装webpack 1.先将npm的源改为淘宝，使用如下命令 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.接下来安装引用包的方法为 cnmp install [name] -g //全局安装 cnpm install [name] //本地安装，即是只安装到当前目录的环境 3
-
今天给大家分享一个前端框架，适合单页面应用和服务端渲染应用，我的思路是这样的，服务器做首屏渲染，把初始的状态值通过html的字段传给客户端，客户端拿到值以后在做客户端渲染，客户端渲染的时候可以结合react-router，这样在客户可以做路由，当应用很大的时候可以按照板块拆分，每一个拆分的板块只在服务端做首屏渲染，其他里面的页面在客户端来做，这样就能把一个很大的应用拆分开来（主要是解决一个js文件
-
##第八步：配置代理，解决跨域问题，方便开发环境请求数据 npm install http-proxy-middleware --save # or yarn add http-proxy-middleware 然后在src目录下创建 setupProxy.js 文件 // setupProxy.js const proxy = require('http-proxy-middleware')
-
目录 为何组件没有被重新渲染、或者 mapStateToProps 没有运行？ 为何组件频繁的重新渲染？ 怎样使 mapStateToProps 执行更快？ 为何不在被连接的组件中使用 this.props.dispatch ？ 应该只连接到顶层组件吗，或者可以在组件树中连接到不同组件吗？ React Redux 为何组件没有被重新渲染、或者 mapStateToProps 没有运行？ 目前来看，
-
Universal React Redux Boilerplate A universal React/Redux boilerplate with sensible defaults. Out of the box, thisboilerplate comes with: Server-side rendering with Express Code splitting with dynamic
-
React-Redux-Enterprise A React-Redux boilerplate for enterprise web applications. Before you start with this boilerplate, please take a few minutes to read this article and see if you really need this
-
Live redux-react-starter This repository contains the minimal app to get started with redux, react, hot-reloading, async function and some other great stuffs. How to yarn 0.18+ must be present on your
-
React/Redux Links Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn abou
-
React Redux Saucepan A minimal Universal React redux JS stack using Flow, with hot reloading, linting and server-side rendering. This is a universal react project. It provides server-side rendering an