版权声明：转载请注明出处！喜欢就关注一下or点赞鼓励一下呗 https://blog.csdn.net/ImagineCode/article/details/82668203
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 />, document.getElementById('root'));
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>
<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">
<CommentAdd addComment = {this.addComment}/>
<CommentList comments={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">
<form className="form-horizontal">
<div className="form-group">
<label>用户名</label>
<input type="text" className="form-control" placeholder="用户名" value={username} onChange={this.handleNameChange}/>
</div>
<div className="form-group">
<label>评论内容</label>
<textarea className="form-control" rows="6" placeholder="评论内容" onChange={this.handleContentChange} value={content}></textarea>
</div>
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">
<button type="button" className="btn btn-default pull-right" onClick={this.handleSubmit}>提交</button>
</div>
</div>
</form>
</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">
<h3 className="reply">评论回复：</h3>
<h2 style={{display}}>暂无评论，点击左侧添加评论！！！</h2>
<ul className="list-group">
{
comments.map((c,index)=><CommentItem comment={c} key={index} deleteComment={deleteComment} index={index}/>)
}
</ul>
</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 (
<li className="list-group-item">
<div className="handle">
<a href="javascript:;" onClick={this.handleDelete}>删除</a>
</div>
<p className="user"><span >{comment.username}</span><span>说:</span></p>
<p className="centence">{comment.content}</p>
</li>
)
}
}
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;
}