React 全栈体系（五）

第三章：React 应用(基于 React 脚手架)

一、使用 create-react-app 创建 react 应用

1. react 脚手架

  • xxx 脚手架: 用来帮助程序员快速创建一个基于 xxx 库的模板项目
    • 包含了所有需要的配置（语法检查、jsx 编译、devServer…）
    • 下载好了所有相关的依赖
    • 可以直接运行一个简单效果
  • react 提供了一个用于创建 react 项目的脚手架库: create-react-app
  • 项目的整体技术架构为: react + webpack + es6 + eslint
  • 使用脚手架开发的项目的特点: 模块化，组件化，工程化

2. 创建项目并启动

  • 第一步，全局安装：npm i -g create-react-app
  • 第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
  • 第三步，进入项目文件夹：cd hello-react
  • 第四步，启动项目：npm start
# 新版安装方法!npx create-react-app myapp
cd my-app
npm start

3. react 脚手架项目结构

public ---- 静态资源文件夹favicon.icon ------ 网站页签图标index.html -------- 主页面logo192.png ------- logo图logo512.png ------- logo图manifest.json ----- 应用加壳的配置文件robots.txt -------- 爬虫协议文件
src ---- 源码文件夹App.css -------- App组件的样式App.js --------- App组件App.test.js ---- 用于给App做测试index.css ------ 样式index.js ------- 入口文件logo.svg ------- logo图reportWebVitals.js--- 页面性能分析文件(需要web-vitals库的支持)setupTests.js---- 组件单元测试的文件(需要jest-dom库的支持)

请添加图片描述

4. 功能界面的组件化编码流程（通用）

  • 拆分组件：拆分界面，抽取组件
  • 实现静态组件：使用组件实现静态页面效果（class -> className, style…)
  • 实现动态组件
    • 动态显示初始化数据
      • 数据类型
      • 数据名称
      • 保存在哪个组件?
    • 交互(从绑定事件监听开始)

5. 代码

请添加图片描述
请添加图片描述

/* src/index.js */
//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//引入App组件
import App from './App'//渲染App到页面
ReactDOM.render(<App/>,document.getElementById('root'))

/* src/App.jsx */
//创建“外壳”组件App
import React,{Component} from 'react'
import Hello from './components/Hello'
import Welcome from './components/Welcome'//创建并暴露App组件
export default class App extends Component{render(){return (<div><Hello/><Welcome/></div>)}
}

/* src/components/Hello/index.jsx */
import React,{Component} from 'react'
import hello from './index.module.css'export default class Hello extends Component{render(){return <h2 className={hello.title}>Hello,React!</h2>}
}

/* src/components/Hello/index.module.css */
.title{background-color: orange;
}

/* src/components/Welcome/index.jsx */
import React,{Component} from 'react'
import './index.css'export default class Welcome extends Component{render(){return <h2 className="title">Welcome</h2>}
}

/* src/components/Welcome/index.css */
.title{background-color: skyblue;
}

二、组件的组合使用 - TodoList

  • 功能：组件化实现此功能
    • 显示所有 todo 列表
    • 输入文本, 点击按钮显示到列表的首位, 并清除输入的文本

请添加图片描述

  • 静态页面源码
<!-- index.html -->
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>React App</title><link rel="stylesheet" href="index.css">
</head>
<body>
<div id="root"><div class="todo-container"><div class="todo-wrap"><div class="todo-header"><input type="text" placeholder="请输入你的任务名称，按回车键确认"/></div><ul class="todo-main"><li><label><input type="checkbox"/><span>xxxxx</span></label><button class="btn btn-danger" style="display:none">删除</button></li><li><label><input type="checkbox"/><span>yyyy</span></label><button class="btn btn-danger" style="display:none">删除</button></li></ul><div class="todo-footer"><label><input type="checkbox"/></label><span><span>已完成0</span> / 全部2</span><button class="btn btn-danger">清除已完成任务</button></div></div></div>
</div></body>
</html>

/* index.css */
/*base*/
body {background: #fff;
}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;
}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;
}.btn-danger:hover {color: #fff;background-color: #bd362f;
}.btn:focus {outline: none;
}.todo-container {width: 600px;margin: 0 auto;
}
.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;
}/*header*/
.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;
}.todo-header input:focus {outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}/*main*/
.todo-main {margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;
}.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;
}
/*item*/
li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;
}li label {float: left;cursor: pointer;
}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;
}li button {float: right;display: none;margin-top: 3px;
}li:before {content: initial;
}li:last-child {border-bottom: none;
}/*footer*/
.todo-footer {height: 40px;line-height: 40px;padding-left: 6px;margin-top: 5px;
}.todo-footer label {display: inline-block;margin-right: 20px;cursor: pointer;
}.todo-footer label input {position: relative;top: -1px;vertical-align: middle;margin-right: 5px;
}.todo-footer button {float: right;margin-top: 5px;
}

1. 静态组件

1.1 index.js

/* src/index.js */
//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//引入App组件
import App from './App'//渲染App到页面
ReactDOM.render(<App/>,document.getElementById('root'))

1.2 App

/* src/App.jsx */
//创建“外壳”组件App
import React,{Component} from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'//创建并暴露App组件
export default class App extends Component{render(){return (<div className="todo-container"><div className="todo-wrap"><Header/><List /><Footer /></div></div>)}
}

/* src/App.css */
/*base*/
body {background: #fff;}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;}.btn-danger:hover {color: #fff;background-color: #bd362f;}.btn:focus {outline: none;}.todo-container {width: 600px;margin: 0 auto;}.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}

1.3 Header

/* src/components/Header/index.jsx */
import React, { Component } from 'react'
import './index.css'export default class Header extends Component {render() {return (<div className="todo-header"><input type="text" placeholder="请输入你的任务名称，按回车键确认"/></div>)}
}

/* src/components/Header/index.css */
.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;}.todo-header input:focus {outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}

1.4 List

/* src/components/List/index.jsx */
import React, { Component } from 'react'
import Item from '../Item'
import './index.css'export default class List extends Component {render() {return (<ul className="todo-main"><Item /><Item /><Item /><Item /><Item /></ul>)}
}

/* src/components/List/index.css */
.todo-main {margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;}.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;}

1.5 Item

/* src/components/Item/index.jsx */
import React, { Component } from 'react'
import './index.css'export default class Item extends Component {render() {return (<li><label><input type="checkbox"/><span>xxxxx</span></label><button className="btn btn-danger" style={{display: "none"}}>删除</button></li>)}
}

/* src/components/Item/index.css */
li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}

1.6 Footer

/* src/components/Footer/index.jsx */
import React, { Component } from 'react'
import './index.css'export default class Footer extends Component {render() {return (<div className="todo-footer"><label><input type="checkbox"/></label><span><span>已完成0</span> / 全部2</span><button className="btn btn-danger">清除已完成任务</button></div>)}
}

/* src/components/Footer/index.css */
.todo-footer {height: 40px;line-height: 40px;padding-left: 6px;margin-top: 5px;}.todo-footer label {display: inline-block;margin-right: 20px;cursor: pointer;}.todo-footer label input {position: relative;top: -1px;vertical-align: middle;margin-right: 5px;}.todo-footer button {float: right;margin-top: 5px;}

2. 动态初始化列表

2.1 App

/* src/App.jsx */
//创建“外壳”组件App
import React,{Component} from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './App.css'//创建并暴露App组件
export default class App extends Component{//初始化状态state = {todos:[{id:'001',name:'吃饭',done:true},{id:'002',name:'睡觉',done:true},{id:'003',name:'打代码',done:false},{id:'004',name:'逛街',done:false}]}render(){const {todos} = this.statereturn (<div className="todo-container"><div className="todo-wrap"><Header/><List todos={todos}/><Footer /></div></div>)}
}

2.2 List

/* src/components/List/index.jsx */
import React, { Component } from 'react'
import Item from '../Item'
import './index.css'export default class List extends Component {render() {const {todos} = this.propsreturn (<ul className="todo-main">{todos.map(todo=> {return <Item key={todo.id} {...todo}/>})}</ul>)}
}

2.3 Item

/* src/components/Item/index.jsx */
import React, { Component } from 'react'
import './index.css'export default class Item extends Component {render() {const {name,done} = this.propsreturn (<li><label><input type="checkbox" defaultChecked={done}/><span>{name}</span></label><button className="btn btn-danger" style={{display: "none"}}>删除</button></li>)}
}

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

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

相关文章

手机木马远程控制复现

手机木马远程控制复现

目录 目录 前言 系列文章列表 渗透测试基础之永恒之蓝漏洞复现http://t.csdn.cn/EsMu2 思维导图 1&#xff0c;实验涉及复现环境 2,Android模拟器环境配置 2.1,首先从官网上下载雷电模拟器 2.2,安装雷电模拟器 2.3, 对模拟器网络进行配置 2.3.1,为什么要进行配置…
阅读更多...
用Navicat备份Mysql演示系统数据库的时候出：Too Many Connections

用Navicat备份Mysql演示系统数据库的时候出：Too Many Connections

今天用Navicat进行数据备份的时候&#xff0c;发现由于数据库连接数目过多导致连接锁定&#xff0c;这种情况在多人协同开发的场景中很常见。当然我这里也因为多个应用使用了数据库连接&#xff0c;所以出现了Too Many Connections。 可能是超过最大连接数了。 1、进入Navicat…
阅读更多...
亚信科技AntDB数据库携“U8C+AntDB联合产品”亮相“2023全球商业创新大会”，开启生态合作新篇章

亚信科技AntDB数据库携“U8C+AntDB联合产品”亮相“2023全球商业创新大会”，开启生态合作新篇章

8月18-19日&#xff0c;近万人齐聚上海国家会展中心&#xff0c;带着对数字化、数智化趋势和热点的关注&#xff0c;以满腹热情投身到以“数据驱动 智能运营”为主题的“2023全球商业创新大会”&#xff0c;共商新技术条件下企业信息化出现的新课题、新挑战&#xff0c;共享数智…
阅读更多...
spice VDAgent简介

spice VDAgent简介

vdagent分为linux和windows&#xff0c;其中Linux分为vdagent守护进程和vdagent客户端进程&#xff0c;而windows主要为vdagent服务。 在windows中&#xff0c;通过服务方式自启动&#xff0c;并控制windows显示等。 在linux中&#xff0c; 守护进程通过 Sys-V initscript 或 s…
阅读更多...
【配电变电站的最佳位置和容量】基于遗传算法的最优配电变电站放置(Matlab代码实现）

【配电变电站的最佳位置和容量】基于遗传算法的最优配电变电站放置(Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
十二、集合（5）

十二、集合（5）

本章概要 for-in 和迭代器 适配器方法惯用法 本章小结 简单集合分类 for-in和迭代器 到目前为止&#xff0c;for-in 语法主要用于数组&#xff0c;但它也适用于任何 Collection 对象。实际上在使用 ArrayList 时&#xff0c;已经看到了一些使用它的示例&#xff0c;下面是它…
阅读更多...
【C++】泛型编程 | 函数模板 | 类模板

【C++】泛型编程 | 函数模板 | 类模板

一、泛型编程 泛型编程是啥&#xff1f; 编写一种一般化的、可通用的算法出来&#xff0c;是代码复用的一种手段。 类似写一个模板出来&#xff0c;不同的情况&#xff0c;我们都可以往这个模板上去套。 举个例子&#xff1a; void Swap(int& a, int& b) {int tmp …
阅读更多...
如何在Robosuite中导入自建的物体模型

如何在Robosuite中导入自建的物体模型

Robosuite是基于mujoco封装的机器人操作库&#xff0c;而mujoco的碰撞检测是基于凸壳&#xff0c;也就是geom必须是凸的&#xff0c;如果是凹的话&#xff0c;凹的部分会有一个透明的屏障而无法与其他物体有碰撞。但是实际场景很多物体都不是凸的&#xff0c;比如杯子的口是凹进…
阅读更多...
六招带你认识炫酷的新的室内工业艺术风格

六招带你认识炫酷的新的室内工业艺术风格

就在设计师们以为他们已经见识过所有可能的风格和样式组合时&#xff0c;工业风出现了。这种原始与精致的开创性组合从大都市的仓库和工厂改建而来&#xff0c;对现代装饰产生了巨大的影响。 工业风格的起源 工业风格住宅和工业风格公寓的起源 由于大城市缺乏经济适用房&…
阅读更多...
模拟实现字符串函数和内存函数

模拟实现字符串函数和内存函数

模拟实现字符串函数和内存函数 函数介绍部分模拟实现strlenstrcpy,strcat,strcmpstrncpy,strncat,strncmpstrstr,strtokstrerror 字符分类函数内存函数memcpy,memmove,memset,memcmp 求字符串长度(strlen)长度不受限制的字符串函数(strcpy,strcat,strcmp)长度受限制的字符串函数…
阅读更多...
科学中的人工智能：量子、原子和连续体技术概述

科学中的人工智能：量子、原子和连续体技术概述

人工智能&#xff08;AI&#xff09;的进步正在推动自然科学领域的一种新的发现范式。如今&#xff0c;AI已经开始通过改进、加速和促进我们对各种空间和时间尺度上自然现象的理解来推动自然科学的发展&#xff0c;催生了一个被称为AI for science&#xff08;AI4Science&#…
阅读更多...
Vue中的生命周期钩子

Vue中的生命周期钩子

生命周期钩子 :::warning 注意 所有生命周期钩子的 this 上下文将自动绑定至实例中&#xff0c;因此你可以利用 this 访问 props、data、computed 和 methods 等选项内的数据/函数。这意味着你不应该使用箭头函数来定义一个生命周期方法&#xff0c;因为箭头函数中没有 this&a…
阅读更多...
牛客：小美的01串翻转

牛客：小美的01串翻转

小美的01串翻转 #include<iostream> #include<cstring> #include<string> #include<vector>using namespace std; typedef long long ll; const int N 1100; string s; ll res 0;int main() {cin>>s;int n s.size();vector<vector<in…
阅读更多...
第三方服务提权

第三方服务提权

nfs挂载原理 目标机器192.168.17.138 开启2049 nfs端口 查看目标开放的文件夹 showmount -e 192.168.17.138 回显&#xff1a;/home/peter * 说明可挂载/home/peter的所有目录 使用WinSCP链接靶机192.168.17.138 更改名字为 authorized_keys 靶机 赋值权限 攻击机 nfs挂载提…
阅读更多...
2023最新UI工作室官网个人主页源码/背景音乐/随机壁纸/一言

2023最新UI工作室官网个人主页源码/背景音乐/随机壁纸/一言

2023最新UI工作室官网个人主页源码/支持背景音乐/随机壁纸/一言 功能介绍&#xff1a; 载入动画 站点简介 Hitokoto 一言 日期及时间 实时天气 时光进度条 音乐播放器 移动端适配 打开文件&#xff1b;index.html和setting.json修改替换你的相关信息&a…
阅读更多...
Unity的GPUSkinning进一步介绍

Unity的GPUSkinning进一步介绍

大家好&#xff0c;我是阿赵。   在几年前&#xff0c;我曾经写过一篇介绍GPUSkinning的文章&#xff0c;这么多年之后&#xff0c;还是看到不停有朋友在翻看这篇旧文章。今天上去GitHub看了一下&#xff0c;GPUSkinning这个开源的插件已经很久没有更新过了&#xff0c;还是停…
阅读更多...
虹科方案 | HK-NEOs系列带来先进的磁带自动化解决方案

虹科方案 | HK-NEOs系列带来先进的磁带自动化解决方案

一、HK-NEOs 系列自动磁带库 通常只有在昂贵的企业解决方案中才能找到的高级功能&#xff0c;我们的入门级磁带自动化产品就能够具备。使用 HK-NEOs 系列自动化磁带库&#xff0c;可以获得远程管理、可拆卸盒式磁带卷、可升级磁带驱动器、条形码阅读器等更多功能。 但这还不是…
阅读更多...
JavaScript逻辑题：输出1000之内的所有完数。所谓完数指的是：如果一个数恰好等于它的所有因子之和，这个数就称为完数。

JavaScript逻辑题：输出1000之内的所有完数。所谓完数指的是：如果一个数恰好等于它的所有因子之和，这个数就称为完数。

// 定义函数function judgeNum(){// 定义数组存储完数let arr []// for循环1000以内的所有数for(let i 1;i<1000;i){// 定义sum存储一个数的因子之和let sum 0;// 内层循环一个数的因子for(let j 1;j<i;j){if(i % j 0){sum j;}}// 如果一个数和它的因子之和相等&am…
阅读更多...
FPGA-结合协议时序实现UART收发器（六）：仿真模块SIM_uart_drive_TB

FPGA-结合协议时序实现UART收发器（六）：仿真模块SIM_uart_drive_TB

FPGA-结合协议时序实现UART收发器&#xff08;六&#xff09;&#xff1a;仿真模块SIM_uart_drive_TB 仿真模块SIM_uart_drive_TB&#xff0c;仿真实现。 vivado联合modelsim进行仿真。 文章目录 FPGA-结合协议时序实现UART收发器&#xff08;六&#xff09;&#xff1a;仿真模…
阅读更多...
JavaScript逻辑题：牙膏2元 牙刷5元 牙膏盒15元 请问正好花完100元 有多少情况？

JavaScript逻辑题：牙膏2元 牙刷5元 牙膏盒15元 请问正好花完100元 有多少情况？

// 定义牙膏 牙刷 牙膏盒分别的价格 let toothpaste 0;let toothbrush 0;let toothpastebox 0;// 定义sum用来存储几种情况let sum 0;//第一层循环 循环牙膏买多少for (let i 0; i < 20; i){toothpaste 5 * i;// 二层循环 循环牙刷的数量for (let j 0; j < 50; j…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023