1. 认识React
-
React 是一个用于构建用户界面的 JAVASCRIPT 库。
-
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
-
React 拥有较高的性能,代码逻辑非常简单,越来越多的人关注和使用它;
-
用vite 搭建 react
npm create vite@latest
二、main.jsx入口文件
.引入react
import React from 'react';
引入react-dom
import ReactDOM from 'react-dom';
引入css文件
import './index.css';
引入组件
import App from './App';
渲染虚拟DOM到页面
ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <App /> </React.StrictMode>, )
<React.StrictMode> (了解)
1、识别具有不安全生命周期的组件 2、有关旧式字符串ref用法的警告 3、关于已弃用的findDOMNode用法的警告 4、检测意外的副作用 5、检测遗留 context API 6、将来的React版本将添加其他功能。
三、App.jsx
引入图片资源
import logo from './logo.jpg'; function App() { return ( <div className="app"> <h1>标题</h1> <p><img src={logo} alt="替代文字"/></p> </div> ); } export default App;
四、React组件
1. 函数组件
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
该函数是一个有效的 React 组件
它接收唯一带有数据的 “props”(代表属性)对象与并返回一个 React 元素(JSX)。
这类组件被称为“函数组件”,因为它本质上就是 JavaScript 函数。
2. class组件
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
3. 快速生成组件的插件
安装 VSCode插件:ES7 React... Snippets 生成函数式组件: rfc 生成class组件: rcc html标签的自动补全功能
4. 使用组件注意事项
- 组件名要大写 - return 只返回一行,不加(),如果多行,需要加() - 组件中只有一个根元素 - 可以用Fragment做包裹元素,它不会被渲染为一个真实节点 或者使用 <></> - 组件要导出
5. 代码保存时格式混乱的解决方案
https://blog.csdn.net/impossible1994727/article/details/119806420
五、React的JSX语法
1. JSX 简介
const element = <h1>Hello, world!</h1>;
这个有趣的标签语法既不是字符串也不是 HTML
它被称为 JSX,是一个 JavaScript 的语法扩展。
JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。
在编译之后,JSX 表达式会被转为普通 JavaScript 函数调用,并且对其取值后得到 JavaScript 对象(虚拟DOM)。
2. JSX 语法
标签在js中直接写,不用做为字符串加"", js语法的部分要在{}中定义 <div>{3 > 7 ? 'a' : 'b'}</div> class属性用className替代, <h1 className="title">标题</h1> label标签的for属性用htmlFor替代 <label htmlFor="user">用户名 <input type="text" id="user" /> </label> jsx中不能用if语句,用三元运算来替代 <div> {3 > 7 ? <p>111</p> : <p>222</p>} { 3 < 7 ? <p>111</p> : <p>222</p> } </div> dangerouslySetInnerHTML属性 //直接渲染,不解析标签 <p>{str}</p> // 解析标签 <p dangerouslySetInnerHTML={{__html: str}}></p>
注释需要写在花括号中
<div>
<h1>菜鸟教程</h1>
{/*注释...*/}
</div>,
JSX会自动解析数组,渲染数组中的每个元素值
const list = ['a','b']
...
list.map((item,index) => {
return <li key={index}>{item}</li>
})
JSX添加style属性
{/* 错误写法 */}
{/* <div style="color:#f00;font-size:30px;">style</div> */}
{/* 正确写法 */}
<div style={{ color: '#f00', fontSize: '30px' }}>style</div>
标签:React,return,基础,react,使用,组件,import,JSX From: https://www.cnblogs.com/liu521125/p/18083839