【笔记】React学习笔记

发表于 更新于 分类于 阅读次数：

前言

React（也称为React.js或ReactJS）是一个自由及开放源代码的前端JavaScript工具库，用于基于UI组件构建用户界面。（维基百科）

HTML环境使用React

React18以前

引入依赖

1
2
3
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

挂载根组件

1
2
3
4
5
6
7
8
9
10
11
12
<div id="root"></div>

<script type="text/babel">
  const App = () => {
    return (
      <>
        ...
      </>
    );
  };
  ReactDOM.render(<App />, document.getElementById("root"));
</script>

React18及以后

引入依赖

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

挂载根组件

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="root"></div>

<script type="text/babel">
  const App = () => {
    return (
      <>
        ...
      </>
    );
  };
  const root = ReactDOM.createRoot(document.getElementById("root"));
  root.render(<App />);
</script>

Nodejs环境使用React（Webpack）

下载依赖

1
npm install -g create-react-app

初始化项目

  • 项目名不允许有大写字母
1
create-react-app <project_name>

挂载根组件

src/Components//App.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
import React from "react"

class App extends React.Component {
  render() {
    return (
      <>
        ...
      </>
    );
  }
}

export default App;

React18以前

src/index.js
1
2
3
4
5
import { ReactDOM } from "react"
import App from "./App"

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

React18及以后

src/index.js
1
2
3
4
5
import { ReactDOM } from "react-dom/client"
import App from "./App"

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

完成

参考文献

哔哩哔哩——Python小清风