[React] 尚硅谷 -- 学习笔记(三)

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

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

react脚手架

xxx 脚手架：用来帮助程序员快速创建一个基于 xxx 库的模板项目
- 包含了所有需要的配置
- 指定好了所有的依赖
- 可以直接安装/编译/运行一个简单效果
react 提供了一个用于创建 react 项目的脚手架库：create-react-app
项目的整体技术架构为：react + webpack + es6 + eslint
使用脚手架开发的项目的特点：模块化，组件化，工程化

创建并启动

// 全局安装create-react-app脚手架
npm i -g create-react-app
// 创建一个react项目，项目名称是hello-react
create-react-app hello-react
// 进入hello-react
cd hello-react
// 启动项目
npm start

react脚手架项目结构

node_modules – 第三方依赖模块文件夹
public
- index.html – 主页面
scripts
- build.js – build打包引用配置
- start.js – start运行引用配置
src – 源码文件夹
- components – react组件
- index.js – 应用入口js
.gitignore – git版本管制忽略的配置
package.json – 应用包配置文件
README.md – 应用描述说明的readme文件

案例 – 评论管理

app.jsx

import React, {Component} from 'react'import CommentAdd from "../comment-add/comment-add";
import CommentList from "../comment-list/comment-list";export default class App extends Component {//给组件对象指定state属性(简写)state = {comments: [{username: 'Tom', content: 'React挺好的！'},{username: 'Jack', content: 'React太难了！'}]}// 添加评论addComment = (comment) => {// 收集数据const {comments} = this.statecomments.unshift(comment)// 更新状态this.setState({comments})}// 删除指定评论deleteComment = (index) => {// 收集数据const {comments} = this.state// splice可以实现增删改comments.splice(index, 1)// 更新状态this.setState({comments})}render() {const {comments} = this.statereturn (<div><header className="site-header jumbotron"><div className="container"><div className="row"><div className="col-xs-12"><h1>请发表对React的评论</h1></div></div></div></header><div className="container"><div className="row"><CommentAdd addComment={this.addComment}/><CommentList comments={comments} deleteComment={this.deleteComment}/></div></div></div>);}
}

comment-add.jsx

import React,{Component} from 'react'
import PropsTypes from 'prop-types'export default class CommentAdd extends Component{static propsTypes={addComment:PropsTypes.func.isRequired}state = {usename:'',content:''}// 点击提交事件handleSubmit = (event) => {//1. 收集数据,并封装为comment对象const comment = this.state//2. 更新状态this.props.addComment(comment)//3.清除数据this.setState({username:'',content:''})// 阻止事件的默认行为(提交)event.preventDefault()//数据在那个组件，更新数据的行为就应该在那个组件}handleNameChange = (event) =>{const  username = event.target.valuethis.setState({username})}handleContentChange = (event) =>{const content = event.target.valuethis.setState({content})}render() {const {username,content} = this.statereturn (<div className="col-4"><form className="form-horizontal"><div className="form-group"><label>用户名</label><input type="text" className="form-control" placeholder="用户名" name="username"value={username} onChange={this.handleNameChange}/></div><div className="form-group"><label>评论内容</label><textarea className="form-control" rows="6" placeholder="评论内容" name="content"value={content} onChange={this.handleContentChange}></textarea></div><div className="form-group"><div className="col-sm-offset-2 col-sm-10"><button className="btn btn-primary pull-right" onClick={this.handleSubmit}>提&nbsp;&nbsp;交</button></div></div></form></div>);}
}

comment-item

comment-item.jsx

import React, {Component} from 'react'
import PropTypes from 'prop-types'import './commentItem.css'export default class CommentItem extends Component {//定义约束static propTypes = {comment: PropTypes.object.isRequired,deleteComment: PropTypes.func.isRequired,index: PropTypes.number.isRequired}handleDelete = () => {const {comment, deleteComment, index} = this.props// 提示if (window.confirm(`确定删除${comment.username}的评论吗？`)) {// 确定后删除deleteComment(index)}}render() {// 取数据const {comment} = this.propsreturn (<li className="list-group-item"><div className="handle"><button className="btn btn-danger" onClick={this.handleDelete}>删除</button></div><p className="user"><span>{comment.username}</span>说：</p><p className="centence">{comment.content}</p></li>);}
}

commentItem.css

li {transition: .5s;overflow: hidden;
}.handle {width: 40px;border: 1px solid #ccc;background: #fff;position: absolute;right: 10px;top: 1px;text-align: center;
}.handle a {display: block;text-decoration: none;
}.list-group-item .centence {padding: 0px 50px;
}.user {font-size: 22px;
}

comment-list

comment-list.jsx

import React, {Component} from 'react'
import PropTypes from 'prop-types'import './comment-list.css'
import CommentItem from "../comment-item/comment-item";export default class CommentList extends Component {//给组件类指定属性static proTypes = {comments: PropTypes.array.isRequired,deleteComment: PropTypes.func.isRequired}render() {const {comments, deleteComment} = this.props// 计算出是否显示const display = comments.length === 0 ? 'block' : 'none'return (<div className="col-8"><h3 className="reply">评论回复：</h3><h2 style={{display}}>暂无评论，点击上方添加评论！！！</h2><ul className="list-group">{comments.map((comment, index) => <CommentItem comment={comment} key={index}deleteComment={deleteComment} index={index}/>)}</ul></div>);}
}

comment-list.css

.reply {margin-top: 0px;
}

入口文件app.jsx

import React, {Component} from 'react'
import logo from '../logo.svg'export default class App extends Component {render() {return (<div><img className='logo' src={logo} alt="加载中..."/><p className='react_p'>React app组件</p></div>);}
}

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from "./compontents/app/app";ReactDOM.render(<App/>,document.getElementById('root'))

[React] 尚硅谷 -- 学习笔记(三)相关推荐

[React] 尚硅谷 -- 学习笔记(七)
第七章 react-ui 最流行的开源React UI组件库 material-ui(国外) 官网 GitHub ant-design(国内蚂蚁金服) PC官网 GitHub 移动官网 GitHub ...
[React] 尚硅谷 -- 学习笔记(六)
第六章 react-router4 理解 react-router react的一个插件库专门用来实现一个SPA应用基于react的项目基本都会用到此库 SPA 单页Web应用(single pa ...
[React] 尚硅谷 -- 学习笔记(五)
第五章总结组件间通信通过props传递共同的数据放在父组件上, 特有的数据放在自己组件内部(state) 通过props可以传递一般数据和函数数据, 只能一层一层传递一般数据–>父组件 ...
[React] 尚硅谷 -- 学习笔记(四)
第四章 react ajax 理解 React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据) react应用中需要集成第三方ajax库( ...
[React] 尚硅谷 -- 学习笔记(二)
第二章 React面向组件编程基本理解和使用自定义组件定义组件工厂函数组件(简单组件) function MyComponent () {return <h2>工厂函数组件(简单组 ...
[React] 尚硅谷 -- 学习笔记(一)
第一章 React入门 React基本认识用于构建用户界面的 JavaScript 库(View) 官网英文官网: https://reactjs.org/ 中文官网: https://doc.r ...
Java 基础第3阶段：高级应用——尚硅谷学习笔记（含面试题） 2023年
Java 基础第 3 阶段:高级应用--尚硅谷学习笔记(含面试题) 2023 年 Java 基础第 3 阶段:高级应用--尚硅谷学习笔记(含面试题) 2023 年第 9 章异常处理 9.1 异 ...
B站MySQL(尚硅谷)学习笔记
B站MySQL基础(尚硅谷)学习笔记最近在学习数据库技术,并且把视频中的知识点进行了汇总,字数较多,仅供参考. 会持续更新欢迎读者提出问题与错误,一起交流~ 视频前几集所讲述的基本知识: DB:数 ...
SpringBoot（尚硅谷学习笔记）
1.SpringBoot优点(官网 spring.io) Create stand-alone Spring applications 创建独立Spring应用 Embed Tomcat, Jetty ...

[React] 尚硅谷 -- 学习笔记(三)

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

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

react脚手架

创建并启动

react脚手架项目结构

案例 – 评论管理

[React] 尚硅谷 -- 学习笔记(三)相关推荐

最新文章

热门文章