react脚手架
用来帮助程序员快速创建一个基于xxx库的模板项目,包含了所有需要的配置,指定好了所有的依赖,可以直接安装/编译/运行一个简单效果
react提供了一个专门用于创建react项目的脚手架库: create-react-app
项目的整体技术架构为: react + webpack + es6 + babel + eslint
使用脚手架开发的项目的特点: 模块化(js是一个一个模块编写的), 组件化(界面是由多个组件组合编写实现的), 工程化(实现了自动构建/运行/打包的项目)
使用react脚手架创建项目并启动
下载脚手架:npm install -g create-react-app
创建项目:create-react-app react-app
进入项目目录:cd react-app
启动项目:npm start
react脚手架创建项目目录结构
node_modules-------第三方依赖模块文件夹
public
| -- index.html------------------------主页面
src:
.gitignore-------git版本管制忽略的配置
package.josn-------应用包配置文件
README.md-------应用描述说明的readme文件
基于脚手架项目编写应用案例
实现如下的效果
使用脚手架创建项目
拆分组件
- 应用组件: App------state: comments/array
- 添加评论组件: comment-add-------state: username/string, content/string props: add/func
- 评论列表组件: comment-list-------- props: comment/object, delete/func, index/number
- 评论项组件: comment-item-------- props: comments/array, delete/func
上面是拆分的每个组件,并且将页面组件在App.js中引入
实现静态组件并且实现动态组件(组件动态化,也就是添加数据交互)
App.js中引入comment组件
import React, { Component } from 'react';
import './App.css';
import Comment from './views/comment/comment'
class App extends Component {
render() {
return (
<div className="App">
<Comment/>
</div>
);
}
}
export default App;
comment组件
组件中引入comment-add和comment-list组件
import React, { Component } from 'react';
import './comment.css';
import CommentAdd from './comment-add/comment-add'
import CommentList from './comment-list/comment-list'
class Comment extends Component {
// 给组建对象指定state属性,可以不用constructor
state = {
comments: [
{username: 'Tom', content: '一个虚拟DOM(元素)是一个一般的js对象, 准确的说是一个对象树(倒立的)'},
{username: 'Jack', content: '虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应'},
{username: 'Jack', content: '用JS对象树表示DOM树的结构;然后用这个树构建一个真正的DOM树插到文档当中'},
{username: 'Jack', content: '这里render不断在执行更新date数据,但是input是不会更新的'},
{username: 'Jack', content: '拆分组件: 拆分界面,抽取组件,实现静态组件: 使用组件实现静态页面效果'},
{username: 'Jack', content: '数据保存在哪个组件,如果是这个数据只是某个组件需要用到,那么就放在该组件,如果有两个组件需要用到'},
{username: 'Jack', content: '子组件改变父组件的状态(状态在哪个组件,更新状态的行为就应该定义在哪个组件,父组件定义函数,传给子组件调用)'}
]
}
// 给comment-add组件调用的添加评论的方法
addComment = (comment) => {
const {comments} = this.state
comments.unshift(comment)
this.setState({comments}) // 更新状态
}
// 给comment-item组件调用的删除评论的方法(这里先把这个方法传个comment-list组件,再由comment-list传给comment-item)
deleteComment = (index) => {
const {comments} = this.state
comments.splice(index, 1)
this.setState({comments}) // 更新状态
}
render() {
const {comments} = this.state
return (
<div className="comment">
<h1 className='comment-title'>请发表对React的评论</h1>
<div className='comment-main'>
<div className='comment-content-left'>
<CommentAdd addComment={this.addComment}/>
</div>
<div className='comment-content-right'>
{/*<CommentList comments={comments}/>*/}
<CommentList comments={comments} deleteComment={this.deleteComment}/>
</div>
</div>
</div>
);
}
}
export default Comment;
.comment-list-title{
font-size: 30px;
height: 59px;
border-bottom: 1px solid #cccccc;
}
.comment-list-content{
min-height: 20px;
max-height: 419px;
overflow-y: auto;
padding: 10px 0;
box-sizing: border-box;
}
.no-comment-list{
color: #FF4A16;
}
comment-add组件
import React, { Component } from 'react';
import './comment-add.css';
import propTypes from 'prop-types'
class CommentAdd extends Component {
static propTypes = {
addComment: propTypes.func.isRequired
}
state = {
username: '',
content: ''
}
// 一个事件需要使用bind绑定this,太麻烦,而已使用箭头函数(里面没有this,使用外围的this)
handleSubmit = () => {
// 收集表单数据
const comment = this.state
// 更新状态
this.props.addComment(comment)
// 清除输入框的数据
this.setState({
username: '',
content: ''
})
}
handleNameChange = (event) => {
const username = event.target.value
this.setState({username: username})
}
handleContentChange = (event) => {
const content = event.target.value
this.setState({content: content})
}
render() {
const {username, content} = this.state
return (
<div className="comment-add">
<div className='user-name-content'>
<h5 className='user-name-title'>用户名</h5>
<input className='user-name-input' type='text' value={username} onChange={this.handleNameChange}/>
</div>
<div className='comment-content'>
<h5 className='comment-content-title'>评论内容</h5>
<textarea className='comment-content-input' type='text' value={content} onChange={this.handleContentChange}/>
</div>
<div className='submit-btn' onClick={this.handleSubmit}>提交</div>
</div>
);
}
}
export default CommentAdd;
.comment-add{
width: 100%;
}
.user-name-content,.comment-content{
width: 100%;
margin-bottom: 20px;
}
.user-name-title,.comment-content-title{
margin-bottom: 5px;
font-size: 20px;
color: #000000;
}
.user-name-input{
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 6px;
box-sizing: border-box;
border-radius: 4px;
outline: none;
border: 1px solid #cccccc;
}
.comment-content-input{
width: 100%;
height: 240px;
padding: 4px;
box-sizing: border-box;
border-radius: 4px;
outline: none;
border: 1px solid #cccccc;
}
.submit-btn{
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 16px;
color: black;
border: 1px solid #cccccc;
border-radius: 4px;
cursor: pointer;
margin: 0 auto;
}
comment-list组件
组件中引入comment-item组件
import React, { Component } from 'react';
import PropTypes from 'prop-types'
import './comment-list.css';
import CommentItem from '../comment-item/comment-item'
class CommentList extends Component {
// 子组件类指定接收数据的属性
static propTypes = {
comments: PropTypes.array.isRequired,
deleteComment: PropTypes.func.isRequired
}
render() {
const {comments, deleteComment} = this.props
const display = comments.length === 0? 'block' : 'none'
return (
<div className="comment-list">
<h2 className='comment-list-title'>评论回复</h2>
<div className='comment-list-content'>
{comments.map((comment, index) => <CommentItem comment={comment} index={index} key={index} deleteComment={deleteComment} />)}
</div>
<div className='no-comment-list' style={{display}}>暂无评论,在左侧添加您对React的评价!!!</div>
</div>
);
}
}
export default CommentList;
.comment-list-title{
font-size: 30px;
height: 59px;
border-bottom: 1px solid #cccccc;
}
.comment-list-content{
min-height: 20px;
max-height: 419px;
overflow-y: auto;
padding: 10px 0;
box-sizing: border-box;
}
.no-comment-list{
color: #FF4A16;
}
comment-item组件
import React, { Component } from 'react';
import './comment-item.css';
import PropTypes from "prop-types";
class CommentItem extends Component {
// 子组件类指定接收数据的属性
static propTypes = {
comment: PropTypes.object.isRequired,
index: PropTypes.number.isRequired,
deleteComment: PropTypes.func.isRequired
}
handleDelete = () => {
const {comment, index, deleteComment} = this.props
// 提示
if (window.confirm(`确定删除${comment.username}的评论吗`)) { // confirm方法不是全局的,需要用window来调用
// 确定后删除
deleteComment(index)
}
}
render() {
const {comment} = this.props
return (
<div className="comment-item">
<div className='comment-item-top'>
<h3 className='comment-item-user'>{comment.username}说:</h3>
<div className='comment-item-delete'><p onClick={this.handleDelete}>删除</p></div>
</div>
<div className='comment-item-content'>{comment.content}</div>
</div>
);
}
}
export default CommentItem;
.comment-item{
width: 100%;
border: 1px solid #cccccc;
border-radius: 4px;
min-height: 20px;
padding: 0 10px;
box-sizing: border-box;
margin-bottom: 20px;
}
.comment-item-top{
height: 40px;
width: 100%;
display: flex;
}
.comment-item-user{
flex: 1;
height: 40px;
line-height: 40px;
}
.comment-item-delete{
width: 80px;
height: 40px;
}
.comment-item-delete p{
width: 50px;
height: 20px;
border: 1px solid #cccccc;
text-align: center;
line-height: 20px;
border-radius: 4px;
cursor: pointer;
margin: 10px auto 0;
font-size: 12px;
color: #0a25ff;
}
.comment-item-content{
width: 100%;
min-height: 20px;
padding: 10px 0;
box-sizing: border-box;
}