初学 React

关于React

什么是 React

React 是一个用于构建用户界面的 JS 库

React 的特点

• 声明式：

  • 只需要描述 UI 即可，和使用 HTML 写 UI 一样。
  • React 会负责渲染 UI，并在数据变化时更新 UI

  const jsx = <div>
      <h1> React </h1>
  </div>
  

• 高效

  • React 把真实 DOM 树转换成 js 对象树，通过对比，最大限度减少与 DOM 的交互

• 基于组件

  • 组件是 React 最重要的部分
  • 组件表示页面中的部分内容
  • 组合、复用多个组件，可以实现完整的页面功能

• 学习一次，随处使用

  • 使用 React 开发 Web 应用
  • 使用 React 开发移动端
  • 使用 React 开发 VR 应用

React 搭建开发环境

• 确认本地已经安装 node.js，通过 node.js 和 npm 来配置 react 所需的各种依赖包，如果没有需要先配置 node.js

• 通过 npm 在全局安装 create-react-app 脚手架

  npm install create-react-app
  

  • 可以通过 create-react-app -V 来检测本地是否安装 create-react-app

React 项目创建

• 在指定目录下创建项目，通过 CRA（create-react-app） 创建项目，执行下面指令

  create-react-app 项目名字
  

• 安装成功提示：

  

• 在指向项目路径下，执行 npm start 指令，即可运行项目

• 生成项目的目录结构

  

  • node_modules：所有的依赖安装目录
  • public：静态公共目录
  • src：开发用的源代码目录
  • .gitignore：在版本控制系统（如 Git）中忽略的文件和目录
  • package-lock.json：锁定安装时的包的版本号，保证团队的依赖保持一致
  • package.json：手动维护项目所需的依赖包
  • README.md：使用方法文档

React 项目的实现

通过 CRA 创建项目，在 src 目录下有默认的示例代码。当我们写自己项目时，需要对 src 目录下的文件进行处理，保留 index.js 和 app.js，index.js 作为项目入口，app.js 作为根目录

• index.js

  // 项目入口
  // React 必要的俩个核心包
  
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  
  // 导入项目的根组件
  import App from './App';
  
  // 把 APP 根组件渲染到 id 为 root 的 dom 节点上
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
      <App />
  );
  
  

• app.js

  渲染路径：APP -> index.js -> public/index.html(root)

  // 项目的根组件
  
  function App() {
    return (
      <div className="App">
        Hello React!
      </div>
    );
  }
  
  export default App;