本人前端小菜鸡一枚,因为公司要重构网站,打算用用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. curl命令具体解释

    对于windows用户假设用Cygwin模拟unix环境的话,里面没有带curl命令,要自己装,所以建议用Gow来模拟,它已经自带了curl工具,安装后直接在cmd环境中用curl命令就可,由于路径已 ...

  2. 自增锁预分配ID

    http://www.cnblogs.com/xpchild/p/3825309.html mysql> show create table pp; CREATE TABLE `pp` ( `i ...

  3. linux 内核调试方法

    http://my.oschina.net/fgq611/blog/113249 http://my.oschina.net/fgq611/blog/112929

  4. CGI,FastCGI,PHP-CGI与PHP-FPM(转)

    http://www.cnblogs.com/zl0372/articles/php_4.html CGI CGI全称是“公共网关接口”(Common Gateway Interface),HTTP服 ...

  5. ORCLE INNODB 博客与 innodb_lru_scan_depth

    https://blogs.oracle.com/mysqlinnodb/ http://mysqllover.com/?p=485 •MySQL. MySQL 5.6.10 http://www.m ...

  6. Spark目录

    1. Spark1.0.0 应用程序部署工具spark-submit 2. Spark Streaming的编程模型 3. 使用java api操作HDFS文件 4. 用SBT编译Spark的Word ...

  7. 类string的构造函数、拷贝构造函数和析构函数

    原文:http://www.cnblogs.com/Laokong-ServiceStation/archive/2011/04/19/2020402.html   类string的构造函数.拷贝构造 ...

  8. 什么是mysql中的元数据

    一:什么是元数据? 所谓元数据,就是表示数据的数据,这些数据五花八门,总之,只要不是我们存储到数据库里的数据,大多都可以理解为元数据.描述数据库的任何数据—作为数据库内容的对立面—是元数据.因此,列名 ...

  9. linux 安装svn最新版本

    一.安装svn yum install -y subversion-* 结果为Complete就为正确 查看svn版本号 svnserve --version 1.6.11版本 mkdir /opt/ ...

  10. 第一个c++程序 helloworld

    // helloworld.cpp : 定义控制台应用程序的入口点.// #include "stdafx.h"#include "iostream" int ...