V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
hustlzp
V2EX  ›  程序员

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

  •  
  •   hustlzp ·
    hustlzp · 2016-03-03 10:46:45 +08:00 · 13187 次点击
    这是一个创建于 2948 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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 。
    35 条回复    2016-05-18 10:43:17 +08:00
    wickila
        1
    wickila  
       2016-03-03 10:53:22 +08:00
    哈哈,看名字就知道是校友。
    magicdawn
        2
    magicdawn  
       2016-03-03 11:45:08 +08:00
    jsx 作为一门把模板写在 js 里的语言, 没有 if/else 你怎么看? 每次都用 `condition ? positive : negative` 烦不烦, 还是每个条件封装一个方法...
    imt
        3
    imt  
       2016-03-03 11:57:52 +08:00
    well done
    hustlzp
        4
    hustlzp  
    OP
       2016-03-03 13:37:27 +08:00
    @magicdawn 开始我也有点烦,后来习惯了...

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

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

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

    https://github.com/AlexGilleran/jsx-control-statements-jstransform
    magicdawn
        5
    magicdawn  
       2016-03-03 15:15:56 +08:00
    @hustlzp 表示看不下去~语法那关过不去, 玩不下去了~哈哈
    每次想玩这个的时候就翻翻官网文档, 看这部分有没有被移去 https://facebook.github.io/react/tips/if-else-in-JSX.html , 一次次发现还在~好忧桑...
    hustlzp
        6
    hustlzp  
    OP
       2016-03-03 16:20:40 +08:00
    @wickila 握爪 :0
    hustlzp
        7
    hustlzp  
    OP
       2016-03-03 16:21:48 +08:00
    @magicdawn 😂
    iugo
        8
    iugo  
       2016-03-03 17:18:08 +08:00
    如果真的距离现代前端有点远, 可以先从 Vue.js 入手.
    sodaless
        9
    sodaless  
       2016-03-03 17:53:47 +08:00
    之前一直做 native 开发的,有段时间写了下 react native ,模块化挺好的,学习难度也低
    hustlzp
        10
    hustlzp  
    OP
       2016-03-03 18:44:09 +08:00
    @iugo 恩, Vue 还是比较平和的, React 就有点激进了
    hustlzp
        11
    hustlzp  
    OP
       2016-03-03 18:53:11 +08:00
    @sodaless react native 用在实际项目中坑大吗?
    ldehai
        12
    ldehai  
       2016-03-03 19:19:09 +08:00
    @hustlzp 写的很棒,特别是针对学习新技术,不要一上来就用各种框架,容易受挫。对这点很赞同。
    hustlzp
        13
    hustlzp  
    OP
       2016-03-03 20:14:37 +08:00
    @ldehai 谢支持 :)
    gudong
        14
    gudong  
       2016-03-03 21:51:03 +08:00
    不错,写的挺好~
    fantastic
        15
    fantastic  
       2016-03-03 22:14:15 +08:00
    哈哈 first-blood dotaer?
    hustlzp
        16
    hustlzp  
    OP
       2016-03-03 23:27:05 +08:00
    @fantastic 初=处,化用一下词语啦,你懂的 ^^
    hustlzp
        17
    hustlzp  
    OP
       2016-03-03 23:27:22 +08:00
    @gudong 谢谢
    zhoujianqingz
        18
    zhoujianqingz  
       2016-03-04 07:05:44 +08:00 via iPhone
    谢谢!
    bobuick
        19
    bobuick  
       2016-03-04 07:18:09 +08:00
    代码呢。
    okampfer
        20
    okampfer  
       2016-03-04 09:06:11 +08:00
    请教 SPA 是什么的缩写?
    sodaless
        21
    sodaless  
       2016-03-04 09:07:31 +08:00
    @hustlzp 我从 0.12 版本开始用 RN 写两个端的 APP ,到 0.18 因为业务原因弃坑,也没多大坑,有 native 开发经验, JSBridge 了解一下,过渡挺自然的,后面把 RN 代码转换成 H5 ,几乎没怎么改就转过去了
    leefly
        22
    leefly  
       2016-03-04 09:13:26 +08:00
    @okampfer single page application (应该没拼错
    pheyer
        23
    pheyer  
       2016-03-04 09:51:51 +08:00
    看了一下 LZ 的博客,几乎是全栈的节奏啊
    hkongm
        24
    hkongm  
       2016-03-04 10:10:29 +08:00
    一年多前已经开始尝试 React 了,当时的感觉是,这东西太牛逼了!
    一级一级的 Component 通过 Prop 传下去,里面 bind 上,感觉非常好!
    当时还没有 Redux , Flux 也是刚出概念,实现几乎没几个。
    写了几个组件后就直接唱衰 Angular ,看看现在 A2 也来学 React 了
    由此特别喜欢 FB ,比 G 靠谱多了, ES6 的语法在还没有 Babel 的时候, FB 是如此的激进,敬仰啊
    hustlzp
        25
    hustlzp  
    OP
       2016-03-04 10:22:57 +08:00
    @okampfer Single Page Application
    hustlzp
        26
    hustlzp  
    OP
       2016-03-04 10:23:46 +08:00
    @bobuick 容我把关键信息修改下后 push 到 GitHub
    hustlzp
        27
    hustlzp  
    OP
       2016-03-04 10:24:56 +08:00
    @sodaless soga
    hustlzp
        28
    hustlzp  
    OP
       2016-03-04 10:26:25 +08:00
    @hkongm 同感啊, G 和 FB 是两个风格, G 喜欢搞很复杂的东西,各种黑科技封装; FB 更加简洁明了一些。个人还是喜欢 FB~
    hustlzp
        29
    hustlzp  
    OP
       2016-03-04 11:04:57 +08:00
    @pheyer 多学点总是没错的,有些东西学着学着发现理念都很类似
    ChefIsAwesome
        30
    ChefIsAwesome  
       2016-03-04 11:11:16 +08:00
    为什么 react 好? react 是 instagram 还是个小团队的时候弄出来的,小团队实用至上,没有乱七八糟概念。
    为什么 flux , graphQL 差? flux 是 facebook 的人弄出来的,尽整些有的没的,东西弄复杂了,实际问题还没得到解决。
    为什么 redxu 现在更受欢迎? redux 更接近 react 最早的初衷,函数式编程的思想贯彻其中。不扯东扯西,真正能解决问题。
    为什么 angular 那么差? angular 是搞 java 的人做出来的。
    hustlzp
        31
    hustlzp  
    OP
       2016-03-04 11:12:23 +08:00
    @ChefIsAwesome 同感。
    liko
        32
    liko  
       2016-03-08 13:20:16 +08:00
    huangshitao?
    hustlzp
        33
    hustlzp  
    OP
       2016-03-08 16:11:43 +08:00
    @liko 不是...我的名字开头字母是 lzp
    frontman
        34
    frontman  
       2016-05-14 12:18:14 +08:00
    https://segmentfault.com/q/1010000005121849 能不能帮我解决下这个问题
    hustlzp
        35
    hustlzp  
    OP
       2016-05-18 10:43:17 +08:00
    @frontman 我看了下,好像代码没问题啊。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2809 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 14:56 · PVG 22:56 · LAX 07:56 · JFK 10:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.