/react-geek-time

极客时间《React 从入门到精通》视频课程示例代码。

Primary LanguageJavaScript

极客时间:React 从入门到精通

所有课程已经更新完毕,感谢大家支持!🎉🎉🎉

本 Repo 包含了所有课程的演示代码,代码由 codesandbox.io 同步到本 Repo:https://codesandbox.io/s/6n20nrzlxz

通过 codesandbox.io 您可以在线修改演示代码尝试运行结果,无需本地部署。

课程讲稿下载

Demo 结构

如下图,左侧为所有代码,按课程顺序进行 Demo 的组织。右侧为演示界面,菜单显示了所有可运行的 Demo 链接。点击菜单可以看到运行的结果。

Demo 列表

  • 01 chat-app: 简单的 React 组件和交互演示
  • 02 comment-box:评论框界面的组件拆分和实现
  • 03 clock: JSX 语法演示
  • 04 clock: 显示当前时间的组件,演示生命周期方法的调用
  • 05 dom-diff:演示 DOM Diff 的算法原理
  • 06 adv-tab-selector,withTimer: 高阶组件和函数作为子组件
  • 07 locale-sample: 使用 Conext API 实现多语言切换
  • 11 pure-reducer:纯 Redux 的使用
  • 12 counter:在 React 中使用 Redux
  • 13 async-action:Redux 异步 action,中间件的概念
  • 14 org-action:如何组织 Redux 的 action 和 reducer
  • 16 router-sample:路由不只是页面切换,更是代码组织方式
  • 17.1 router-params:路由参数定义
  • 17.2 nexted-route:嵌套路由
  • 29.1 form-submit: 表单提交
  • 29.2 form-submit-antd:使用 antd 的表单组件
  • 30 dynamic-form:动态表单
  • 31 list-page:列表页的翻页,搜索和缓存
  • 33 multiple-request:页面多个请求的处理
  • 35 wizard-sample:基于路由实现向导页面
  • 36.1 layout1:常用布局的实现
  • 36.2 layout2: 常用布局的实现
  • 36.3 layout-resize:实现侧边栏可调整宽度
  • 37.1 portal-example:使用 React Portals 实现的对话框
  • 37.2 antd-dialog:使用 antd 实现对话框
  • 40 dnd-sample:在 React 中实现拖放功能
  • 43 reselect-sample:使用 reselect 避免重复计算
  • 44 suspense:React 的异步渲染

License

MIT