react的基础使用

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>