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

相关文章

MySQL 中的 JSON 查询案例详解

《MySQL中的JSON查询案例详解》:本文主要介绍MySQL的JSON查询的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql 的 jsON 路径格式基本结构路径组件详解特殊语法元素实际示例简单路径复杂路径简写操作符注意MySQL 的 J

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数

Java对象转换的实现方式汇总

《Java对象转换的实现方式汇总》:本文主要介绍Java对象转换的多种实现方式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java对象转换的多种实现方式1. 手动映射(Manual Mapping)2. Builder模式3. 工具类辅助映

如何使用 Python 读取 Excel 数据

《如何使用Python读取Excel数据》:本文主要介绍使用Python读取Excel数据的详细教程,通过pandas和openpyxl,你可以轻松读取Excel文件,并进行各种数据处理操... 目录使用 python 读取 Excel 数据的详细教程1. 安装必要的依赖2. 读取 Excel 文件3. 读

Python Transformers库(NLP处理库)案例代码讲解

《PythonTransformers库(NLP处理库)案例代码讲解》本文介绍transformers库的全面讲解,包含基础知识、高级用法、案例代码及学习路径,内容经过组织,适合不同阶段的学习者,对... 目录一、基础知识1. Transformers 库简介2. 安装与环境配置3. 快速上手示例二、核心模

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

Spring Boot读取配置文件的五种方式小结

《SpringBoot读取配置文件的五种方式小结》SpringBoot提供了灵活多样的方式来读取配置文件,这篇文章为大家介绍了5种常见的读取方式,文中的示例代码简洁易懂,大家可以根据自己的需要进... 目录1. 配置文件位置与加载顺序2. 读取配置文件的方式汇总方式一:使用 @Value 注解读取配置方式二

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http