笔记仓库:https://github.com/nnngu/LearningNotes


上一篇文章用爬虫自动下载了一些图片,这一篇就用这些图片做一个音乐相册吧!

效果预览

点击图片,切换到背面:

演示地址

演示地址:https://nnngu.github.io/MusicPhoto/

环境搭建

1、安装 npm,安装成功后,在终端输入 npm -v 可以查看它的版本。

2、安装generator-react-webpack,使用如下命令:

npm install -g generator-react-webpack

安装完成之后,输入npm list --depth=0 -global 可以查看版本。

3、创建项目,打开你用来存放代码的目录,然后输入:yo react-webpack MusicPhoto

4、创建完成,项目的目录如下图:

需要注意的几个地方:

  • ① cfg 目录是配置文件所在的目录

    • 重点关注 cfg 目录里面的 defaults.js 文件
  • ② src 项目的源代码主要在这里面
  • ③ package.json 用来管理和配置依赖模块

添加 autoprefixer-loader 模块

autoprefixer-loader 是用来处理 css 的模块,安装命令:

npm install autoprefixer-loader --save-dev

然后打开 cfg 目录中的 defaults.js 添加如下配置信息:

添加 json-loader 模块

json-loader 是用来处理 json 的模块,安装命令:

npm install json-loader --save-dev

然后打开 cfg 目录中的 defaults.js 添加如下配置信息:

添加图片

1、在 src 目录下添加 images 目录和一些图片,如下图:(图片尺寸全部是 260 * 260)

2、添加 imageDatas.json 如下图:

imageDatas.json 里面的代码请参照项目的源代码。

3、在src/components/Main.js中引入imageDatas.json 代码如下:

// 获取图片的 json 数据
var imagesData = require('../data/imageDatas.json');

4、根据图片的文件名,生成图片URL。

src/components/Main.js

/**
* @imagesDataArray {Array}
* @return {Array}
*/
imagesData = (function getImageURL(imagesDataArray) {
for (var i = 0, j = imagesDataArray.length; i < j; i++) {
var singleImageData = imagesDataArray[i]; singleImageData.imageURL = require('../images/' + singleImageData.fileName); imagesDataArray[i] = singleImageData;
}
return imagesDataArray;
})(imagesData);

配置字体

打开 cfg 目录中的 defaults.js 添加如下配置信息:

组件的绑定

src/index.html 中的关键代码:

src/index.js 中的关键代码:

代码逻辑

主要的代码逻辑在 Main.js中,主要的布局样式在 App.scss中。如下图:

具体代码请参照项目的源代码 https://github.com/nnngu/MusicPhoto

发布到Github Pages

1、修改cfg/defaults.js中的publicPath,改为publicPath: './assets/', 如下图:

2、打包,使用npm run dist指令。打包完成可以看到如下目录:

3、把打包好的目录 push 到 GitHub 的 gh-pages 分支,使用如下命令:

git subtree push --prefix=dist origin gh-pages

4、在GitHub 对应的仓库里面开启 Github Pages 功能,并选择 gh-pages分支即可。

基于 React + Webpack 的音乐相册项目(上)的更多相关文章

  1. 基于 React + Webpack 的音乐相册项目(下)

    上一篇我们完成了音乐相册里面的播放图片的功能,这一篇主要完成的是音乐相册里面的音乐播放器功能.最终让我们基于 React 的音乐相册图文并茂.有声有色. 我们主要从以下几个部分来展开: 数据准备 进度 ...

  2. react+es6+webpack环境搭建以及项目入门

    前言:拖了这么久,小菜鸟终于开始正式应用react,和es6来开发项目了.之前超喜欢同学的一个博客风格,这里贴一下地址:https://iwenku.net/,PC端是他很久之前做的,最近他重新做了一 ...

  3. 如何基于Winform开发框架或混合框架基础上进行项目的快速开发

    在开发项目的时候,我们为了提高速度和质量,往往不是白手起家,需要基于一定的基础上进行项目的快速开发,这样可以利用整个框架的生态基础模块,以及成熟统一的开发方式,可以极大提高我们开发的效率.本篇随笔就是 ...

  4. 快速搭建一个基于react的项目

    最近在学习react,快速搭建一个基于react的项目 1.创建一个放项目文件夹,用编辑器打开 2.打开集成终端输入命令: npm install -g create-react-app 3. cre ...

  5. 基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中。

    react-amap 这是一个基于 React 封装的高德地图组件,帮助你轻松的接入地图到 React 项目中. 文档实例预览: Github Web | Gitee Web 特性 ️ 自动加载高德地 ...

  6. react+webpack搭建项目

    一.环境准备 ①node ②npm 二.开始搭建 ①使用npm安装create-react-app工具,在cmd命令行中输入: npm install -g create-react-app ②使用命 ...

  7. 利用yeoman快速搭建React+webpack+es6脚手架

    自从前后端开始分离之后,前端项目工程化也显得越来越重要了,之前写过一篇搭建基于Angular+Requirejs+Grunt的前端项目教程,有兴趣的可以点这里去看 但是有些项目可以使用这种方式,但有些 ...

  8. 前端基于react,后端基于.net core2.0的开发之路(1) 介绍

    文章提纲目录 1.前端基于react,后端基于.net core2.0的开发之路(1) 介绍 2.前端基于react,后端基于.net core2.0的开发之路(2) 开发环境的配置,注意事项,后端数 ...

  9. 成功解决react+webpack打包文件过大的问题

    最近在学习并使用webpack+react+antd写了一个小项目,也可以说是demo,待全部开发完成后发现webpack的打包文件足足有将近13.3MB,快吓死宝宝了,经过连续几天的学习,和调试最后 ...

随机推荐

  1. [51nod1329]路径游戏

    Snuke与Sothe两个人在玩一个游戏.游戏在一个2*N的网格中进行(2行N列),这个网格中的2N个格子不是黑色就是白色.定义,一条有效路径是指一个完全由白色格子构成的序列,这个序列的第一个网格元素 ...

  2. BZOJ 2219: 数论之神

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2219 N次剩余+CRT... 就是各种奇怪的分类讨论.. #include<cstrin ...

  3. Zigbee Class 直播公告2016-10-10

    周一我们将开始本期课程的首次直播, 详情如下: 场次 第一场 阶段 入门 开始时间 2016-10-10  19:00 结束时间 不定 斗鱼地址 douyu.com/zigbeeclass 内容 本期 ...

  4. 2. Event编写

    Event作用: 存储事件数据. IEventBase K:是Actor的StateId的类型,可以是long.可以是string,Ray一般使用OGuid生成的字符串作为主键. 编写Event继承I ...

  5. 解决spring定时任务执行2次和tomcat部署缓慢的问题

    spring定时任务执行2次 问题重现和解析 最近使用quartz定时任务框架,结果发现开发环境执行无任何问题,部署到服务器上后,发现同一时间任务执行了多次.经过搜索发现是服务器上tomcat的配置文 ...

  6. ThinkPHP3.2 实现Mysql数据库备份

    <?php header("Content-type:text/html;charset=utf-8"); //配置信息 $cfg_dbhost = 'localhost'; ...

  7. Linux虚拟主机通过FTP软件创建目录时提示550 Create Directory Operation Failed

    更新时间:2017-06-07 13:26:11   分享: 问题描述 通过FTP软件连接Linux虚拟主机,在尝试创建新目录时,服务器返回错误提示:550 Create Directory Oper ...

  8. OKMX6Q LTIB编译

    因为在16.04上编译有许多解决不了的错误,最后还是在飞凌的12.04虚拟机上编译的. 按照手册<OKMX6X-S2-LTIB编译手册-V1.1-2016-08-18>进行到第8步时,出现 ...

  9. Web前端学习(1):上网的过程与网页的本质

    "众里寻他千百度"--但是在信息化时代,我们只需要动动手指百度一下,google一下,便可以在网络上寻得我们想要查找的信息.我们或许都知道要如何在网上获得自己所需信息,但是上网的过 ...

  10. 分布式CAP原理

    根据维基百科定义[CAP] 根据定理,一个分布式系统最多只能满足其中两项, 不可能同时满则C-A-P三项 首先说一下对各项原则的理解 (1)一致性C: 单机环境下, 数据只有一份,所有的客户端访问的是 ...