React学习笔记-1-什么是react，react环境搭建以及第一个react实例

时间 2019-11-09

原文原文链接

什么是react？
react的官方网站：https://facebook.github.io/react/
下图这个就是就是react的标志，很是巧合的是他和咱们的github的编辑器Atom很是类似。react是Facebook官方推出的一个javascript的库，如今已经有了很是多的库和框架Facebook为何还要开发一款新的框架呢？缘由就是 Facebook遇到了一些新的问题。Facebook须要解决的问题是构建数据不断变化的大型应用。大型应用是什么意思？数据不断变化带来什么问题呢？
数据变化能够致使两个很是严重的问题，第一个问题是大量的dom操做;第二个问题就是逻辑会变得很是的复杂。数据要经过页面来进行展现，数据不断变化，就会致使dom不断变化，从而须要进行大量的dom操做，尽管咱们已经了jQuery等操做dom的利器，但咱们仍然须要编写许多手动的dom操做代码。数据和逻辑密切相关，数据变化的时候，逻辑也会发生变化，相信你们都会有这样的经历，当你去修改一个已有项目的时候，改动一个地方的代码，每每会产生许多意料以外的后果，这就是由于数据和逻辑之间的关系很是复杂，牵一发而动全身，因此数据变化会致使这样两种后果。
那react如何来解决这两个问题呢？对于dom操做，react的操做是采用自动dom操做，在react中，你不须要手动进行dom操做，只须要告诉react要展现什么内容，react会自动来操做dom。针对第二个问题，react的方案吧状态和内容显示的对应起来，这样咱们就能够一目了然的知道，状态变化，内容会如何变化，从而理清程序的逻辑。
react有两个特色：第一个是简单，第二个是声明式。简单有两层意思，第一层意思是react学习简单，上手容易，第二层意思是是react写出的代码很是简单，容易阅读。声明式就是咱们前面说的自动dom操做，你只须要声明给react显示什么内容，至于如何把这些内容显示到页面上，是由react来帮你完成的。
在react中，核心是组件，组件的设计目的是提升代码的复用率，下降测试难度和代码复杂度。
组件提升代码复用率：组件将数据和逻辑封装，相似面向对象中的类。咱们能够将通用的逻辑和数据封装起来，从而能提升代码的复用率。
下降测试难度：组件高内聚，低耦合，很赞成对单个组件进行测试，经过模拟他的输入，或者输出，来测试组件的功能是否完善。
下降代码复杂度：直观的语法能够极大地提升可读性，下降代码的复杂度和维护难度。
react的发展过程
2013年6月，Facebook官方发布react--------》2013年9月，react热度上涨，愈来愈多的人开始关注react-------》2015年3月，React Native发布（就是用react来编写跨平台的移动端应用），简单说就是咱们能够用react来编写iOS，Android和Windows phone的应用，在目前的前端领域，代码模块化和用js来编写跨平台的移动端应用，是两个主要的探索方向，在用js来编写跨平台的移动端应用中，已经有了不少的方案，可是这些方案或多或少都有一些缺陷.
react的现状
react是发布在github上面的开源项目。
国外使用的公司：Facebook，Flipboard，Airbnb，BBC，Github，Instagram,Reddit,Uber,WhatApp,yahoo
国内使用React的公司：支付宝，淘宝，大搜车，Teambition,豆瓣，豌豆荚
这个教程使用的是0.13.2,咱们是学习，就不下载了，直接使用cdn服务器：http://www.bootcdn.cn/
咱们须要两个文件
react.js://cdn.bootcss.com/react/0.13.2/react.js
JSXTransformer.js://cdn.bootcss.com/react/0.13.2/JSXTransformer.js
使用的时候，记得在前面加上http://
可能这么说有点迷瞪，接着看下面的就懂了。

react的程序结构
react程序本质上就是一个html页面，html页面中能够编写Js代码和css代码，固然咱们也能够将js和css单独存放，最后在引入到html文件中。
这里须要注意的是，react程序很是特别的一点，就是使用了jsx，咱们后面会详细说明jsx的用法，这里只要知道jsx是写在js里面的就行，下面咱们放代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
</head>
<body>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.js"></script>
    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>
    <script type="text/jsx">
       var HelloWorld=React.createClass({
           render:function(){
              return <p>Hello,world</p>
           }
       });
       React.render(<HelloWorld></HelloWorld>,document.body);
    </script>
</body>
</html>

注意咱们的第三个script的type类型为text/jsx,注意HelloWorld的首字母大写，咱们后面会说。javascript