react 技术栈（全家桶）学习

• 本项目分享个人学习 react 全家桶技术栈的一些经验心得。
• 学习过程会结合相关示例代码，在实践中学习更有成效。
• 欢迎补充，可通过 fork + pull request 的方式，参与到该项目。

master 分支

与后端项目配合，取代 APICloud API 方式。

登录之后，才可以发帖和评论。

• 后端项目的 sql 脚本初始化了四个用户
  • tom
  • jack
  • steve
  • AndyChen
• 密码都是：123456

运行

请注意，master 版本，需要与后端项目配合才可以运行，如果不想运行后端Java项目，请参考：bbs-apicloud 分支

• 克隆后端代码，用你喜欢的 IDE 导入项目并启动，默认端口是89

git clone https://github.com/uncleAndyChen/spring-boot-bbs-api.git

• 克隆前端代码、安装依赖、运行

git clone https://github.com/uncleAndyChen/react-full-stack-learning.git
cd react-full-stack-learning.git
npm i
npm start

bbs-apicloud 分支

• 不需要依赖后端 api 项目，用的在线 api，已经配置好，克隆到本地后，直接启动项目即可查看效果。
• 仅对《React进阶之路》第九章示例bbs-redux-reselect添加一些备注，增加 ESLint检查，代码逻辑基本保留。
• 《React进阶之路》第九章示例 bbs-redux-reselect 解读

获取该分支

• 第一种方式：克隆时，通过参数 -b 指定该分支：git clone -b bbs-apicloud https://github.com/uncleAndyChen/react-full-stack-learning.git
• 第二种方式：不指定分支，先全部克隆，然后通过 git checkout 切换到该分支 bbs-apicloud

git clone https://github.com/uncleAndyChen/react-full-stack-learning.git
git checkout bbs-apicloud 

运行

通过上述方式克隆本分支到本地后，执行以下脚本：

npm i
npm start

后端项目地址

• 托管在 github 上的项目链接：https://github.com/uncleAndyChen/spring-boot-bbs-api
• 托管在 gitee 上的项目链接 ：https://gitee.com/uncleAndyChen/spring-boot-bbs-api

计划

• 提供与该示例配套的 spring boot 后端 API 代替 APICloud API。（spring-boot-bbs-api）。
• 增加点赞/收藏功能（点赞/收藏之前需要先登录，每个用户对同一个帖子，点赞/收藏之后可取消点赞/收藏，类似微信朋友圈儿的点赞功能）。
  • 【我的收藏】菜单，决定不做了。之后如果有时间，会把精力投入到 ant-design-pro。
• 增加菜单【我的帖子】，只是简单的过滤，没有重新从服务器获取。目前页面显示的是所有帖子。

项目依赖及版本

• 用 Create React App 初始化项目

  npx create-react-app react-and-redux-demo
• 相关依赖均使用当前最新版（截止 2018-12-05）。
  • react v16.6.3
  • redux v4.0.1
  • react-redux v5.1.1
  • react-router-dom v4.3.1
  • reselect v4.0.0
  • redux-thunk v2.3.0

项目地址

• 托管在 github 上的项目链接：https://github.com/uncleAndyChen/react-full-stack-learning
• 托管在 gitee 上的项目链接 ：https://gitee.com/uncleAndyChen/react-full-stack-learning

相关文档

友情提示：如果要在新窗口中打开以下链接，请按住 Ctrl 键再点相关链接。

1. Ant Design Pro v4 从后端下载 excel，后端返回的是文件流
2. Ant Design Pro v4 开发备忘，TypeScript 版本
3. 相关知识储备
4. js 知识点
5. redux 知识点
6. React 项目调试技巧
7. 像用 IDEA 调试 Java 代码一样，用 WebStorm 调试 react 代码
8. redux 官方示例 todomvc 中的 todoList 过滤事件解析
9. redux 官方示例 todomvc 两个警告修复
10. React+Redux工程目录结构，最佳实践
11. react 项目，在生产环境去掉 propTypes 检查代码，打包时自动去除
12. WebStorm + React 项目，配置 ESLint
13. ESLint 配置文件 .eslintrc 示例及说明
14. react开发，日常经验汇总

结合例子代码学习

• 《深入浅出React和Redux》一书的部分章节例子代码演练及相关知识点

分支说明

用 Create React App 初始化项目，所有练习代码都会体现到 master 分支。
针对某一个知识点，完成练习之后，记录相关知识点，提交 master，然后从 master 创建一个分支。

获取（切换至）某分支

以分支 branchName 为例，切换到该分支并拉取最新代码

git checkout branchName
git pull

如何参与项目，如何提交 PR？

以下是两大平台的帮助文档。

• github.com -> Creating a pull request from a fork
• gitee.com -> Fork + Pull 模式

加群一起学习

（QQ 群号：683414457，进群密码：react stack）