集成React.js到Symfony

你好

2017/06/05 发布于 编程 分类

集成React.js到Symfony

React JS  Symfony  reactjs 

9
2019/07/03
删掉了可能会导致误解幻灯片已结束的第33页 @Razor
2017/12/19
感谢大家支持,有问题的话可以在评论里问我。
2017/12/18
我看还行
2017/12/04
不过还是感谢作者分享。
2017/12/04
看到30页的时候以为整个PPT结束了,原来后面还有9页。。React 集成到 Symfony 感觉整体介绍的不深,实际上整个PPT看第33页就可以了,前面那么多都是基础知识介绍。
2017/12/04

文字内容
1. React.js 从⼊入⻔门到上⼿手
2. 什什么是 React
3. • 由 Facebook ⼯工程师 Jordan Walke 创造 • React 是构建⽤用户界⾯面的 JavaScript 库 • 分别于2011年年在 Facebook newsfeed 和2012年年 在 Instagram 使⽤用 • 2013年年开源
4. 当前状态 当前版本 15.1 jQuery 排名 8 Github 项目排名* 6 Symfony 排名 159 * 使⽤用stars:>1作为搜索条件根据star数排名
5. 特性 • 只负责展示UI • 组件化 • 单向反应式数据流 • 虚拟 DOM • 所有⼀一切都是JS • JSX
6. Hello, World
7. 秒表 同步更更新
8. props 和 state props 组件属性,传输数据 到组件内部 state 组件的内部状态,组件界 ⾯面随state变化⽽而⾃自动更更新
9. 为什什么要使⽤用 React
10. 官⽅方理理由 简单 只需表达应⽤用在 某⼀一时刻的样⼦,子 ⾃自动根据数据更更 新UI 声明式 数据变化时⾃自动 刷新UI,只更更新 变化的部分 可组合组件 基于组件的形式, 组件可重⽤用、可测 试,关注分离
11. 我们的理理由 • 前后端分离,提⾼高效率 • 趋势 • ⼈人才市场 • 尝试新东⻄西 • 我们有能⼒力力和机会去⽤用
12. 怎么集成
13. ⼏几种⽅方式 • script标签直接引⽤用 • npm、bower 安装, webpack、browserify打包集成
14. ⼏几个⼯工具、词汇
15. webpack
16. webpack 核⼼心特性 加载器器 通过加载器器可以对任何⽂文 件进⾏行行预处理理 代码优化 多种优化缩减输出代码⼤大 ⼩小 代码分割 代码分割为多块,按需 加载,缩短加载时间 ⽀支持多种类型模块化 AMD,CommonJs, 代 码静态分析
17. React 项⽬目集成实例例 以公司项⽬目为例例
18. 竞彩弹窗
19. 多种状态
20. 安装 $ npm install —save-dev webpack babel-loader babel-preset-react $ npm install --save react react-dom babel-core babel-polyfill babel-runtime
21. ⽂文件⽬目录结构 • 所有⽂文件放在web下的app⽂文件夹 • components 内放置每个UI组件 • dist内放置编译过的JS⽂文件 • app.jsx ⼊入⼝口⽂文件
22. Components 外层组件 内部组件,根据6种竞彩状 态共有6个
23. 外层组件 内部组件
24. BetBox.jsx
26. ⼊入⼝口⽂文件 app.jsx
27. 配置 webpack webpack.config.js
28. 编译 $ webpack
29. 引⽤用到模板
30. 问题 • SEO • 第⼀一次加载时间过⻓长 • 最新版本停⽌止⽀支持 IE 8
 17.98%国内市场占有率
31. 解决⽅方案 • 服务器器端预显示 • webpack 优化模块加载 • 暂时使⽤用在⼿手机项⽬目上或使⽤用v14 • 不不使⽤用 React
32. 集成服务器器端预显示组件 特定于Symfony 后端:ReactBundle 前端:react-on-rails
33. $ npm install react-on-rails —save $ composer require limenius/react-bundle
34. 模板 helper {{ react_component(‘PurchaseRank’, {'props': props}) }}
35. ⼊入⼝口⽂文件 app.jsx import ReactOnRails from 'react-on-rails'; import PurchaseRank from './components/PurchaseRank'; ReactOnRails.register({ PurchaseRank });
36. 编译 • 服务器器端需要单独的 webpack 配置⽂文件 • 服务器器必须安装 nodejs
38. 谢谢 ??????????????????