React脚手架
使用React开发一个单独的前端项目，也就是前后端分离后的前端部分。
create-react-app
create-react-app是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。
安装
利用npm来进行全局安装。
npm install -g create-react-app
创建项目
create-react-app xxx
创建的项目会是一个nodejs的项目，并且已经自动配好了react的环境。
运行项目
通过查看生成的package.json文件，可以知道通过npm run start来运行项目，输入指令后，会自动以端口号3000运行，并打开浏览器。
项目结构
项目内除了node_modules文件夹用来存储包，还有：
-
src文件夹存储页面（js文件）和css文件，包括入口文件index.js -
public文件夹存储静态资源，包括整个项目的基础index.html
create-react-app 的 Hello World
将之前的To do List 迁移到脚手架里，我们需要替换App.js和App.css里面的内容，其他都不需要改变。
App.js
import React from 'react';
import './App.css';
class App extends React.Component {
state = {
value: '',
list: []
}
handleAdd = () => {
const val = this.state.value;
const list = this.state.list;
//或 es6结构语法
// const{val,list} = this.state;
list.push(val);
this.setState({
list: list
//es6中 当list和value相等时，可以省略key
//由list:list 简写为 list
})
}
handleInput = (event) => {
this.setState({
value: event.target.value
})
}
handelRemove = (event) => {
var kk = event.target.dataset.bid
console.log(kk)
var arr = this.state.list;
arr.splice(kk, 1) // delete the item with index kk
this.setState({
list: arr
})
}
render() {
const val = this.state.value;
const arr = this.state.list;
const listItem = []
for (var i = 0; i < arr.length; i++) {
listItem.push(
<li key={i}>
{arr[i]}
<button data-bid={i} onClick={this.handelRemove}>remove</button>
</li>
)
}
return (
<div className="container">
<p>欢迎学习react</p>
<h1>Hello World</h1>
<div>
<input type="text" value={val} onChange={this.handleInput} placeholder="To do" />
<button onClick={this.handleAdd}>Add Item</button>
</div>
<ul>
{listItem}
</ul>
</div>)
}
}
export default App;
App.css
.container {
text-align: center;
margin: 20px auto;
}
.container p {
font-size: 10px;
}
.container h1 {
font-size: 20px;
color: #02043d;
}
实际上，这个脚手架做的事情是：
- App.js里面写了一个
<App />标签 - index.js里面将
<div> <App /> </div>渲染到了index.html中
也就是说，我们是一个单页面应用，我们开发时只需要修改App等相关文件就可以了。我们项目中看上去是页面跳转，实际上是<App>标签发生了改变，react重新渲染了它。
Top comments (0)