minooo / react-study Goto Github PK

渐进式学习React生态圈

HTML 3.09% JavaScript 59.78% CSS 37.14%

react redux react-router webpack hmr es6 redux-saga

react-study's Introduction

react.js 是一个构建用户界面的javascript库，它因单向数据绑定和虚拟 DOM 两大特点在前端界大放异彩。
因为它解决了当下网页性能陷入的瓶颈————由于直接操作DOM导致页面性能损失很大，而虚拟DOM避免了直接操作DOM(Jquery 是一个典型的操作DOM的库，所以 React 开发中，我们尽量不要使用Jquery)。再加上 React 单向数据绑定的特点使得业务逻辑更加清晰可控。
另外，react.js 是大名鼎鼎的 Facebook 一手打造维护，目前其在 github 上已有超过5万的 Star 量。
同时，react 社区也异常活跃，各种基于 React 的非常优秀的库和框架层出不穷，进而推动了 react 的流行和壮大，围绕 React 为核心的生态圈已悄然成型。

版本维护日志

精简了热重载[HMR]配置；修复了step-04 导航"复杂"上的示例在苹果手机上异常的问题。
——2016/12/22
修复了部分电脑运行step-04出错的问题；
修复了脚手架在应用react最新版本 15.4.1后，无法在微信上显示的问题。
——2016/12/18

认识React生态圈

用阮一峰老师的话说就是： React 已不是一个库，也不是一个框架，而是一个庞大的体系。想要发挥它的威力，整个技术栈都要配合它改造。你要学习一整套解决方案，从后端到前端，都是全新的做法。时至今日，围绕以React为核心的技术栈也日益成型，它主要包含：

React,
npm
js打包工具（如：webpack）
ES6
Routing
Redux

你不需要把这些都学完才去使用 React. 只需要在你遇到问题需要解决的时候, 才进入相关的学习。

学习 React 生态圈

学习 React 生态圈是一个综合应用React技术栈的过程，这也是最接近我们实际开发运用React的情境，为此，笔者特地根据以往React开发经验，精心制作了React-Study系列React技术栈学习模板，以实际项目开发情境为目标，从最简单的hello,world开始，通过逐步升级配置，来学习React生态圈并最终应用到公司项目中。

React-Study 系列模板主要包含以下四部分

step-01（已完成）这部分就是基础的hello,world模板，前面说了，这系列模板是以实际项目开发情境为目标而构建的，虽说是 hello,world的示例，但是它综合应用了 React+webpack+es2015+npm ，并且分为开发模式（开启了热替换和sourcemap）和产品模式（也就是打包，开启了代码压缩等优化）
step-02（已完成） step-02 是在 step-01的基础上添加额外配置完成的，这一部分添加了样式，字形，图片，等加载器配置。并初步展示了在项目实践中，React技术栈的一个合理的目录结构应该是怎样的。由于应用了CSSModules以及相关的辅助插件，CSS的语法更加便利简洁，这些在项目的组件样式中都有体现。同时，也展示了在ES6下，React组件相关写法，以及标准语法的规范的推荐。总之，React带你走进组件化的美好
step-03（已完成） step-03 是在 step-02 的基础上开发的，step-03 主要围绕添加 react-router 进行配置，以及在react移动端开发中，强烈推荐使用antd-mobile 这个特别符合我国国情的react组件库。本模板延续组件化的**，以及样式的模块化（cssModules), 并以真实项目实践写了几个简单的组件，包括底部导航，好店列表，以及下拉菜单等。目的就是展示下，在真实项目中，组件化的**是如何实践的。
step-04 (已完成） step-04 是在 step-03 的基础上添加额外配置完成，为了更好的解决react中组件之间的数据传递，
此模板引入了redux，redux 的三大核心法宝就是 action, reducer, store，
redux入门推荐教程 redux-tutorial 使用教程 redux 入门教程；
同时为了更优雅的管理redux的异步操作，经过再三对比和考虑，本模板使用了redux-saga,用来替代redux-thunk。
redux-sage中文文档(繁体，同步)

启动React生态圈

克隆项目

git clone https://github.com/minooo/React-Study.git

进入目录（比如step-01)

cd step-01

安装依赖

npm install

启动开发模式（运行 npm run build，即可将项目打包）

npm start

启动就绪后，打开浏览器，输入 http://localhost:3000/ ，看到惊喜了吗？

常见问题说明。

请保证电脑安装的 node 版本在 6.0以上 ，如果你“不幸”安装了4.0版本，
请先将其卸载，再安装6.0+版本（目前node官网已有7.2版本英文官网，请尽量安装最新版）
很多新手朋友可能事先跟着react官网实例做了一些练习，用的都是 es5 的语法。
而本项目代码采用的都是 es6 的语法，这也是react官网推荐的。如果你对es6语法不太熟悉
可以看下React es5---es6 写法对照表
同时也建议你花30分钟，快速了解ES6语法当然，本项目所有组件示例也可以当作你学习es6写法的参考。
如果你有使用webstorm作为你的IDE，初次运行本项目，软件可能会提示你 Add watcher ，
由于本项目已配置好了一整套的编译流程，所以不要此类协助，直接忽略取消即可；另外由于
项目代码用的都是JSX语法，webstorm 可能默认的解析js语法是es5，
所以此时你会看到文件都是“一片红”错误标注，如下改下解析设置就行了：
File -> Settings -> Languages & Frameworks -> JavaScript
选择右侧面板中的下拉框，将选项 JavaScript languaga version 的值改为 React JSX 即可
如果你在学习本项目遇到问题，请加群交流： 419922267

License

MIT

react-study's People

Contributors

Stargazers

Watchers

Forkers

meteorcyclops daisyhuli noworg lduoduo yafey guo-guo qianlanse livfrel tianya1015 mochazzxx zgcodes cnxueyang picotincc focus7eleven rockyou9000 mayitbe-zh alexanderluo szwork2013 shichencong sccong qussers daisty bubao moriarty02 ziison bluefantasy728 harrifeng toney-li smalleast only-ai littlekign 693614965 sxyseo mylovedan zyh-akk schemex yplayypay blackmady hebruce110 highmind gcfanghao sunny628 fagaiweizhuren tempest94 xyyueran bcp9527 bbyford donyz-v jyxtsgx zzzzzzztc 1514louluo liquanchun jieswift yanran200730 unsilence qintong91 hahacoo dv-studio excelsior-wyh ping102625 bhcbhc liaokai 181108377 owjcodemonkey akirasun wzmhyli daleiyaoxiayu 94dreamer grhyme shawnlyn ittit linningmii lottid liyanghawk jordan-cheng as3ecoder founderisshadowwalker usefulfwei jyxtsgx2016 shenhua0222 crystal1990 linyongping junfangfan fishmwei niunai2016 tiangeyu gnipbao wrr951109 libin1991 jaykin bing1994 809074087 o-r yifan-eric wangshuang0 temulun yang-ren-ting caoshining gxtynzl ibk2012

react-study's Issues

【分享】关于React组件规范化的一些建议

一个良好的代码规范，不仅能提升web性能，提高团队协作，还便于后期维护，拓展。
“代码即文档”是我们对规范的一个愿景。下面就基于ES6的React项目配置，谈几点对React组件规范的几点建议。

我们的组件分为两大类，UI组件和container组件。

UI组件

UI组件是构成前端界面的基础单元，它们不涉及业务逻辑，无生命周期函数，只负责单纯的渲染，所有数据都通过 props 传入。

一，咱们的UI组件大致分为两种情况，无状态和有状态

如果是无状态组件，则使用纯函数，我们大部分的UI组件都是这种纯函数。

import React from 'react'

export default ({ hello }) => (
  <div>{hello}</div>
);

如果是有状态组件(这里的状态，只是负责UI自身的状态），则使用 React 的 PureComponent

import React, {PureComponent} from 'react' 

export default class index extends PureComponent {
  state = {
    focus: 0
  };
  
  render(){ 
    const {focus} = this.state;
    ...
  }
}

然后在components文件里的 index.js 中如此导出我们的默认模块，类似于这样

export { default as Swiper } from './Swiper'
export { default as FastNav } from './FastNav'

二，一般在有状态组件中可能需要定义一些方法，这些方法使用箭头函数，以此避免render中的this绑定带来的性能损耗。

// bad
export default class Listing extends PureComponent {
  //...
  onClick () {
    ...
  };
  render(){ 
    return(
      <div onClick={this.onClick.bind(this)}>...</div>
    )
  }
}

// good
export default class Listing extends PureComponent {
  //...
  onClick = () => {
    ...
  };
  render(){ 
    return(
      <div onClick={this.onClick}>...</div>
    )
  }
}

三，如果闭合标签内无子节点，则写为单标签

// bad
<i className="i-left"></i>

// good
<i className="i-left" />

四，为了让便于阅读，请给代码合理的间隔，换行，让我们的代码像诗一样干净利索，一目了然。

// bad
const Course = ({address, tel, onClick}) =>
 <div className="bg-white pad2 overflow-h">
      <a href="javascript:;" className="ui-border-r inblock pr10" onClick={onClick}>
      <i className={"i-zuobiao32 main-color font-size-16 fl mr5 "+styles.icon}></i>
      <span className={"text-overflow-1 " +styles.address}>{address}</span>
      </a>
      <a href={"tel: "+tel}><i className={"i-dianhua32 main-color font-size-16 fr "+styles.icon}></i></a
</div>;

// good
const Course = ({address, tel, onClick}) =>
  <div className="bg-white pad2 overflow-h">
    <a
      href="javascript:;"
      className="ui-border-r inblock pr10"
      onClick={onClick}
    >
      <i className={`i-zuobiao32 main-color font-size-16 fl mr5 ${styles.icon}`} />
      <span className={"text-overflow-1 " + styles.address}>{address}</span>
    </a>

    <a href={"tel: " + tel}>
      <i className={"i-dianhua32 main-color font-size-16 fr " + styles.icon} />
    </a>
  </div>;

五，尽量避免使用数组的索引作为key的属性值，推荐使用指定的ID，原因？
ps: 关于这点，个人的建议是，如果你的数组只是用来展示的，此时用index作为key也无妨；如果你的数组渲染出来的组件涉及到比如增删改查这样的操作，那就必须使用id了，以此来避免数组变化引起index的混乱。

// bad
{todos.map((todo, index) =>
  <Todo
    {...todo}
    key={index}
  />
)}

// good
{todos.map(todo => (
  <Todo
    {...todo}
    key={todo.id}
  />
))}

六，使用 ref 回调函数，官方ref

// bad
<Foo
  ref="myRef"
/>

// good
<Foo
  ref={(ref) => { this.myRef = ref; }}
/>

七，使用箭头函数锁定局部变量

{props.items.map((item, index) =>
  <Item
    key={item.key}
    // good
    onClick={() => this.doSomethingWith(item.name, index)}
   
    // bad
    onClick={this.doSomething.bind(null, item.name, index)}
  />
)}

【分享】React-Study中的一些实用小技巧

1. windows下使用webstorm时，项目的热更新不灵敏怎么办？

现象：比如修改一个字符，webstorm 往往“感受不到”变化进而无法重编译。
原因：webstorm 默认自动保存，导致有时候手动保存无效
解决：关闭webstorm的自动保存

步骤：

打开面板
File -> Settings -> Appearance & Behavior -> System Setting
如下设置（取消勾选红框内选项）
如此，自动保存就变为需要手动保存了，为了让每次修改能更显眼，建议让没有被保存的文件有星号提示。设置如下（勾选红框内选项）
File -> Settings -> Edit -> General -> Editor Tabs
然后就可以愉快的使用热更新了，此方案是群内小伙伴提供，感谢 @blacker @武汉-小兮

2. npm 下载依赖包很慢怎么办？

果断换用yarn。
这是我对yarn的介绍和配置，很好用，相信我