react-seed

by JasonBai007

JasonBai007 /react-seed

a Starter-Kit for React-ES6-Webpack(2.x) Project

130 Stars 37 Forks Last release: Not found MIT License 55 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Introduction

This repository is an universal React-ES6-Webpack boilerplate for developer to quickly build a super fast and powerful web app that can be rendered on the client using the most cutting-edge technology. Compared to others, this boilerplate has more pithily and more elegant configuration file based on environment variables, one for development, one for production.

Technology Stack

  • React
  • React-Router
  • ES6
  • jQuery
  • antd
  • Less
  • AnimateCSS
  • moment
  • Ajax
  • Mock
  • ECharts
  • Babel
  • Webpack
  • Yarn

Getting Started

安装Yarn $ npm install -g yarn
安装依赖 $ yarn
启动服务 $ yarn start
生成文件 $ yarn run build

Notes

  • JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析
  • 组件类的第一个字母必须大写
  • 组件类只能包含一个顶层标签
  • 组件的属性可以在组件类的 this.props 对象上获取
  • class 属性需要写成 className ,for 属性需要写成 htmlFor
  • this.props.children 属性表示组件的所有子节点
  • this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array
  • React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点
  • 由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错
  • this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性
  • 我们写一个XML标签,实质上就是在调用 React.createElement 这个方法,并返回一个 ReactElement 对象
  • 渲染HTML标签,声明变量采用 首字母小写
  • 渲染React组件,声明变量采用 首字母大写
  • 当需要拓展我们的属性的时候,定义个一个属性对象,并通过 {…props} 的方式引入
  • 属性值使用表达式,只要用 {} 替换 ""
  • 在一个组件的子元素位置使用注释要用 {} 包起来
  • 直接在标签上使用style属性时,要写成style={{}}是两个大括号
  • margin-top要写成marginTop
  • 如果需要使用自定义属性,要加 data- 前缀
  • 在编写JSX时,在 { } 中不能使用语句(if语句、for语句等等),但可以使用求值表达式
  • map遍历的时候,需要为每一条记录添加key
  • 在ES6里,我们通过定义一个继承自React.Component的class来定义一个组件类
  • 给组件定义方法不再用 名字: function()的写法,而是直接用名字(),在方法的最后也不能有逗号了
  • 在ES6下,你需要通过bind来绑定this引用,或者使用箭头函数(它会绑定当前scope的this引用)来调用
  • sources下,点开可以看到webpack:目录,里面可以直接看到我们开发态的源代码,方便调试
  • "build": "rimraf app/dist && webpack -p --env.config production" 先清除dist目录

Articles

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.