React
是一个用于构建用户界面的JavaScript
库。
- 一个将数据渲染为
HTML
视图的开源JS
库。- 它遵循基于组件的方法,有助于构建可重用的
UI
组件。- 它用于开发复杂的交互式的
Web
和移动UI
。
React
起源于官网:https://zh-hans.reactjs.org/
源码:https://github.com/facebook/react
React新文档 :https://beta.reactjs.org/
第一个React程序
CDN引入:https://unpkg.com/
<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
版本可通过如下方式引用。
<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>
<!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结构相同,降低了学习成本、提升开发效率。
<!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
npm i create-react-app -g
新建一个文件夹用于存放项目,在当前的文件夹下执行。
create-react-app hello-react
在生成好的
hello-react
文件夹中执行,然后在浏览器访问http://localhost:3000
。
npm start
脚手架项目结构
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
文件。
//创建外壳组件APP
import React from 'react'
class App extends React.Component{
render(){
return (
<div>Hello word</div>
)
}
}
export default App
index.js
: 将App
这个组件渲染到页面上。
//引入核心库
import React from 'react'
import ReactDOM from 'react-dom'
//引入组件
import App from './App'
ReactDOM.render(<App />,document.getElementById("root"))
这样再重新启动应用,就成功了。
不建议这样直接将内容放入
App
组件中,尽量用内部组件。
加一个Hello组件:
import React,{Componet} from 'react'
export default class Hello extends Componet{
render() {
return (
<h1>Hello</h1>
)
}
}
在App组件中,进行使用:
import React,{Componet} from 'react'
import Hello form './Hello'
class App extends Component{
render(){
return (
<div>
<Hello />
</div>
)
}
}
推荐使用这种目录结构去使用组件: