react js踩坑之路（一）

　　讲真如果让我选个主流的mvvm框架做项目，我会果断选择vue，写起来不要太方便哦。但是，pc端要兼容ie8这个坑货，所以pc端只好选用react了啦~移动端果断用vue咯

　　再来讲讲构建工具，还是基于webpack 和 gulp，然后将react和vue 分开打包相关配置如下

　webpack会依次将公用的打包到vendors.js 、react的打包到react中，vue相关的打包到vue中，最后剩下的部分打包到load.js中。

　　下面直接用react实现一个后台页面的container组件吧，这个组件主要有left.js（左侧栏），top.js（头部信息），以及content.js（页面具体内容）

　　废话不说直接上代码了

　　left.js

时间： 2024-10-06 22:50:53

react js踩坑之路（一）的相关文章

webpack踩坑之路 (2)——图片的路径与打包

webpack踩坑之路 (2)--图片的路径与打包刚开始用webpack的同学很容易掉进图片打包这个坑里,比如打包出来的图片地址不对或者有的图片并不能打包进我们的目标文件夹里(bundle).下面我们就来分析下在webpack项目中图片的应用场景. 在实际生产中有以下几种图片的引用方式: 1. HTML文件中img标签的src属性引用或者内嵌样式引用 <img src="photo.jpg" /> <div style="background:url(ph

踩坑之路_"var name = ' ';"_迷之BUG

情景介绍:最近写一个拖拽生成图表的工具,自己的思路每次mousedown的时候动态将this的name属性值赋值给全局中变量(自己手贱测试时直接将变量名命名为了'name',一大波bug还有30s到达战场.....),mouseup时更具当前的全局属性值判断生成的图表类型:就酱... 首先给大家贴个html布局,有图有真相,(虽然简单的要死)正常结果应该是:拖拽 '折线图' 右侧生成折线图,柱状图生成柱状图: 然后我帅气的用 var name = ''; 从此开启bug模式: js代码如下: 出

html2canvas的踩坑之路

html2canvas的踩坑之路前言早有耳闻这个html2canvas比较坑,但无奈于产品需求的压迫,必须实现html转图片的功能,自此走上了填坑之路,好在最后的效果还算令人满意,这才没有误了产品上线周期. html2canvas介绍 html2canvas的详细介绍可以点击这里查看,其实简单来说就是通过canvas将HTML生成的DOM节点绘制到画布上,再可以通过自己的需求转换成图片.所以官方文档也说了,最后生成的效果不是100%相同的,这一点大家要有心理准备,无论怎样,一点点小瑕疵是肯定

Java踩坑之路

陆陆续续学Java也快一年多了,从开始的一窍不通到现在的初窥门径,我努力过,迷茫过,痛过,乐过,反思过,沉淀过.趁着新年,我希望能把这些东西记下来,就当是我一路走来的脚印. 一.初识网站应用记得第一次接触Java,是写一个小网站,当时用servlet+tomcat做服务端,数据库是mysql.那时我对于网站应用的概念一片空白,之前接触的都是C++和MFC写桌面程序.我花了一周时间看完了<java servlet programming>这本书,然后我就开始写代码了.但是,真的当我写代码的时候

jQuery升级踩坑之路

1.使用了被废弃的jQuery.browser属性 jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9. 如果要全面支持 IE,并混合使用 jQuery 1.9 和 2.0, 官方的解决方案是: <!--[if lt IE 9]> <script src='jquer

React Native 爬坑之路

1.react 基础 (创建组件及在浏览器上渲染组件) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>  <script src="js/react.min.js" chars

webpack踩坑之路——构建基本的React+ES6项目

webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是现在很多潮流 programmer 的追求. 废话不多,下面就就看下如何从0搭起我们的构建工具. 安装全局安装webpack,如果安装后还是提示没有webpack commond,可以尝试通过超级管理员身份安装. $ npm install webpack -g $ sudo npm install webpack -g 或者在项目里进行安装 $ npm install webpack --sa

angular踩坑之路：初探webpack

之前费了一番力气安装好了angular开发环境,后面的几天都是在angular中文官网上看文档,照着英雄教程一步一步操作,熟悉了angular的一些基本特性,这部分没有遇到什么大问题,还比较顺利.这两天在看官方文档中的Webpack简介,想跟着文档做一遍,了解一下如何用Webpack打包angular项目,结果遇到了一些问题,因为是初学angular和Webpack的小白,这些问题一时难以解决,花费了不少时间,想在这里记录一下. 首先跟着文档将相关的文件都添加到项目中,目录是这样子的: 根据文档

opencv入门踩坑之路（一）

因为找了个实验室搬砖,所以我开始学opencv和pytorch了嘿嘿嘿,感觉记录踩过的坑会很有意思嘻嘻嘻首先是安装opencv,这个贼简单,我用的win10 直接命令行 pip install opencv-python,如果需要安装特定版本,可以pip install opencv-python==版本号,但是直接用默认安装最新版,它不香吗? 接下来测试一下是否成功版本号出来就说明成功啦接下来跑第一个demo 这个demo的作用是显示一张图片 from cv2 import cv2 a