从0开始学习react（一）
本人前端小菜鸡一枚，因为公司要重构网站，打算用用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（一）的更多相关文章
- 从0开始学习react（二）
今天,开始学习第二节!!! 工欲善其事,必先利其器 react推荐我们使用webpack来打包文件,那么我们就用吧!(其实真心不想用啊) 至于好处网上写的天花乱坠的,大家自行解决啊... 这节主要就学 ...
- 从0开始学习react（三）
这次我们来讲解第三节知识,考虑了下,先不去讲什么理论了,毕竟网上一搜一大堆,而且理论真心看不太懂啊!!! 今天我们就直接上实例喽! 大家HIGH起来!!!(想了好久,还是没舍得删这句话) 1.根据下图 ...
- 正式学习React(五) react-redux源码分析
磨刀不误砍柴工,咱先把react-redux里的工具函数分析一下: 源码点这里 shallowEqual.js export default function shallowEqual(objA, ...
- 正式学习React (七) react-router 源码分析
学习react已经有10来天了,对于react redux react-redux 的使用流程和原理,也已经有一定的了解,在我上一篇的实战项目里,我用到了react-route,其实对它还只是 停留在 ...
- 正式学习React(一) 开始学习之前必读
为什么要加这个必读!因为webpack本身是基于node环境的, 里面会涉及很多路径问题,我们可能对paths怎么写!webpack又是怎么找到这些paths的很迷惑. 本文是我已经写完正式学习Rea ...
- 正式学习 react(三)
有了基础的webpack基础,我们要对react的基本语法进行学习. 我这个教程全部用es6 实现.可能会忽略一些最基本的语法讲解,这些你在官网上或者其他别的地方都比我讲的全. 今天我要讲一下reac ...
- 学习react
推荐资源: 一位react的最初构建者写的学习react的建议,这是翻译过的http://www.360doc.com/content/16/0129/07/13518188_531384175.sh ...
- React学习-React初识
一.前言 为什么要去学习React呢,关于前端三大框架Angular,Vue,React其实都得去学吧,因为大家都在用啊,大家都再谈论啊,面试什么的都要求,没办法,曾几何时,大家都说求求大佬们别坑新了 ...
- 0基础学习web技术
说实话0基础学习前端挺难的,当然也没有是技术是容易学习的 我只是想分享一下我的学习经历: 分为以下几点: 1:学习html和css ,学习完成之后可以模仿各大网站的静态网页 2:学习原生js基础,jq ...
随机推荐
- 【JavaScript】JS跨域设置和取Cookie
cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie 的值.本文主要JS怎样 ...
- ios开发——实用技术篇&数据保存于恢复
数据保存于恢复 用户操作(输入数据)之后,应用程序退出并且终止之后,当用户再次打开应用的时候还是保持原来的状态 一:在storyBoard中设置恢复标志符 二:在AppDalegate中代理方法 -( ...
- cocos2d-html5的jsb模式下如何在编译时自动将js编译为jsc
cocos2d-html5是一个用JS来开发游戏的框架,通过javascript Binding的方式可以将游戏编译到手机上.这对前端开发人员来说非常方便,开发效率也比使用c++开发要快的多. jsb ...
- IIS问题汇总
1.问题描述 VS和Framework的安装顺序不对导致网站打不开 原因分析 Framework出现问题 解决办法 重新注册Framework版本 a.开始->运行-&g ...
- C#开源项目
原文: http://alance.iteye.com/blog/693987 一.AOP框架 Encase 是C#编写开发的为.NET平台提供的AOP框架.Encase 独特的提供了 ...
- vsftpd虚拟用户创建实例(转载)
vsftpd虚拟用户创建实例 发布:theboy 来源:net [大 中 小] vsftpd虚拟用户创建实例,有需要的朋友可以参考下. vsftpd虚拟用户创建实例,有需要的朋友可以参考 ...
- 翻译：WebApi 认证--用户认证Oauth解析
The Web API v2用户认证模板提供了流行的应用用户认证场景,如.使用本地帐号的用户名密码认账 (包括创建用户.设置和修改密码)以及使用第三方的认证方式,如facebook,googl ...
- 使用Apache Felix Remote Shell远程管理OSGI
通过Apache Felix Remote Shell提供的org.apache.felix.shell.remote能使用telnet客户端访问远程的[Apache Felix Shell]和[Ap ...
- pxe+kickstart实现无人值守批量安装linux
pxe+kickstart实现无人值守批量安装linux 实验准备:主机myrhel2作为服务器端,新建一个没有安装操作系统的虚拟主机,而且其与服务器端在同一个网段 安装的条件: 服务器端: ...
- Gstreamer基本概念介绍（开发前必读）
1. 元件(Elements) 元件(element)是GStreamer中最重要的概念.你可以通过创建一系列的元件(Elements),并把它们连接起来,从而让数据流在这个被连接的各个元件(Elem ...