集成React.js到Symfony
2020-02-27 314浏览
- 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
- 25.
- 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
- 37.资源 官⽹网https://facebook.github.io/react/官⽹网中⽂文版http://reactjs.cn/react/index.html阮阮⼀一峰的博客http://www.ruanyifeng.com/blog/2015/03/react.htmlwebpack集成https://blog.madewithlove.be/post/webpack-your-bags/webpack官⽹网https://webpack.github.io/Babelhttps://babeljs.io/React 项⽬目模板http://reactbolierplate.com/
- 38.谢谢 ??????????????????