React脚⼿架创建⼀个React应⽤以及项⽬⽬录结构详解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组件，再由comme
nt-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>
);
}box sizing
}
export default Comment;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。