首页 > 其他分享 >react的基础使用

react的基础使用

时间:2024-03-19 20:11:47浏览次数:23  
标签:React return 基础 react 使用 组件 import JSX

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

相关文章

  • 数据库数据查询:使用SELECT语句从数据库中检索数据
    这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注......
  • 关于centos7.6使用秘钥登陆,安装git和.net core
    秘钥登陆先用root登陆ssh-keygen-trsa使用上述指令生成rsa秘钥cat/root/.ssh/id_rsa.pub>>/root/.ssh/authorized_keys然后使用上面指令复制公钥到authorized_keysvim/etc/ssh/sshd_config编辑 重启sshd服务systemctlrestartsshd最后下载私钥到本地......
  • Java基础 --- 面向对象综合训练
    面向对象综合训练案例一:文字版格斗游戏格斗游戏,每个游戏角色的姓名,血量,都不相同,在选定人物的时候(new对象的时候),这些信息就应该被确定下来。补充:publicclassTest{publicstaticvoidmain(String[]args){//两部分参数//第一部分参数:要输出的内容%......
  • 邮件客户端的配置使用
    软件介绍:winmail收到新邮件不会提示用户,这样用户就容易错过消息下载foxmail可以解决这个问题一:下载foxmail1.实体机进入官网https://www.foxmail.com/,点击下载版本随意下载好后拖到虚拟机上二:配置foxmail1.开始创建账号因为这几种邮箱都不是我们上个实验的邮箱选择其他邮......
  • 【VMware vCenter】使用vSphere Diagnostic Tool(VDT)诊断工具检查vCenter Server。
    vSphereDiagnosticTool(VDT)是一个诊断工具,主要用于对vCenter系统的配置进行一系列检查、识别和报告可能存在的问题。通过该工具,在每次检查时可以提供友好的显示结果。这些结果分为PASS(表示检查成功)、FAIL(表示检查失败)和WARN(表示可能不重要但需要注意的警告)。除了PASS/FAIL/WARN......
  • 信息收集模块(四)masscan介绍和使用教程
    一、masscan介绍    masscan是号称最快的互联网的端口扫描工具,最快几分钟就可以扫描完毕    但是他和nmap比较内饰但是masscan更加灵活,它允许自定义任意的地址范和端口范围。 二、masscan工具的命令使用        IP地址范围,有三种有效格式,1、......
  • 使用navicat导出查询大量数据结果集并导入到其他数据库(mysql)
    在工作中我们偶尔会遇到处理数据的问题;比如需要将处理后的结果集导出来再导入到数据;具体的的实现方案有:1、导出excel再导入在navicat中选中对应数据库的表对象,右键选择导入,导出向导,如图: 2、将查询的结果集导出成sql实现步骤:先整理查询的sql;执行查询,再选择对话框上面的......
  • Selenium Headless模式:无头浏览器的使用与优势
    简介在现代Web开发和测试中,自动化工具的应用变得越来越重要。Selenium作为一种流行的自动化测试工具,为开发者提供了强大的功能来模拟用户行为和进行网页测试。其中,Selenium的Headless模式,即无头浏览器,为开发者提供了一种更高效、更隐秘的测试方式。本文将探讨SeleniumHeadless......
  • 使用Python爬取豆瓣电影影评:从数据收集到情感分析
    简介在当今数字化时代,对电影的评价和反馈在很大程度上影响着人们的选择。豆瓣作为一个知名的电影评价平台,汇集了大量用户对电影的评论和评分。本文将介绍如何使用Python编写爬虫来获取豆瓣电影的影评数据,并通过情感分析对评论进行简单的情感评价。环境准备在开始之前,我们需要......
  • 使用Selenium执行JavaScript脚本:探索Web自动化的新领域
    前言在我们使用selenium进行自动化测试的时候,selenium能够帮助我们实现元素定位和点击输入等操作,但是有的时候,我们会发现,即使我们的元素定位没有问题,元素也无法执行操作;也有部分情况是我们无法直接定位滚动条河时间控件来进行操作,这个时候,我们就需要借助JavaScript来解决问题。......