笔记仓库:https://github.com/nnngu/LearningNotes 上一篇文章用爬虫自动下载了一些图片,这一篇就用这些图片做一个音乐相册吧! 效果预览 点击图片,切换到背面: 演示地址 演示地址:https://nnngu.github.io/MusicPhoto/ 环境搭建 1.安装 npm,安装成功后,在终端输入 npm -v 可以查看它的版本. 2.安装generator-react-webpack,使用如下命令: npm install -g generator-re…

上一篇我们完成了音乐相册里面的播放图片的功能,这一篇主要完成的是音乐相册里面的音乐播放器功能.最终让我们基于 React 的音乐相册图文并茂.有声有色. 我们主要从以下几个部分来展开: 数据准备 进度条功能 创建播放器组件 最终效果 数据准备 在src/data目录添加音乐数据文件:musicDatas.js 代码如下: export const MUSIC_LIST = [ { id: 1, title: '童话镇', artist: '陈一发儿', file: 'https://raw.gi…

前言:拖了这么久,小菜鸟终于开始正式应用react,和es6来开发项目了.之前超喜欢同学的一个博客风格,这里贴一下地址:https://iwenku.net/,PC端是他很久之前做的,最近他重新做了一下移动端的.看完之后,我内心也勾勒出了一个自己的博客,所以开始正式搭建自己的博客作为项目练手吧. 关于react的虚拟DOM: 在前端开发的过程中,我们经常会做的一件事就是将变化的数据实时更新到UI上,这时就需要对DOM进行更新和重新渲染,而频繁的DOM操作通常是性能瓶颈产生的原因之一,有时候我们会…

在开发项目的时候,我们为了提高速度和质量,往往不是白手起家,需要基于一定的基础上进行项目的快速开发,这样可以利用整个框架的生态基础模块,以及成熟统一的开发方式,可以极大提高我们开发的效率.本篇随笔就是介绍基于Winform开发框架或混合框架基础上进行项目的快速开发,这个主题在之前的一些随笔有一定的介绍,但是觉得都不是很全面.完整,因此本篇随笔通过一些简单的例子以及一个具体的项目案例来进行全流程的开发出来,希望读者对基于我们开发框架的开发模式有一个更深入的了解. 1.基于框架开发简单界面的过程 由…

最近在学习react,快速搭建一个基于react的项目 1.创建一个放项目文件夹,用编辑器打开 2.打开集成终端输入命令: npm install -g create-react-app 3. create-react-app my-app 4.进入my-app :cd my-app 5.启动命令:npm start 6.打包:npm run build…

react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地图 SDK(通过创建 Script 标签的形式加载),包括第三方 SDK. 使用 Typescript 编写,集成高德地图 SDK @type 声明文件(包括中文注释). ⚛️ 支持 React Hook 新增特性(需要 React 16.8+). 不依赖任何第三方组件. 安装 不依赖 uiw 组件…

一.环境准备 ①node ②npm 二.开始搭建 ①使用npm安装create-react-app工具,在cmd命令行中输入: npm install -g create-react-app ②使用命令创建新的react项目,在cmd命令行中输入: create-react-app first-react-app ③会有创建好的项目文件夹,接着在cmd命令行中输入: npm init  (然后一直回车) npm install --save react react-dom (在该目录下导入rea…

自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些却不太适合,或者我们就是想要去尝试新的框架.比如最近我就尝试着使用了webpack+react+es6的方式开发项目,感觉很不错,然后很多项目都用了这种方式.所以为了不需要每次开发的时候都从头开始新建文件,就想着能不能弄个工具,使用命令能够快速的生成这样一套跑的通的项目模版,正好,有个工具叫yeom…

文章提纲目录 1.前端基于react,后端基于.net core2.0的开发之路(1) 介绍 2.前端基于react,后端基于.net core2.0的开发之路(2) 开发环境的配置,注意事项,后端数据初始化 3.前端基于react,后端基于.net core2.0的开发之路(3) 各个技术栈配置和说明 4.前端基于react,后端基于.net core2.0的开发之路(4) 前端路由,模型,服务的说明 5.前端基于react,后端基于.net core2.0的开发之路(5) 配置node层,s…

最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后将打包文件缩小到665kb,效果十分显著,网上有许多解决办法,大多对新手都不是很友好,涉及到的知识点十分的多,导致一步一坑,虽然这边文章不是最好的,但通过如下的调试缩小其打包文件. 项目github连接 :https://github.com/2016Messi/webpack3-react-rou…

原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的angular 1 的 49000+:redux 的 star 数也要接近 20000,可见大家对其的热情程度,究竟是什么魔力让大家为之疯狂呢?让我们上车,亲自体验一波试试~~本文章偏向于讲解redux流程…

一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? 为了减少秒关文章的冲动.我得把好话放在前头.做了这个项目,我学会了....(对于我). Webpack的配置以及各个参数概念都有一定的熟悉. React+Webpack+Express的配合使用 熟悉React的JSX语法.生命周期等的熟悉 Socket.io(入门) localStorage(入…

代码地址如下:http://www.demodashi.com/demo/12052.html MyReader 绿色版电子书阅读器 在线地址:http://myreader.linxins.com 手机扫码体验: 目录索引 store的设计与实现 阅读器 书架 effects 的逻辑处理 获取书源 章节列表 & 章节内容 换源实现 切换章节 离线下载 本地存储 redux-persist UI部分 首页 阅读器 换肤 删除实现 优化 移动端优化 CSS fetch-polyfill fastc…

代码地址如下:http://www.demodashi.com/demo/12252.html 本文适合对象 有过一定开发经验的初级前端工程师: 有过完整项目的开发经验,不论大小: 对node有所了解,关注前端发展,了解所谓"大前端"的概念: 了解React: 了解ES6: 想要初步了解一下大型网站的前端结构的人. 关于demo 本demo是我平时开发React项目时候自己配置的一套开发环境,由于每次写react的demo的时候都需要配置webpack,十分繁琐,因此前段时间我按照自己…

引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Native更是扩大了前端的边界. 说道React,那就不得不说一下Webpack凭借它异步加载和可分离打包等优秀的特性,走在取代Grunt和Gulp的路上.而面向未来的ES6,更是支持模块化处理. 下面我就分享一下关于Webpack+React+ES6的环境搭建(通用)[附加发布版] 准备工作 首先需要准…

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/NlOn7er0ixY1HO40dq5Gag作者:孔垂亮 目录 一.背景二.Monorepo vs Multirepo三.Lerna1.Lerna 是什么2.开始使用(1)安装(2)项目构建四.Lerna的最佳实践1.优雅的提交2.自动生成日志3.编译.压缩.调试五.结语六.参考文献 对于维护过多个package的同学来说,都会遇到一个选择题,这些package是放在一个仓库里维护还是放在多个仓库里…

本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实现后端逻辑,而是使用了wilddog充当后端.具体关于wilddog的介绍,戳这里. 目标:我期望的页面长这样,一个简单的消息列表,下面有个输入框和提交按钮,任何人可以在上面说话,并可以看到别人说的话,就这么简单. 1. React和Redux React这么火,我就不多说了.Redux是一个类fl…

# 部署React+webpack工程的步骤ps:以Mac os系统做开发环境.因为npm现在使用灰常的慢,所以我使用淘宝境像cnpm. 1,准备工作: 先确保存已经安装了node.js: 2,文件部署: (1),在终端中找到react-build项目的目录,键入cnpm init初始化一个package.json文件,该文件是存放接下来项目用的一些模块, 在终端中根据提交一步步的输入,或者可以直接新建一个package.json文件,文件内容大概如下: { "name": "…

2014年基于Raspberry Pi的5大项目   Raspberry Pi(即树莓派)是一款基于Linux系统(Debian.ArchLinux)的单板机计算机,它只有一张信用卡大小,可用于电子表格制作.文字处理.游戏.高清视频播放等.它由英国的Raspberry Pi基金会开发,其目的是以低价硬件和自由软件刺激学校的基本的计算机科学教育.它搭载了ARM架构处理器,其运算性能和智能手机相仿.在接口方面,Raspberry Pi提供了USB接口.快速以太网接口.SD卡扩展接口以及HDMI高清视…

react是目前非常热门的前端框架,提倡组件化开发.所谓的组件,简单理解,就是一个独立的页面部件(包括页面模版,样式,逻辑等),它是一个独立的整体. webpack,是一个模块打包工具,其主要功能,就是将浏览器端无法识别的代码,通过各种loader和plugin,生成浏览器可用的代码.比如,我们可以在浏览器端使用ES2015和JSX编码的文件. 在使用react进行组件化开发之前,我们首先需要配置一个我们可以使用的开发环境,下面,我们将一步步讲解,配置一个基本的开发环境.其中安装的文件都是当前最…

前言 在这个前端技术爆炸的时代,不自己写套开源框架出门都不好意思跟别人说自己搞前端.去年年初接触的react,16年7月份在github开源了一套针对react.redux探索的项目,近期和伙伴们一起重构了这个项目,等待大伙拍砖... 框架介绍 mk框架 = monkey king框架 = 齐天大圣框架 基础技术栈:react.redux.immutable.antd.webpack.nodejs.hapi.sequelize.node-zookeeper-dubb等 框架核心思想:js全栈.应…

上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 我们先搭建一下vue 的开发环境,根据我的一篇随笔<Vue开发环境搭建及热更新>,我们一步步搭建开发环境,project名为ES6-demo. 在之前我发表的一篇随笔< 理解最基本的Vue项目>中,说到了在放置组件和入口文件的src文件夹中,main.js文件就是入口文件,App.v…

在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),但可以看到如果我们通过最基本的方式来进行通信,一旦需要管理的状态多了,代码就会变得十分臃肿和庞大.对所有状态的管理便会显得力不从心,因此,vuex出现了,他就是帮助我们把公用的状态全抽出来放在vuex的容器中,然后根据一定的规则来进行管理,我们赶紧来用一下吧,想要掌握vuex的…

转载:http://blog.csdn.net/haozhenming/article/details/72772787 本文目录: 一.React Native 已经成为了移动前端技术的趋势 二.基于React Native 进行移动平台研发过程中的一些思考 三.基于React Native 进行移动平台研发过程中的一些实践 四.小结 一.React Native 已经成为了 移动前端技术的趋势 从2014年年底,Facebook计划开源React Native 的时候,我就已经开始关注TA了…

该项目在http://www.lcode.org/study-react-native-opensource-two/上发现 更有意思的发现这个网站https://juejin.im/是采用vue.js开发的. 上边这个开源的react native代码是一个基于React Native和MobX实现的美食类App. 同时支持ios&android,代码下载地址:https://github.com/ljunb/react-native-iShiWuPai 很兴奋,就调测安装一把 结果: 运行起…

React Native是基于React js设计的. 参考:<React 入门实例教程> React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了. 由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. 这个项目…

在react&webpack项目中需要引入图片,但是webpack使用的模块化的思想,如果不进行任何配置,而直接在jsx或者是css中使用相对路径来使用就会出现问题,在webpack中提供了url可以很好的解决这个问题.在stackoverflow上对此问题也进行了详细的描述. npm install url-loader --save-dev 通过安装url-loader我们就可以在react&webpack项目中成功处理相对路径的问题. jsx中使用如下: import React f…

代码地址如下:http://www.demodashi.com/demo/11944.html 天道酬勤 前言 作为一名iOS开发者,每当使用APP的时候,总难免会情不自禁的去想想,这个怎么做的?该怎么实现呢?很久之前,就想写一个关于音乐方面的播放器,最近刚好得空,就趁机摸索着写了下,写的不好,还望多多指教. 前提准备 为了能够有明确的思路来做这个demo,我下载了QQ音乐和网易云音乐,然后分别对比,最终选择了QQ音乐来参照,先是获取了其中的所有资源文件,在这之后就是研究使用技术,这里我选择了F…

代码地址如下:http://www.demodashi.com/demo/11818.html 贪吃蛇小游戏(第二版) 一年半前层用react写过贪吃蛇小游戏https://github.com/caohuilin/Snake_React 那时刚刚学习React的我兴奋的尝试了很久 近些日子比较清闲,想着用学到的东西重新写个版本,于是V2就来了https://github.com/caohuilin/Snake_React_v2 游戏规则 贪吃蛇大家都不陌生了,吃掉一个食物,蛇的身体会变长,食物…

上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接使用比较热门的一个基于 Vue.js 的移动端组件库,那就是MintUI. 使用 vue-cli 首先需要使用vue-cli,因为上一篇文章里已经说过如何安装,这里就不细说,跟之前一样.cmd里输入命令行. npm install -g vue-clivue init webpack project…