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将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当