React学习笔记！

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

  • 一个将数据渲染为 HTML 视图的开源 JS 库。
  • 它遵循基于组件的方法，有助于构建可重用的 UI 组件。
  • 它用于开发复杂的交互式的 Web 和移动 UI。

React起源于Facebook的内部项目。

官网：https://zh-hans.reactjs.org/

源码：https://github.com/facebook/react

React新文档 ：https://beta.reactjs.org/

第一个React程序

CDN引入：https://unpkg.com/

https://www.staticfile.org/

1
2
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

上述版本仅用于开发环境，不适合用于生产环境。

压缩优化后可用于生产的 React 版本可通过如下方式引用。

1
2
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello React!</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/7.20.6/babel.min.js"></script>
    <script>
      // 1、创建虚拟dom
      // React.createElement(标签名称,对象形式的DOM属性信息,DOM中的内容/子DOM)
      // React.createElement(标签名称,对象形式的DOM属性信息,DOM中的内容/子DOM,DOM中的内容/子DOM,...)
      // React.createElement(标签名称,对象形式的DOM属性信息,[DOM中的内容/子DOM,DOM中的内容/子DOM,...])
      let vNode = React.createElement("h2", {}, "Hello React!");
      //2、获取app根元素
      let app = document.querySelector("#app");
      //3、创建根元素
      let root = ReactDOM.createRoot(app);
      //4、将虚拟节点渲染到根结点上
      root.render(vNode);
    </script>
  </body>
</html>

启动项目:

只需要在项目根目录下使用 npm start 或者 yarn start 就可以启动项目。

JSX

由于通过React.createElement()方法创建的React元素代码比较繁琐，结构不直观。

  • 无法一眼看出描述的结构，不优雅，开发时写代码很不友好。

JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写XML（HTML）格式的代码。

优势：

  • 声明式语法更加直观，与HTML结构相同，降低了学习成本、提升开发效率。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello React JSX!</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/7.20.6/babel.min.js"></script>
    <!-- script标签上一定要写上 type="text/babel" -->
    <script type="text/babel">
      // 1、创建虚拟dom
      let vNode = <h2>Hello React JSX!</h2>;
      //2、获取app根元素
      let app = document.querySelector("#app");
      //3、创建根元素
      let root = ReactDOM.createRoot(app);
      //4、将虚拟节点渲染到根结点上
      root.render(vNode);
    </script>
  </body>
</html>

项目结构

在这里插入图片描述

安装VSCode插件

1、React/Redux/React-Native Snippets:

  • 代码模板/代码片段

2、Simple React Snippets:

  • 更加简洁的代码片段

脚手架

React 脚手架是一个帮我们快速的生成项目的工程化结构，每个项目的结构其实大致都是相同的。

安装React脚手架

全局安装 create-react-app

1
npm i create-react-app -g

新建一个文件夹用于存放项目，在当前的文件夹下执行。

1
create-react-app hello-react

在生成好的 hello-react 文件夹中执行，然后在浏览器访问 http://localhost:3000。

1
npm start

脚手架项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
hello-react
├─ .gitignore               // 自动创建本地仓库
├─ package.json             // 相关配置文件
├─ public                   // 公共资源
│  ├─ favicon.ico           // 浏览器顶部的icon图标
│  ├─ index.html            // 应用的 index.html入口
│  ├─ logo192.png           // 在 manifest 中使用的logo图
│  ├─ logo512.png           // 同上
│  ├─ manifest.json         // 应用加壳的配置文件
│  └─ robots.txt            // 爬虫给协议文件
├─ src                      // 源码文件夹
│  ├─ App.css               // App组件的样式
│  ├─ App.js                // App组件
│  ├─ App.test.js           // 用于给APP做测试
│  ├─ index.css             // 样式
│  ├─ index.js              // 入口文件
│  ├─ logo.svg              // logo图
│  ├─ reportWebVitals.js    // 页面性能分析文件
│  └─ setupTests.js         // 组件单元测试文件
└─ yarn.lock

第一个脚手架应用

修改src下面的APP.js以及index.js文件。

1
2
3
4
5
6
7
8
9
10
11
12
//创建外壳组件APP
import React from 'react'

class App extends React.Component{
    render(){
        return (
            <div>Hello word</div>
        )
    }
}

export default App

index.js: 将App这个组件渲染到页面上。

1
2
3
4
5
6
7
//引入核心库
import React from 'react'
import ReactDOM from 'react-dom'
//引入组件
import App from './App'

ReactDOM.render(<App />,document.getElementById("root"))

这样再重新启动应用，就成功了。

不建议这样直接将内容放入App组件中，尽量用内部组件。

加一个Hello组件：

1
2
3
4
5
6
7
8
9
import React,{Componet} from 'react'

export default class Hello extends Componet{
    render() {
        return (
            <h1>Hello</h1>
        )
    }
}

在App组件中，进行使用：

1
2
3
4
5
6
7
8
9
10
11
12
import React,{Componet} from 'react'
import Hello form './Hello'

class App extends Component{
    render(){
        return (
            <div>
                <Hello />
            </div>
        )
    }
}

推荐使用这种目录结构去使用组件：

在这里插入图片描述