基于 react 脚手架的react 应用

前言

今天是学习react的第二周了，每天晚上差不多下班学习两个小时，虽说工作中用不到，但是技术学习肯定不嫌多。加油。

使用 create-react-app 创建 react 应用

react 脚手架

1. xxx 脚手架: 用来帮助程序员快速创建一个基于 xxx 库的模板项目 a. 包含了所有需要的配置 b. 指定好了所有的依赖 c. 可以直接安装/编译/运行一个简单效果
2. react 提供了一个用于创建 react 项目的脚手架库: create-react-app
3. 项目的整体技术架构为: react + webpack + es6 + eslint
4. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

创建项目并启动

npm install -g create-react-app  
create-react-app hello-react  
cd hello-react  
npm start

react 脚手架项目结构

ReactNews  
|--node_modules---第三方依赖模块文件夹  
    |--public  
        |-- index.html-----------------  主页面  
    |--scripts  
        |-- build.js-------------------build 打包引用配置  
    |-- start.js-------------------start运行引用配置  
    |--src------------源码文件夹  
    |--components-----------------react组件  
    |--index.js------------------- 应用入口 js  
    |--.gitignore------git 版本管制忽略的配置  
    |--package.json----应用包配置文件  
    |--README.md-------应用描述说明的 readme 文件

react ajax

说明

1. React 本身只关注于界面, 并不包含发送 ajax 请求的代码
2. 前端应用需要通过 ajax 请求与后台进行交互(json 数据)
3. react 应用中需要集成第三方 ajax 库(或自己封装)

常用的 ajax 请求库

1. jQuery: 比较重, 如果需要另外引入不建议使用
2. axios: 轻量级, 建议使用 a. 封装 XmlHttpRequest 对象的 ajax b. promise 风格 c. 可以用在浏览器端和 node 服务器端
3. fetch: 原生函数, 但老版本浏览器不支持 a. 不再使用 XmlHttpRequest 对象提交 ajax 请求 b. 为了兼容低版本的浏览器, 可以引入兼容库 fetch.js

知识点总结

组件间通信

通过 props 传递

1. 共同的数据放在父组件上, 特有的数据放在自己组件内部(state)
2. 通过 props 可以传递一般数据和函数数据, 只能一层一层传递
3. 一般数据-->父组件传递数据给子组件-->子组件读取数据
4. 函数数据-->子组件传递数据给父组件-->子组件调用函数

使用消息订阅(subscribe)-发布(publish)机制

1. 工具库: PubSubJS
2. 下载: npm install pubsub-js --save
3. 使用: import PubSub from 'pubsub-js' //引入 PubSub.subscribe('delete', function(data){ }); //订阅 PubSub.publish('delete', data) //发布消息

redux

事件监听理解

原生 DOM 事件

1. 绑定事件监听 a. 事件名(类型): 只有有限的几个, 不能随便写 b. 回调函数
2. 触发事件 a. 用户操作界面 b. 事件名(类型) c. 数据()

自定义事件(消息机制)

1. 绑定事件监听 a. 事件名(类型): 任意 b. 回调函数: 通过形参接收数据, 在函数体处理事件
2. 触发事件(编码) a. 事件名(类型): 与绑定的事件监听的事件名一致 b. 数据: 会自动传递给回调函数 至此react应用讲解完毕。