React 简介 - 图1

React的特点

声明式编程

写UI就和写普通的HTML一样，抛弃命令式的繁琐实现

React 简介 - 图2

组件化编程

组件是react中最重要的内容，组件可以通过搭积木的方式拼成一个完整的页面，通过组件的抽象可以增加复用能力和提高可维护性

跨平台

React Native编写原生应用

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物

高效 (优秀的Diffing算法)

数据变化后，React 概念上与点击“F5刷新”按钮类似，但仅会更新变化的部分。（diff/fiber最小粒度）

配置环境

CDN引入

  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依赖库,注意顺序-->
  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>

实例中引入了三个库： react.production.min.js 、react-dom.production.min.js 和 babel.min.js：

  • react.production.min.js - React 的核心库
  • react-dom.production.min.js - 提供与 DOM 相关的功能
  • babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 的浏览器上执行 React 代码。

  • Babel 内嵌了对 JSX 的支持。

    官方脚手架

  • 打开命令行工具

  • 执行命令

    1. npx create-react-app react-demo

    说明：

    1. npx create-react-app 是固定命令，create-react-app是React脚手架的名称
    2. react-demo表示项目名称，可以自定义，保持语义化
    3. npx 命令会帮助我们临时安装create-react-app包，然后初始化项目完成之后会自自动删掉，所以不需要全局安装create-react-app
      1. $ yarn start
      2. or
      3. $ npm start

      Vite创建项目

      使用NPM
      1. npm init vite@latest
      使用yarn
      1. yarn create vite
      这里使用yarn
      React 简介 - 图3
      然后按照提示操作即可！