【React】归纳篇（七）React脚手架 | 写一个表单
React 脚手架
脚手架：用来帮助程序员快速创建一个基于某种库的模板项目。其包括：
- 所有需要的配置
- 指定的所有的依赖
- 可以直接安装/编译/运行的简单效果
React 提供了用于创建react项目的脚手架库：create-react-app,使用这个脚手架开发项目具有“模块化、组件化、工程化”特点。
工程化：例如通过一个命令就能对项目进行打包、编译，从而提升效率。
通常项目的整体技术架构：react+webpack+es6+eslint(代码检查工具)
package.json：描述当前项目(应用)相关信息的文件。
关注3点：
- 包的标识
- 当前应用涉及到的依赖
- 当前应用是如何运行与打包
dependencies :运行时依赖
devDependencies:开发时依赖，编译打包时需要，运行时不需要react-scripts :将架构家所有编译打包等的命令都封装在这个文件中，包括webpack。
官方脚手架创建与启动项目命令：
npm install -g create-react-app
create-react-app my-app
cd my-app
npm startnpm root -g 查看全局下载根目录主要在目录下的src文件夹进行开发。
- start 编译并启动项目
- bulid 生成打包文件（构建）
- 入口文件 index.js
默认暴露:export default xxx ,import引入时不需要加花括号{}
重写一个简单demo，把src目录下的文件删除，只保留logo.svg文件
表单练习-拆分组件与实现静态组件，写一个评论管理
步骤：
1、拆分组件，将每个组件命名，如app.jsx,comment-add.jsx,comment-list.jsx,comment-item.jsx
2、然后创建一个文件夹component,里面再新建每个组件的文件夹，在每个组件的文件夹下放.jsx，与.css文件。
如图所示：
然后就可以在这些文件夹中写静态组件。
3、实现静态组件
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app/app';
ReactDOM.render(app.jsx
import React, { Component } from 'react'
import CommentAdd from '../component-add/component-add'
import CommentList from '../component-list/component-list'
class App extends Component {
//给组件对象添加指定的state属性
state = {
comments:[
{username: 'tom',content : 'React哈哈哈'},
{username: 'yue',content : 'React啊啊啊'},
{username: 'kang',content : 'React呦呦呦'}
]
}
//添加评论
addComment = (comment) => {
const {comments} = this.state;
comments.unshift(comment);
//更新状态
this.setState({comments});
}
//删除评论
deleteComment = (index) => {
const {comments} = this.state;
comments.splice(index,1);
//更新状态
this.setState({comments});
}
render () {
const {comments} = this.state;
return (
<div>
"site-header jumbotron">
<div className="container">
<div className="row">
<div className="col-xs-12">
请发表对React的评论
div>
div>
div>
<div className="container">
this.addComment}/>
this.state.comments} deleteComment={this.deleteComment}/>
div>
div>
)
}
}
export default App
comment-add.jsx
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class CommentAdd extends Component {
//给组件类添加属性
static propTypes = {
addComment: PropTypes.func.isRequired
}
//给组件对象添加属性
state = {
username: '',
content: ''
}
//使用箭头函数，监听时不用进行bind()
handleSubmit = () => {
//搜集数据,并封装为comment对象
const comment = this.state;
//更新状态
this.props.addComment(comment);
//清除输入数据
this.setState(
{
username:'',
content:''
}
);
}
handleNameChange = (event) => {
const username = event.target.value;
this.setState({username});
}
handleContentChange = (event) => {
const content = event.target.value;
this.setState({content});
}
render () {
const {username,content} = this.state;
return (
<div className="col-md-4">
div>
)
}
}
export default CommentAdd
comment-list.jsx
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import CommentItem from '../component-item/component-item'
import './commentList.css'
class ComponentList extends Component {
//给组件类添加属性
static protoTypes = {
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-md-8">
"reply">评论回复：
暂无评论，点击左侧添加评论！！！
"list-group">
{
comments.map((c,index)=>index} deleteComment={deleteComment} index={index}/>)
}
div>
)
}
}
export default ComponentList
commentList.css
.reply {
margin-top: 0px;
}
component-item.jsx
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import './componentitem.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.props;
return (
"list-group-item">
<div className="handle">
"javascript:;" onClick={this.handleDelete}>删除
div>
"user">{comment.username}说:
"centence">{comment.content}
)
}
}
componentitem.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;
}