react+webpack项目实际开发应用
react+webpack项目实际开发应用
1.知其然不知其所以然,你只会了JSX语法,却只能照猫画虎,却不知道react背后的基础知识,如果你连JSX最后会编译成js都不知道,或者编译成的js都读不懂,那更不用谈灵活扩展和开发了。
2.一个项目要想开发出来仅仅需要只知道react还需要知道很多知识,比如现在很多教程和项目都是webpack构建打包的,如果你不会webpack那么,你甚至连基础的开发环境都配置不出来。当然还有很多react和react周边的知识,单纯一个hello word 或者 几个函数和语法的使用介绍是搞不定的。
至少你需要知道一下知识,才能顺利的完成一个完整的项目:
首先是关于react的:
1.jsx语法
2.状态
3属性
4.组件
5.组件生命周期
6.事件
然后是基础工作:
ES6
bebel编译
webpack
然后是数据交互和保存和常用的功能
1.路由
2.数据交互
3.数据持久化
3.日常我们看例子的时候很多是“套件化”,很多人都是用 react+flux等,一旦你不用你就不会了,还有人使用
引入link方式开发react,还有人npm去安装,还有人用wepack各种技术组合乱七八糟,五花八门,加上技术更新快
很多例子都跑步起来了在新的语法下,即使老的很多时候不得不面对网络FQ的问题。
针对这些问题,我分三部分去说,
1.ES6基础知识
箭头函数
class
模块导入导出
解释下jsx编译后成js的代码的原理和意思。
入门的react小例子
2.react生产环境 注意是生产不是开发,区别在于是实际项目而不是演示,两者不同。
npm搭建环境
webpack使用
bebel的使用
react路由
react热插拔
组件嵌套和数据传递
3.数据交互与持久化
一、ES6基础速查
这里的ES6知识并不是告诉你准确的东西,而是让你在一分钟之内了解ES6,让你顺利的学习react,而不是耗费精力在细枝末节上,当然ES6绝对是重中之重,理解react的必备,但是这个教程是让你迅速上手出活,而不是教你原理。
直接上ES6对比ES6
let ->var
const ->var 当时不能改,常量
import 相当于 src
class ES5里面的 对象
arr.map函数
箭头函数 直接说
([param] [, param]) => {
statements
}
param => expression
() => { ... } // 零个参数用 () 表示;
x => { ... } // 一个参数可以省略 ();
(x, y) => { ... } // 多参数不能省略 ();
好,我们继续回到正题,模块化的使用react,前面我们使用过引用react库的方式,而实际项目中更常见的方式是我们通过NPM/yarn等,管理项目功能和模块,不多说我们还是从一个最简单的hello world开始。
二、react的常用例子
直接上安装react和相关环境,
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
注意,很多教程是从webpack, Babel and ESLint等配置开始的,其实不用,上面的工作其实就是帮你配置这些,当然了,你如果能够了解如何配置更好,但是现在是学react所以我尽量不引人新知识,想让大家会用。
注意这个是开发过程,如果是上线 使用命令
npm run build 最后会将上线文件放到 build文件夹下
大部分时间我们是和app.js打交道,不墨迹开整。
1.先看看app.js里面写的啥?
class App extends Component{
render(){
return (
<h1>hello word</h1>
);
}
}
我们对比一下之前函数的写法
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
注意:推荐大家使用第一种写法,为什么?因为第一种写法有状态,函数的写法没有。后面我们会说为什么。
我们继续折腾app.js
2.下面我们说下,在react中的属性使用
class App extends Component{
render(){
return (
<h1>{this.props.index}</h1>
);
}
}
ReactDOM.render(
<App index = '我是一个属性' />//注意自封闭,txt就是属性
document.getElementById('div1');
);
3.下面说一下个对应第一个第一篇文章的状态管理。先看代码
class App extends Component{
constructor(){
super();//不用你理解,你只要记住一件事 super调用父类的构造器,使用this的话必须先执行它。
this.state = {
name:'尼古拉斯·屌·大彬哥'
};
}
update(e){
this.setState({
name:e.target.value
});
}
render(){
return (
<div>
<input type = "text" onChange = {this.update.bind(this)} />
<h1>{this.state.name}</h1>
</div>
);
}
}
4.多个组件嵌套 App 这个组件里面嵌套着 Widget
import React, { Component } from 'react';
class App extends Component{
constructor(){
super();//不用你理解,你只要记住一件事 super调用父类的构造器,使用this的话必须先执行它。
this.state = {
txt:''
};
this.update = this.update.bind(this);
}
update(e){
this.setState({
txt:e.target.value
});
}
render(){
return (
<div>
<Widget txt={this.state.txt} update={this.update} />
<Widget txt={this.state.txt} update={this.update} />
<Widget txt={this.state.txt} update={this.update} />
</div>
);
}
}
const Widget = (props) => {
return (
<div>
<input type="text"
onChange={props.update} />
<h1>{props.txt}</h1>
</div>
);
}
export default App;
5.作为例子肯定少不了列表循环
class App extends Component{
constructor(){
super();//不用你理解,你只要记住一件事 super调用父类的构造器,使用this的话必须先执行它。
this.state = {
data:[
{name:"leo",age:18},
{name:"alice",age:19},
{name:"blue",age:17},
]
};
}
render(){
let rows = this.state.data.map(person=>{
return <PersonRow key = {person.id} data = {person} />
});
return (
<ul>
<li>rows</li>
</ul>
);
}
}
const PersonRow = (props)=>{
return (
<li>{props.data.name}-----{props.data.age}</li>
);
}
三、实际项目生产环境搭建
四、webpack的配置和使用
五、react 模块路由 组件嵌套等。
六、数据交互和持久化