本人前端小菜鸡一枚，因为公司要重构网站，打算用用react，毕竟一切为了学习（装B）嘛！！！

在学习react之前，看了许多资料，博客，官方文档之类的，可我这记吃不记打的记性，还是需要在这里记录一下，能帮助别人最好，不能或者哪里有错的话也希望各位大大嘴下留情（爱说不说，反正我不看评论）！！！

里面有些内容是参考一些牛人的，站在巨人的肩膀嘛不是！！！

1.下载react

关于这个，大家自己去官网下吧，好不好？（啥？你不知道在哪下，虽然我不太会用github，但是我觉得百度其实还不错）

2.关于JSX

JSX，理解起来就是用这个东去编写，无论是别人还是自己都能对代码可视化更加好一些。

这里关于JSX要讲的就是本来REACT推荐的是引入JSXTransformer.js，不过后来说是和babel怎么怎么的，反正FB决定不维护了，以后就用babel了，害的我开始还在一直用JSXTransformer.js。

所以就有开始的这个样纸：

变成了这个样纸：

3.开始编写Hello World

所有伟大的成果都是从Hello World开始的。

<!DOCTYPE html>

<html>

  <head>

    <title>Hello React</title>

    <script src="js/react.js"></script>

    <script src="js/react-dom.js"></script>

    <script src="js/browser.min.js"></script>

  </head>

  <body>

    <div id="content"></div>

    <script type="text/babel">

    React.render(

           <h1>Hello, world!</h1>,

           document.getElementById('content')

        );

    </script>

上面这段代码输出成功的话，恭喜你，踏出了REACT成功的第一步！^_^

ps:从外部引用底部的js也可以哦！！！官网给出说CHROME好像必须开启HTTP服务，哎，搭个服务器吧，亲！

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

本来想这就结束的，可毕竟是处女作，就在多嘴几句好了。

这里想解释下自己的话：（不喜可直接略过啊）

从开始接触前端到现在其实也就1年时间，就在这充满各种大牛，各种百度‘退休’，阿里‘跳槽’，腾讯‘被炒’的地方写博其实压力很大呀！

而且还充斥在这个各种框架、插件漫天飞的年代，node，react，es6，angular2，ext，妹子UI，Bootstrap......多的头都大了。

还是希望自己能够认真挑选，仔细对待，毕竟个人觉得，要是一个网站里这拉一点点用用，那拉一点点用用，那感觉肯定会让你酸爽的。

尤其是不要贪多嚼不烂（这明显就是在骂自己），一天研究出一个你可能将来用到的问题，也比从别人那里扣过来一点直接解决问题的好。

自己只想以一个菜鸟的角度去帮助别人，帮助自己，谢各位体谅！

那么我们下期见喽！！！

结尾名言：不要太早遇到对的人，人生遇到的每个人，出场顺序真的很重要，很多人如果换一个时间认识，就会有不同的结局。（这个就不用引用出处了吧！）

参考资料：http://reactjs.cn/react/docs/getting-started.html

从0开始学习react（一）的更多相关文章

  1. 从0开始学习react（二）

    今天,开始学习第二节!!! 工欲善其事,必先利其器 react推荐我们使用webpack来打包文件,那么我们就用吧!(其实真心不想用啊) 至于好处网上写的天花乱坠的,大家自行解决啊... 这节主要就学 ...

  2. 从0开始学习react（三）

    这次我们来讲解第三节知识,考虑了下,先不去讲什么理论了,毕竟网上一搜一大堆,而且理论真心看不太懂啊!!! 今天我们就直接上实例喽! 大家HIGH起来!!!(想了好久,还是没舍得删这句话) 1.根据下图 ...

  3. 正式学习React(五) react-redux源码分析

    磨刀不误砍柴工,咱先把react-redux里的工具函数分析一下: 源码点这里  shallowEqual.js export default function shallowEqual(objA, ...

  4. 正式学习React (七) react-router 源码分析

    学习react已经有10来天了,对于react redux react-redux 的使用流程和原理,也已经有一定的了解,在我上一篇的实战项目里,我用到了react-route,其实对它还只是 停留在 ...

  5. 正式学习React(一) 开始学习之前必读

    为什么要加这个必读!因为webpack本身是基于node环境的, 里面会涉及很多路径问题,我们可能对paths怎么写!webpack又是怎么找到这些paths的很迷惑. 本文是我已经写完正式学习Rea ...

  6. 正式学习 react(三)

    有了基础的webpack基础,我们要对react的基本语法进行学习. 我这个教程全部用es6 实现.可能会忽略一些最基本的语法讲解,这些你在官网上或者其他别的地方都比我讲的全. 今天我要讲一下reac ...

  7. 学习react

    推荐资源: 一位react的最初构建者写的学习react的建议,这是翻译过的http://www.360doc.com/content/16/0129/07/13518188_531384175.sh ...

  8. React学习-React初识

    一.前言 为什么要去学习React呢,关于前端三大框架Angular,Vue,React其实都得去学吧,因为大家都在用啊,大家都再谈论啊,面试什么的都要求,没办法,曾几何时,大家都说求求大佬们别坑新了 ...

  9. 0基础学习web技术

    说实话0基础学习前端挺难的,当然也没有是技术是容易学习的 我只是想分享一下我的学习经历: 分为以下几点: 1:学习html和css ,学习完成之后可以模仿各大网站的静态网页 2:学习原生js基础,jq ...

随机推荐

  1. android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu

    示意图就不展示了,和上一节的一样,滑动菜单SlidingMenu效果如何大家都比较熟悉,在这里我简单说明一下用自定义ViewGroup来实现. 实现方法:我们自定义一个ViewGroup实现左右滑动, ...

  2. iOS开发——开发必备OC篇&UITableView设置界面完整封装（二）

    UITableView设置界面完整封装(二) 简单MVC实现UITableView设置界面之Cell右边类型设置 首先来看看第一种方法证明使用,结合两种方法之后根据个人的爱好去选择就可以了, 一:使用 ...

  3. C预处理器

    C预处理器 目录 概述 文件包含 宏替换 条件包含 概述 预处理器是编译过程中单独执行的第一个步骤 文件包含 #include "文件名" / #include <文件名&g ...

  4. 汉化Eclipse+配色方法(官方语言包)

    一. 汉化方法: 1.Eclipse版本查询:安装目录readme,查版本号;参照查代号如下表: 代号 平台版本 项目 主要版本发行日期 SR1发行日期 SR2发行日期 N/A 3.0 [1] N/A ...

  5. RC4加密算法

    RC4是Ron Rivest在1987年设计的密钥长度可变的流加密算法.它加解密使用相同的密钥,因此也属于对称加密算法.RC4是有线等效加密(WEP)中采用的加密算法,也曾经是TLS可采用的算法之一. ...

  6. 浏览器自动化工具-Selenium

    Table of Contents 1. 什么是Selenium 2. 简单的例子 3. PS 什么是Selenium Selenium可以自动化操作浏览器,利用Selenium可以模拟用户操作,因此 ...

  7. MR 的 mapper 数量问题

    看到群里面一篇文章涨了贱识 http://www.cnblogs.com/xuxm2007/archive/2011/09/01/2162011.html 之前关注过 reduceer 的数量问题,还 ...

  8. .net中的多线程

    一.多线程的概念        什么是进程呢?当一个程序开始运行时,它就是一个进程,进程所指包括运行中的程序和程序所使用到的内存和系统资源.而一个进程又是由多个线程所组成的,线程是程序中的一个执行流, ...

  9. swift 委托代理传值

    委托代理 1.定义个协议 2.声明一个委托代理 3.指定委托代理,调用委托实现的协议方法 4实现LoadingDelegate协议 代码如下: import UIKit //1.定义个协议 proto ...

  10. 20145102 《Java程序设计》第5周学习总结

    20145102 <Java程序设计>第5周学习总结 教材学习内容总结 数组在内存中会是连续的线性空间,根据索引随机取回时速度快,如果操作上有这类需求时,像是排序,就可以使用;ArrayL ...