Note warehouse: github.com/nnngu/Learn…

In my last post, I automatically downloaded some pictures using crawlers. In this post, I will make a music album with these pictures.

Results the preview

Click on the image to switch to the back:

Demo address

Demo address: nnngu. Making. IO/MusicPhoto /

Environment set up

1. Install NPM. After the installation is successful, enter NPM -v on the terminal to view its version.

To install generator-react-webpack, run the following command:

npm install -g generator-react-webpack
Copy the code

After the installation is complete, type NPM list –depth= 0-global to view the version.

3. Create the project, open the directory where you want to store your code, and type yo React-webpack MusicPhoto

4. After creation, the project directory is as follows:

A few things to note:

  • (1) The CFG directory is the directory where the configuration file resides
    • Focus on the defaults.js file in the CFG directory
  • ② The source code for the SRC project is mainly in here
  • ③ Package. json is used to manage and configure dependent modules

Add the Autoprefixer-Loader module

Autoprefixer-loader is a module used to process CSS.

npm install autoprefixer-loader --save-dev
Copy the code

Then open defaults.js in the CFG directory and add the following configuration information:

Add the jSON-loader module

Json-loader is a module used to process JSON.

npm install json-loader --save-dev
Copy the code

Then open defaults.js in the CFG directory and add the following configuration information:

Add images

1. Add the images directory and some images to the SRC directory as shown below:

2. Add imageDatas.json as shown below:

For the imageDatas.json code, please refer to the project source code.

SRC /components/ main.js imagedatas. json

// Get the json data for the image
var imagesData = require('.. /data/imageDatas.json');
Copy the code

4. Generate the IMAGE URL according to the file name of the image.

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);
Copy the code

Configure the font

Open defaults.js in the CFG directory and add the following configuration information:

Component binding

Key code in SRC /index.html:

Key code in SRC /index.js:

Code logic

The Main code logic is in main.js and the Main layout style is in app.scss. The diagram below:

Specific code please refer to the project source code github.com/nnngu/Music…

Publish to Github Pages

CFG /defaults.js to publicPath: ‘./assets/’.

Package and use the NPM run dist directive. After packing, you can see the following directory:

3. Push the packaged directory to the GH-Pages branch of GitHub using the following command:

git subtree push --prefix=dist origin gh-pages
Copy the code

4. Enable GitHub Pages in the GitHub repository and select the GH-Pages branch.

👇👇👇 The next article will summarize the process of completing the music player. 👇 👇 👇

React + Webpack music Album (part 2)