React入门项目【写给那些喜欢React而不喜欢Webpack的人】
发布于 5 年前 作者 simongfxu 28474 次浏览 最后一次编辑是 4 年前 来自 分享

前些天想学习下当下最先进的React,翻了好多资料,总算对React有了初步了解。 不得不说,React真的只能称之为类库,因为如果你要拿它来做项目,仅仅靠React是远远不够的。 首先React-Router是必不可少的,接着要考虑怎么存取数据那么你可能又要花很多时间看Redux。 很可能写着写着,想直接在组件里面写css,然后又要看各种css in js,等等诸如此类的坑等着你来跳。。。 目前用React的主流项目,不用ES6逼格简直不能再low,然后Babel、ESLint什么的也都必不可少。 如果你之前对这些都没怎么接触,那么想要写一个完整的React Demo难度还是挺大的。 至少不像以前jQuery那样在页面引入几个js、css然后直接开撸那么简单。 最烦人的就是,如果你用Webpack这种重量级的工具,最后的时间可能都花在它身上了。(反正楼主智商不够,超级不喜欢Webpack,被虐了两三次就不敢用了) 最后楼主还是选择了无脑的Browserify,用了之后感觉也还OK,不知道为什么网上大部分React项目都是Webpack(可能智商真的不够-_-)。 好吧,废话少说,show me the code! react-sample-project

工具集 tools

  • React
  • React Router
  • Browserify
  • Gulp
  • Babel
  • npm

编辑器 Editor

Atom / WebStorm

安装 Install

前端资源依赖于 npm,开发阶段资源直接引用 node_modules 中的资源文件

npm install

开发 Development

由于使用了ES6,需要在开发阶段实时编译jsx:

npm run watch

入口页面 pages/index-dev.html

发布 Build

npm run build (gulp)

build改动:

  • 生成assets-build
  • 生成pages/index.html

运行 Run

运行一个本地静态服务器查看demo,可能需要先 npm install -g puer

puer .

另外,附上我搜集的一些比较实用的学习资料,建议先看这些撸起来,再看什么乱七八糟的awsome系列React入门资源整理

12 回复

不错,对我来说有用!

来自酷炫的 CNodeMD

webpack更能迎合组件化思想吧

来自酷炫的 CNodeMD

@yinzSE 哎,让他吃点苦头就好了

和我看react的感受一摸一样。。

@tigerlove 这个过程过去了就舒服多了。

@i5ting webpack 学习确实需要点时间, 不像browserify 拿来就直接用了, 最开始我也蛮喜欢browserify的,够简单 不过还是webpack更强大。

来自酷炫的 CNodeMD

@yinzSE 强大不否认。 但是1)这个工具的设计理念我难以苟同;2)真心复杂 我已经习惯了像gulp+browserify这样简单而美好的东西,真的很难适应webpack。 还有就是如果真讲究开发阶段的体验,我觉得现阶段的构建工具都比不上requirejs。 requirejs天生异步,开发阶段不需要额外的预处理工作,就这一点比当下的种种构建工具不知道强多少。

@simongfxu 技多不压身嘛. 当时看webpack介绍的时候, 有facebook 加成 所以看了看.

@qinyang912 我居然没搜到这个,惭愧

回到顶部