脚手架:用来帮助程序员快速创建一个基于某种库的模板项目。其包括:
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 start
npm root -g 查看全局下载根目录
主要在目录下的src文件夹进行开发。
默认暴露: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( , 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>
"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;
}