下载.svgReact是用于构建用户界面的JavaScript库, 起源于Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
React经历了多个版本的迭代升级,目前(2021年4月7日)最新版本为: v17.0.2 .

相关资料

  • 中文文档: https://zh-hans.reactjs.org
  • 英文文档: https://reactjs.org
  • React DevTools: https://github.com/facebook/react-devtools
  • react CDN link: https://zh-hans.reactjs.org/docs/cdn-links.html
  • babel CDN link: https://www.babeljs.cn/setup#installation

  • 课堂代码: https://gitee.com/bufanxy/react-base-demos

    react教程

    react是用于构建用户界面的 JavaScript 库,react特点如下(摘自runoob):

  • 声明式设计 −为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

  • 高效 −React采用Virtual DOM(虚拟DOM), 极大的提升了UI渲染(更新)效率。
  • 灵活 −React 允许你结合其他框架或库一起使用。
  • JSX − JSX 是 JavaScript 语法的扩展。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。
  • 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
  • 单向响应的数据流 − React 采用了单向响应的数据流，使组件状态更容易维护, 组件模块化更易于快速开发。

    helloWorld

    我们来实现第一个react实例: 
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <title>Document</title>
    8. <!-- 引入react依赖库,注意顺序,当前版本: v17.0.2 -->
    9. <script src="lib/react/react.development.js"></script>
    10. <script src="lib/react/react-dom.development.js"></script>
    11. <!-- 引入babel库,用于解析jsx语法
    12.   # https://www.babeljs.cn/setup#installation
    13. -->
    14. <script src="lib/react/babel.min.js"></script>
    15. </head>
    16. <body>
    17. <div id="root"></div>
    18. // 这里不是原生的javascript语法,而是特殊的jsx(javascript+xml)语法,需要用babel解析.
    19. <script type="text/babel">
    20.   var msg = 'hello,world!';
    21.   // 使用es6 class 通过继承可以得到一个react组件的类
    22.   class HelloWorld extends React.Component {
    23.     render(){
    24.       return (
    25.         <div>{msg}</div>
    26.       )
    27.     }
    28.   }
    29.   // 通过调用React自身方法render可以得到当前组件的实例对象,并渲染到页面容器.
    30.   ReactDOM.render(<HelloWorld />,document.getElementById('root'));
    31. </script>
    32. </body>
    33. </html>