- 本项目分享个人学习 react 全家桶技术栈的一些经验心得。
- 学习过程会结合相关示例代码,在实践中学习更有成效。
- 欢迎补充,可通过 fork + pull request 的方式,参与到该项目。
与后端项目配合,取代 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
- 不需要依赖后端 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 键再点相关链接。
- Ant Design Pro v4 从后端下载 excel,后端返回的是文件流
- Ant Design Pro v4 开发备忘,TypeScript 版本
- 相关知识储备
- js 知识点
- redux 知识点
- React 项目调试技巧
- 像用 IDEA 调试 Java 代码一样,用 WebStorm 调试 react 代码
- redux 官方示例 todomvc 中的 todoList 过滤事件解析
- redux 官方示例 todomvc 两个警告修复
- React+Redux工程目录结构,最佳实践
- react 项目,在生产环境去掉 propTypes 检查代码,打包时自动去除
- WebStorm + React 项目,配置 ESLint
- ESLint 配置文件 .eslintrc 示例及说明
- react开发,日常经验汇总
用 Create React App 初始化项目,所有练习代码都会体现到 master 分支。
针对某一个知识点,完成练习之后,记录相关知识点,提交 master,然后从 master 创建一个分支。
以分支 branchName 为例,切换到该分支并拉取最新代码
git checkout branchName
git pull
以下是两大平台的帮助文档。
- github.com -> Creating a pull request from a fork
- gitee.com -> Fork + Pull 模式
(QQ 群号:683414457,进群密码:react stack
)