最近学习 React 做了个项目，分享下入门经验

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 3216 天前的主题，其中的信息可能已经有所发展或是发生改变。

http://hustlzp.com/post/2016/03/react-first-blood

React 新手，有什么不对的地方欢迎大大指点。

第 1 条附言 · 2016-03-04 10:46:31 +08:00

@magicdawn
@imt
@bobuick
@pheyer
@hkongm

代码在这里：

https://github.com/hustlzp/react-redux-example

代码仅供参考，其中有一些文件是用于部署的，建议新手直接忽略，不然会感觉有点乱~

其实我个人还没有把 Redux 吃透，虽然会用，但是并不知道这样做是为了解决什么问题。

下一个项目如果还用 React ，我会尝试不使用任何 Flux 架构去做。等遇到了问题再上 Flux 。

React

指点

新手

入门

35 条回复 • 2016-05-18 10:43:17 +08:00

wickila

2016-03-03 10:53:22 +08:00

哈哈，看名字就知道是校友。

magicdawn

2016-03-03 11:45:08 +08:00

jsx 作为一门把模板写在 js 里的语言, 没有 if/else 你怎么看? 每次都用 `condition ? positive : negative` 烦不烦, 还是每个条件封装一个方法...

imt

2016-03-03 11:57:52 +08:00

well done

hustlzp

2016-03-03 13:37:27 +08:00

@magicdawn 开始我也有点烦，后来习惯了...

好处就是不用引入新的模板语法， everything is JavaScript 。坏处就是有时候不那么直观。

if else 我一般都是直接用三元表达式写，更复杂的会封装到方法中。

不过我有时候也会觉得烦，也会用这个插件：

https://github.com/AlexGilleran/jsx-control-statements-jstransform

magicdawn

2016-03-03 15:15:56 +08:00

@hustlzp 表示看不下去~语法那关过不去, 玩不下去了~哈哈
每次想玩这个的时候就翻翻官网文档, 看这部分有没有被移去 https://facebook.github.io/react/tips/if-else-in-JSX.html , 一次次发现还在~好忧桑...

hustlzp

2016-03-03 16:20:40 +08:00

@wickila 握爪 :0

hustlzp

2016-03-03 16:21:48 +08:00

@magicdawn 😂

iugo

2016-03-03 17:18:08 +08:00

如果真的距离现代前端有点远, 可以先从 Vue.js 入手.

sodaless

2016-03-03 17:53:47 +08:00

之前一直做 native 开发的，有段时间写了下 react native ，模块化挺好的，学习难度也低

hustlzp

2016-03-03 18:44:09 +08:00

@iugo 恩， Vue 还是比较平和的， React 就有点激进了

hustlzp

2016-03-03 18:53:11 +08:00

@sodaless react native 用在实际项目中坑大吗？

ldehai

2016-03-03 19:19:09 +08:00

@hustlzp 写的很棒，特别是针对学习新技术，不要一上来就用各种框架，容易受挫。对这点很赞同。

hustlzp

2016-03-03 20:14:37 +08:00

@ldehai 谢支持 :)

gudong

2016-03-03 21:51:03 +08:00

不错，写的挺好~

fantastic

2016-03-03 22:14:15 +08:00

哈哈 first-blood dotaer?

hustlzp

2016-03-03 23:27:05 +08:00

@fantastic 初=处，化用一下词语啦，你懂的 ^^

hustlzp

2016-03-03 23:27:22 +08:00

@gudong 谢谢

zhoujianqingz

2016-03-04 07:05:44 +08:00 via iPhone

谢谢！

bobuick

2016-03-04 07:18:09 +08:00

代码呢。

okampfer

2016-03-04 09:06:11 +08:00

请教 SPA 是什么的缩写？

sodaless

2016-03-04 09:07:31 +08:00

@hustlzp 我从 0.12 版本开始用 RN 写两个端的 APP ，到 0.18 因为业务原因弃坑，也没多大坑，有 native 开发经验， JSBridge 了解一下，过渡挺自然的，后面把 RN 代码转换成 H5 ，几乎没怎么改就转过去了

leefly

2016-03-04 09:13:26 +08:00

@okampfer single page application (应该没拼错

pheyer

2016-03-04 09:51:51 +08:00

看了一下 LZ 的博客，几乎是全栈的节奏啊

hkongm

2016-03-04 10:10:29 +08:00

一年多前已经开始尝试 React 了，当时的感觉是，这东西太牛逼了！
一级一级的 Component 通过 Prop 传下去，里面 bind 上，感觉非常好！
当时还没有 Redux ， Flux 也是刚出概念，实现几乎没几个。
写了几个组件后就直接唱衰 Angular ，看看现在 A2 也来学 React 了
由此特别喜欢 FB ，比 G 靠谱多了， ES6 的语法在还没有 Babel 的时候， FB 是如此的激进，敬仰啊

hustlzp

2016-03-04 10:22:57 +08:00

@okampfer Single Page Application

hustlzp

2016-03-04 10:23:46 +08:00

@bobuick 容我把关键信息修改下后 push 到 GitHub

hustlzp

2016-03-04 10:24:56 +08:00

@sodaless soga

hustlzp

2016-03-04 10:26:25 +08:00

@hkongm 同感啊， G 和 FB 是两个风格， G 喜欢搞很复杂的东西，各种黑科技封装； FB 更加简洁明了一些。个人还是喜欢 FB~

hustlzp

2016-03-04 11:04:57 +08:00

@pheyer 多学点总是没错的，有些东西学着学着发现理念都很类似

ChefIsAwesome

2016-03-04 11:11:16 +08:00

为什么 react 好？ react 是 instagram 还是个小团队的时候弄出来的，小团队实用至上，没有乱七八糟概念。
为什么 flux ， graphQL 差？ flux 是 facebook 的人弄出来的，尽整些有的没的，东西弄复杂了，实际问题还没得到解决。
为什么 redxu 现在更受欢迎？ redux 更接近 react 最早的初衷，函数式编程的思想贯彻其中。不扯东扯西，真正能解决问题。
为什么 angular 那么差？ angular 是搞 java 的人做出来的。

hustlzp

2016-03-04 11:12:23 +08:00

@ChefIsAwesome 同感。

liko

2016-03-08 13:20:16 +08:00

huangshitao?

hustlzp

2016-03-08 16:11:43 +08:00

@liko 不是...我的名字开头字母是 lzp

frontman

2016-05-14 12:18:14 +08:00

https://segmentfault.com/q/1010000005121849 能不能帮我解决下这个问题

hustlzp

2016-05-18 10:43:17 +08:00

@frontman 我看了下，好像代码没问题啊。。。