【笔记】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/App.jsx
1
2
3
4
5
6
7
8
9
10
11
import React from "react"

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

export default App;

挂载根组件

public/index.html
1
<div id="root"></div>
src/index.js
1
2
3
4
5
6
7
import ReactDOM from "react-dom/client";
import App from "./App";

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

Nodejs环境使用React（Vite）

初始化项目

1
npm init vite@latest <project_name> -- --template react

定义根组件

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

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

export default App;

挂载根组件

index.html
1
2
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
src/main.jsx
1
2
3
4
5
6
import { createRoot } from "react-dom/client"
import App from "./App.jsx"

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

完成

参考文献

哔哩哔哩——Python小清风