React学习第二天(创建组件的方式,ES6 扩展运算符使用,抽离 jsx 组件,评论列表案例,省略 jsx 后缀名,使用@别名表示路径)

本文主要是介绍React学习第二天(创建组件的方式,ES6 扩展运算符使用,抽离 jsx 组件,评论列表案例,省略 jsx 后缀名,使用@别名表示路径),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

React学习第二天

React学习第二天

创建组件的方式( function 和 class)

ES6 扩展运算符使用

抽离 jsx 组件

如何省略 jsx 后缀名?

使用@别名表示路径

两种创建组件方式的对比

评论列表案例

没有收拾残局的能力,就别放纵善变的情绪!!!

创建组件

第一种创建组件的方式

//第一步:导入包
import React from 'react' //创建组件,虚拟DOM元素,生命周期
import ReactDOM from 'react-dom' //把创建好的 组件 和 虚拟DOM 放到页面上展示的function Hello() {return <div>这是一个组件</div>
}//第三步:使用 ReactDOM 把虚拟 DOM 渲染到页面上
ReactDOM.render(<div><Hello></Hello>
</div>, document.getElementById('app'))

mark

接受外部传值
function Hello(props){console.log(props)return <div>这是一个组件---{props.name}---{props.age}</div>
}const dog={name:'大黄',age:'18'
}//第三步:使用 ReactDOM 把虚拟 DOM 渲染到页面上
ReactDOM.render(<div><Hello name={dog.name} age={dog.age}></Hello></div>, document.getElementById('app'))

mark

改进:使用ES6 扩展运算符
function Hello(props){console.log(props)return <div>这是一个组件---{props.name}---{props.age}</div>
}const dog={name:'大黄',age:'18'
}//第三步:使用 ReactDOM 把虚拟 DOM 渲染到页面上
ReactDOM.render(<div><Hello {...dog}></Hello>
</div>, document.getElementById('app'))
抽离 jsx 组件
//第一步:导入包
import React from 'react' //创建组件,虚拟DOM元素,生命周期
import ReactDOM from 'react-dom' //把创建好的 组件 和 虚拟DOM 放到页面上展示的import Hello from './components/Hello.jsx'const dog={name:'大黄',age:'18'
}//第三步:使用 ReactDOM 把虚拟 DOM 渲染到页面上
ReactDOM.render(<div><Hello {...dog}></Hello>
</div>, document.getElementById('app'))

mark

Hello.jsx:

import React from "react";//创建并导出
export default function Hello(props){console.log(props)return <div>这是一个组件---{props.name}---{props.age}</div>
}
如何省略 jsx 后缀名?

mark

配置 webpack.config.js 文件:

resolve:{extensions:['.js','.jsx','.json']
}
使用@别名表示路径

mark

配置 webpack.config.js 文件:

resolve:{extensions:['.js','.jsx','.json'],alias:{'@':path.join(__dirname,'./src') //这样,@ 就表示 项目根目录中的src 这一层路径}
}

第二种创建组件的方式

使用 class 关键字来创建自建

ES6 中 class 关键字

这篇关于React学习第二天(创建组件的方式,ES6 扩展运算符使用,抽离 jsx 组件,评论列表案例,省略 jsx 后缀名,使用@别名表示路径)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/419503

相关文章

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

Linux在线解压jar包的实现方式

《Linux在线解压jar包的实现方式》:本文主要介绍Linux在线解压jar包的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux在线解压jar包解压 jar包的步骤总结Linux在线解压jar包在 Centos 中解压 jar 包可以使用 u

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键(私钥)的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

Android kotlin中 Channel 和 Flow 的区别和选择使用场景分析

《Androidkotlin中Channel和Flow的区别和选择使用场景分析》Kotlin协程中,Flow是冷数据流,按需触发,适合响应式数据处理;Channel是热数据流,持续发送,支持... 目录一、基本概念界定FlowChannel二、核心特性对比数据生产触发条件生产与消费的关系背压处理机制生命周期

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

Jenkins分布式集群配置方式

《Jenkins分布式集群配置方式》:本文主要介绍Jenkins分布式集群配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装jenkins2.配置集群总结Jenkins是一个开源项目,它提供了一个容易使用的持续集成系统,并且提供了大量的plugin满

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置(核心数、队列容量、拒绝策略等)及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略(Rejected

C++ Log4cpp跨平台日志库的使用小结

《C++Log4cpp跨平台日志库的使用小结》Log4cpp是c++类库,本文详细介绍了C++日志库log4cpp的使用方法,及设置日志输出格式和优先级,具有一定的参考价值,感兴趣的可以了解一下... 目录一、介绍1. log4cpp的日志方式2.设置日志输出的格式3. 设置日志的输出优先级二、Window