重温react-01

创建react项目

// 第一步
npm install create-react-app -g
// 第二步
create-react-app my-app

目录介绍

my-app/README.md# 项目第三方依赖包node_modules/package.json# 一般用来存放静态依赖public/index.htmlfavicon.ico# 存放项目源代码,注意只有放在scr目录下的文件才会被webpack打包src/App.cssApp.jsApp.test.jsindex.css# 入口文件index.jslogo.svg

二次封装webpack

运行下面指令之后,会出现一个config.js文件,

npm run eject

配置路径别名@

在webpack.config中添加 , 即可完成路径别名的配置

 alias: {// Support React Native Web// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/'react-native': 'react-native-web',// Allows for better profiling with ReactDevTools...(isEnvProductionProfile && {'react-dom$': 'react-dom/profiling','scheduler/tracing': 'scheduler/tracing-profiling',}),...(modules.webpackAliases || {}),// 添加路径'@': path.resolve(__dirname, '../src')},

项目创建一个HelloWorld

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><App /></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

learnReact.js

import React from "react";// 创建一个名为LearnReact的React函数组件export default function LearnRcact() {return (<div><h1>Hello, world!66</h1><p>This is a paragraph.</p></div>)
}

什么是jsx?

设想 

const element = <h1>Hello, world!</h1>

他既不是html也不是字符串,他是什么呢?它被称为 JSX,是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言,但它具有 JavaScript 的全部功能。

// 可以在变量后面直接跟html,但是注意不能换行
const jsx = <div></div>// 如果想换行则可以加一个括号,注意只能有一个根元素
const jsx2 = (<div><div>你好,jsx</div></div>
)// 在jsx中使用变量用 {} 括起来,里面就是我们在外部声明的变量
const hello = '你好'
const jsx3 = (<div>{hello}</div>
)// 在jsx中做判断是否显示,一般用 三元运算
const is = true
const jsx5 = (<div>{is ? <div>你好,我显示了</div> : null}{ is && <div>你好,我显示了</div> }</div>
)

jsx中使用css

import React, { Component } from 'react'
// import './learnReact.sass'
export default class LearnReact extends Component {render() {const is = trueconst hello = "helloworld~~!"return (<div>{is ? <div style={{ color: 'red' }}>{hello}</div> : null}{is && <div>{hello}</div>}</div>)}
}

react中的点击事件和数据的修改和存储数据一系列基础知识

import React, { Component } from 'react'
export default class onClickReact extends Component {constructor(props) {super();this.state = {number: 1,book: ['js', 'css', 'html']}}hello() {console.log(this);}add() {console.log(66666);}addNumber() {// 点击可以获取最新的值,jsx的回调函数this.setState({number: this.state.number + 1}, () => {console.log(this.state, '这个是最新的值');})}changeArrMessage() {this.setState(pre => ({// book: [...pre.book, 'react'] //展开往后面添加一条数据book: ['react']}))}render() {console.log(this);return (<div>{/* 普通点击事件 */}<div onClick={this.hello}>onClickReact</div>{/* 箭头函数点击事件 */}<div onClick={() => this.add()}>箭头函数点击事件</div>{/* 加法的点击事件 */}<button style={{ background: 'green', color: 'white' }} onClick={() => this.addNumber()}>点击会增加number的值</button>{/* number的值 */}<div>{this.state.number}</div>{/* 下面这个是数组的值 */}<div onClick={() => this.changeArrMessage()}>点击改变数组</div><div>666{this.state.book}</div><hr /><div>{this.state.book.map((item, index) => {return <div style={{ margin: '10px' }} key={index}>{item}</div>})}</div></div>)}
}
import React, { Component } from 'react'
export default class variable extends Component {constructor(props) {super();this.state = {name: '张三',age: 18,sex: '男',show: false}}updateUserinfo() {this.setState({name: '李四',age: 20,sex: '女',show: true})}render() {return (<div><div>这是原来的: {this.state.name}---{this.state.age}---{this.state.sex} --{this.state.show ? '显示' : '不显示'}</div><div><button onClick={() => this.updateUserinfo()}>点击修改之后的数据</button></div><div>{this.state.show ? <div>这是修改之后的数据: {this.state.name}---{this.state.age}---{this.state.sex}</div> : ''}</div></div>)}
}

react中的循环

import React, { Component } from 'react'
export default class mapElement extends Component {state = {infos: [{name: '张三',age: 18,sex: '男'},{name: '李四',age: 20,sex: '男'},{name: '王五',age: 22,sex: '男'}]}render() {return (<div>{this.state.infos.map((item, index) => {return <div key={index}>姓名:{item.name},年龄:{item.age},性别:{item.sex}</div>})}</div>)}
}

以上所有代码的效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/27583.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分布式一致性和CAP理论、Paxos算法、Raft算法、Zab协议

1.分布式一致性的重要性 在分布式系统中&#xff0c;一致性是一个至关重要的概念。分布式系统由多个节点组成&#xff0c;这些节点通过网络进行通信和协作。然而&#xff0c;由于网络延迟、节点故障等原因&#xff0c;分布式系统中的数据一致性往往面临着挑战。 一致性指的是在…

升级Oracle SQLcl

当前版本为19.1&#xff0c;这是安装数据库19.3时自带的&#xff1a; [oracleoracle-19c-vagrant ~]$ sql -V SQLcl: Release 19.1.0.0 Production[oracleoracle-19c-vagrant ~]$ which sql /opt/oracle/product/19c/dbhome_1/bin/sql从官网 可知最新版本为&#xff1a;24.1 。…

快速提升沟通能力:客服必备的话术技巧

在现在的这个互联网时代&#xff0c;各行业竞争日益激烈&#xff0c;而客服作为连接商家和消费者的桥梁&#xff0c;无疑是一个重要的岗位。可以说客服是一个极具挑战性的岗位&#xff0c;客服每天需要面对来自全国各地的客户&#xff0c;同时还要对不同地区、不同性格、不同需…

SQLServer 借助Navcate做定时备份的脚本

首先创建SQLServer链接&#xff0c;然后在Query标签种创建一个查询 查询内容如下 use ChengYuMES declare ls_time varchar(1000) declare ls_dbname varchar(1000) set ls_time convert(varchar, getdate(), 112) _ replace(convert(varchar, getdate(), 108), :, )-- 需…

LeetCode20.有效的括号

题目描述 分析 我们刚上来的思路可能是&#xff1a;找出这三种括号的个数 如果都是偶数 说明匹配 但是这里还有一个顺序问题 比如 " )( "这样是不匹配的&#xff01; 所以这种思路不可取&#xff01; 我们想 如果遇到左括号&#xff0c;把他读到一个顺序表中&#…

Redis应用:基于Redis实现排行榜、点赞、关注功能

文章目录 1. 环境准备2. 实现排行榜功能2.1 添加用户分数2.2 获取排行榜2.3 获取用户排名2.4 更新用户分数示例代码3. 实现点赞功能3.1 添加点赞3.2 获取点赞数3.3 检查用户是否点赞3.4 取消点赞示例代码4. 实现关注功能4.1 添加关注4.2 获取粉丝列表4.3 获取关注列表4.4 取消关…

【Pycharm】设置双击打开文件

概要 习惯真可怕。很多小伙伴用习惯了VsCode开发&#xff0c;或者其他一些开发工具&#xff0c;然后某些开发工具是单击目录文件就能打开预览的&#xff0c;而换到pycharm后&#xff0c;发现目录是双击才能打开预览&#xff0c;那么这个用起来就特别不习惯。 解决办法 只需一…

高清视频+AI算法,EasyCVR视频智能监控方案打造无死角吸烟行为检测

一、背景与意义 1、吸烟危害&#xff1a;吸烟不仅有害健康&#xff0c;而且在特定场所带来的安全隐患极大。据统计&#xff0c;全年火灾事故中有五分之一系抽烟引起&#xff0c;引发的人员伤亡和财产损失巨大。 2、政策与法规&#xff1a;为了保护公共安全&#xff0c;消除消…

C语言中的弱函数是什么?

在C语言编程中&#xff0c;“弱函数”&#xff08;weak function&#xff09;是一种特殊的函数声明方式&#xff0c;它允许在链接时可以被另一个具有相同名称的强函数&#xff08;strong function&#xff09;所覆盖。弱函数通常用于库函数或嵌入式系统中的启动代码&#xff0c…

解决方案︱视频孪生智慧高速解决方案

系统概述 在交通强国战略的指导下&#xff0c;我国政府高度重视以数字化为核心的智慧高速公路建设与发展。2023年9月&#xff0c;交通运输部印发了《交通运输部关于推进公路数字化转型加快智慧公路建设发展的意见》&#xff0c;强调到2035年&#xff0c;全面实现公路数字化转型…

java多线程概念

在Java多线程编程中有几个重要的概念&#xff0c;这些概念对于理解和编写正确的多线程应用程序至关重要&#xff1a; 1.线程&#xff08;Thread&#xff09;: 线程是操作系统能够进行运算调度的最小单位&#xff0c;Java通过线程实现并发执行。 2.进程&#xff08;Process&…

华为OD刷题C卷 - 每日刷题31(园区参观路径,围棋的气)

1、&#xff08;园区参观路径&#xff09;&#xff1a; 这段代码是解决“园区参观路径”的问题。它提供了一个Java类Main&#xff0c;其中包含main方法和getResult方法&#xff0c;以及一个未使用的dfs方法&#xff0c;用于计算从园区起点到终点的不同参观路径数量。 main方法…

助力OTT大屏营销,酷开科技引领产业变革与创新

随着大屏电视产品的迭代&#xff0c;越来越多家庭以增换购等多种形式获得超高清、超大屏的智能电视&#xff0c;大屏的人均拥有量和渗透率进一步增加。在这种情况下&#xff0c;通过OTT应用为载体&#xff0c;将大量内容持续输送到大屏终端&#xff0c;从而形成了电视硬件普及与…

工控机与普通电脑的区别对于工业自动化应用至关重要

商用计算机和工业计算机之间的相似之处可能多于差异之处。工业电脑利用了消费技术领域的许多进步&#xff0c;但增加了工业应用所必需的软件、编程、确定性和连接性。 专业人士表示&#xff1a;“从增加内存到摩尔定律所描述的处理能力的指数级增长&#xff0c;工业控制必将受…

【C++】和【预训练模型】实现【机器学习】【图像分类】的终极指南

目录 &#x1f497;1. 准备工作和环境配置&#x1f495; &#x1f496;安装OpenCV&#x1f495; &#x1f496;安装Dlib&#x1f495; 下载并编译TensorFlow C API&#x1f495; &#x1f497;2. 下载和配置预训练模型&#x1f495; &#x1f496;2.1 下载预训练的ResNet…

pip 配置缓存路径

在windows操作平台&#xff0c;默认情况&#xff0c;pip下使用的系统目录 C:\Users\用名名称\AppData\Local\pip C盘是系统盘&#xff0c;如果常常使用pip安装会占用大量的空间很快就满&#xff0c;这时候就有必要变更一下缓存保存路径了。 pip 配置缓存路径&#xff1a; Win…

Day46 - Day50

Day46 - Day50 Day46&#xff08;2001Text2&#xff09; As the Internet becomes more and more commercialized, it is in the interest of business to universalize access – after all, the more people online, the more potential customers there are. 随着互联网越发…

FM全网自动采集聚合影视搜索源码

源码介绍 FM 全网聚合影视搜索(响应式布局)&#xff0c;基于 TP5.1 开发的聚合影视搜索程序&#xff0c;本程序无数据库&#xff0c;本程序内置P2P 版播放器&#xff0c;承诺无广告无捆绑。片源内部滚动广告与本站无关,谨防上当受骗&#xff0c;资源搜索全部来自于网络。 环境…

效率翻倍!ComfyUI 必装的工作流+模型管理插件 Workspace Manager

一、Workspace Manager 安装方式 插件 Github 网址&#xff1a; https://github.com/11cafe/comfyui-workspace-manager 如果你没有安装 Workspace Manager 插件&#xff0c;可以通过以下 2 种方式安装&#xff1a; ① 通过 ComfyUI Manager 安装&#xff08;推荐&#xff0…

基于python-CNN卷积网络训练识别牛油果和猕猴桃-含数据集+pyqt界面

代码下载地址&#xff1a; https://download.csdn.net/download/qq_34904125/89383066 本代码是基于python pytorch环境安装的。 下载本代码后&#xff0c;有个requirement.txt文本&#xff0c;里面介绍了如何安装环境&#xff0c;环境需要自行配置。 或可直接参考下面博文…