期科比的博客

react组件创建

caphpca — Mon, 15 Nov 2021 17:53:31 +0800

一、创建函数组件 function App() { return (

这是函数组件

) } export default App 二、创建类组件 //React是react中默认导出的，Component是创建类组件时需要继承的需要先从react中解构出来 import React,{Component, Fragment} from "react"; class About extends Component{ render

JSX外联样式与CSS在JS中的解决方案

caphpca — Mon, 15 Nov 2021 17:27:44 +0800

一、JSX中的外联样式 ///////////////////////////////////////////////////////////////////////// //定义全局外联样式 style.css body{ background-color: orange; } .box{ width:100px; height:100px; background-color: seagreen; } //定义组件外联样式 Test.module.css .ite

jsx语法二

caphpca — Mon, 15 Nov 2021 16:16:56 +0800

/** * jsx 数据循环 * 01.直接将数组解构输出 * 02.循环遍历输出 * */ // const arr=[

] const arr=[ { id:1, name:'jsx', age:100 }, { id:2, name:'jsx2', age:200 } ] function App() {.

JSX语法

caphpca — Sun, 14 Nov 2021 13:20:28 +0800

/** *1.JSX可以看做是js语言的扩展既不是字符串也不是HTML *2.JSX具备了js所有的功能，同时还可以转化为HTML 在界面上进行展示 * *--动态显示数据 {} *--调用方法:自定义+语言内置 *--支持表达式,不支持if/else,支持三元表达式 *--模板字符串 *--注释 *--对象 * */ const name='jsx' const flag=false const obj={ name:'jsx', age:100 } function .

react开发环境搭建

caphpca — Fri, 12 Nov 2021 18:45:28 +0800

方案一、基于webpack搭建react开发环境 1.mkdir webpack-react && cd webpack-react && npm init 2.在package.json中添加依赖项 "devDependencies": { "@babel/core": "^7.13.8", "@babel/preset-env": "^7.13.9", "@babel/preset-react": "^7.12.13", "babel