集成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.谢谢 ??????????????????