react+webpack项目实际开发应用

在《react入门》和《react入门提高》中我讲了，react的基础应用，让大家能够迅速的上手使用，但是只是上手使用，为什么那么多的人照着我的例子能敲出来，而实际项目中写起来却困难重重呢？原因有三。

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各种技术组合乱七八糟，五花八门，加上技术更新快
很多例子都跑步起来了在新的语法下，即使老的很多时候不得不面对网络翻墙的问题。
针对这些问题，我分三部分去说，
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 (
        hello word
    );
  } 
}

我们对比一下之前函数的写法

ReactDOM.render(
  Hello, world!,
  document.getElementById('root')
);

注意：推荐大家使用第一种写法，为什么？因为第一种写法有状态，函数的写法没有。后面我们会说为什么。

我们继续折腾app.js

2.下面我们说下，在react中的属性使用

class App extends Component{
  render(){
    return (
        {this.props.index}
    );
  } 
}
ReactDOM.render(
    //注意自封闭，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 (
        
          
          {this.state.name}
        
      );
    } 
}

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 (
        
          
          
          
        
      
      );
    } 
}
const Widget = (props) => {
  return (
      
        
        {props.txt}
      
    );
}
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 
        });
      return (
            
          rows
        
      );
    } 
}

const PersonRow = (props)=>{
  return (
    {props.data.name}-----{props.data.age}
  );
}

三、实际项目生产环境搭建

四、webpack的配置和使用

五、react 模块路由组件嵌套等。

六、数据交互和持久化

react+webpack项目实际开发应用

hello word

Hello, world!

{this.props.index}

{this.state.name}

{props.txt}

你可能感兴趣的:(react+webpack项目实际开发应用)