React builds a new Web music App

In the previous section, create-React-app scaffolding was used to build the basic project skeleton. In this section, font ICONS and page main route construction required by the project are continued

Font icon making

Why use font ICONS?

ICONS zoom in and out without being stretched and remain sharp enough
The color can be set arbitrarily. If you use a normal image, the color of the image is already designed. If you want to change the color, you need to use a tool to modify the image

To make font images first we need SVG images. SVG images can be selected from the IconFont Ali Vector icon library. The author has downloaded the SVG images required for the project

With the help of a website called Iconmoon. Enter icomon. IO /app in the browser address

Click the Import Icons button at the top to bring up the selection dialog box and select the SVG image you just downloaded

Click on the open

Then select all the ICONS and click Generate Font

Go to the following page and click Download

Download the following compressed packages

The package contains the font image use demo, and generated font icon files and related styles. Create a new assets directory under your project’s SRC directory and a new stylus directory for styl files. Unzip the package and copy the style. CSS and Fonts folders into the stylus directory.

Make some changes to the file and style.css in the Fonts directory

Rename all files under fonts to icomusic and rename style.css to style.styl. Then open icomusic, remove the curly braces and semicolons inside and change them into the standard STYL syntax format, and replace all iconmoon inside with IComusic

font.styl

@font-face font-family: 'icomusic' src: url('fonts/icomusic.eot? nnepb1') src: url('fonts/icomusic.eot? nnepb1#iefix') format('embedded-opentype'), url('fonts/icomusic.ttf? nnepb1') format('truetype'), url('fonts/icomusic.woff? nnepb1') format('woff'), url('fonts/icomusic.svg? nnepb1#icomusic') format('svg') font-weight: normal font-style: normal [class^="icon-"], [class*=" icon-"] /* use ! important to prevent issues with browser extensions that change fonts */ font-family: 'icomusic' ! important speak: none font-style: normal font-weight: normal font-variant: normal text-transform: none line-height: 1 /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased -moz-osx-font-smoothing: grayscale .icon-back:before content: "\e900" .icon-delete:before content: "\e901" .icon-fe-music:before content: "\e902" .icon-list-play:before content: "\e903" .icon-music:before content: "\e904" .icon-next:before content: "\e905" .icon-pause:before content: "\e906" .icon-play:before content: "\e907" .icon-play-list:before content: "\e908" .icon-previous:before content: "\e909" .icon-search:before content: "\e90a" .icon-shuffle-play:before content: "\e90b" .icon-single-play:before content: "\e90c" .icon-user:before content: "\e90d"Copy the code

The modified file structure is as follows

Page Routing setup

To prepare

Make some changes to the project structure first

Delete app.test. js and logo.svg. Create a components directory under the SRC directory, place app.js and app.styl under the components directory, remove all the contents in app.styl, and then remove the contents under the div tag in the render function in app.js

App.js

//import React, { Component } from 'react'; import React from 'react'; //import logo from './logo.svg'; Delete line import './ app.styl '; class App extends React.Component { render() { return ( //<div className="App"> <div className="app"> //<header className="App-header"> // <img src={logo} className="App-logo" alt="logo" /> // <h1 className="App-title">Welcome to React</h1> //</header> //<p className="App-intro"> // To get started, edit <code>src/App.js</code> and save to reload. //</p> </div> ); } } export default App;Copy the code

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//import App from './App';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Copy the code

Modify the index.css file, set HTML, body, div#root to 100% width and height, and set the root font and font size on the body

index.css

html, body, #root {
  width: 100%;
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
Copy the code

Finally, add the reset.styl file in the stylus directory

reset.styl

/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video margin: 0 padding: 0 border: 0 vertical-align: baseline /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section display: block body line-height: 1 ol, ul list-style: none blockquote, q quotes: none blockquote:before, blockquote:after, q:before, q:after content: '' content: none table border-collapse: collapse border-spacing: 0Copy the code

The new directory structure is as follows

Set up the routing

Let’s take a look at the page structure first

Recommended page

list

The three pages are a Tab Tab mode with the Logo at the top and the view corresponding to the Tab in the middle. The Logo and Tab buttons are unchanged, so the middle is designed as a view interface of the route, with three tabs corresponding to three routes

Create a new IMGS folder under Assets to store images. There are three images, one of which is the head Logo image, and the other two will be used later

App.js

import React from 'react'; import logo from ".. /assets/imgs/logo.png" import '.. /assets/stylus/reset.styl' import './App.styl'; class App extends React.Component { render() { return ( <div className="app"> <header className="app-header"> <img src={logo} className="app-logo" alt="logo" /> <h1 className="app-title">Mango Music</h1> </header> <div ClassName ="music- TAB "> <div className="tab-item selected"> <span> Recommend </span> </div> <div className="tab-item"> < span > list < / span > < / div > < div className = "TAB - the item" > search < / span > < span > < / div > < / div > < / div >). } } export default App;Copy the code

App.styl

.app
  width: 100%
  height: 100%
  color: #DDDDDD
  background-color: #212121
  .app-header
    height: 55px
    line-height: 55px
    color: #FFD700
    text-align: center
    .app-logo
      width: 30px
      height: 25px
      margin-top: -5px
      vertical-align: middle
    .app-title
      display: inline-block
      height: 55px
      margin-left: 10px
      font-size: 18px
      font-weight: 300
  .music-tab
    display: flex
    height: 30px
    line-height: 30px
    color: #DDDDDD
    text-align: center
    .tab-item
      flex: 1
Copy the code

The three tabs use flex layout for adaptive screen width

Prepare recommendation page, ranking next page, search page three components. Under the components directory, create three directories: Recommend, ranking and Search to store recommendation, ranking and search page related components

Create recommend. Js and Recommend. Styl in the Recommend directory. Capitalize the initial name of the React convention component. The corresponding JS file name is capitalized as the component (not mandatory). The component corresponds to a style file, and the name is as easy to find as the component name

Recommend.js

import React from "react"
import "./recommend.styl"


class Recommend extends React.Component {
    render() {
        return (
            <div className="music-recommend">
                Recommend
            </div>
        );
    }
}

export default Recommend
Copy the code

The recommended. Styl content is temporarily empty

Also create a new ranking. Js, ranking. Styl, search.js, search.styl under ranking and Search

Ranking.js

import React from "react"
import "./ranking.styl"


class Ranking extends React.Component {
    render() {
        return (
            <div className="music-ranking">
                Ranking
            </div>
        );
    }
}

export default Ranking
Copy the code

Search.js

import React from "react"
import "./search.styl"


class Search extends React.Component {
    render() {
        return (
            <div className="music-search">
                Search
            </div>
        );
    }
}

export default Search
Copy the code

Write the routing

Back in app.js, import the routing-related components

import {BrowserRouter as Router, Route, Switch, Redirect, NavLink} from "react-router-dom"
Copy the code

Import the Recommend, Ranking, and Search components into the App component. The root of the App uses the Router package and a div wraps the Route component

import Recommend from "./recommend/Recommend"
import Ranking from "./ranking/Ranking"
import Search from "./search/Search"
Copy the code

<div className="music-view"> {/* Switch component used to select the nearest route, } <Switch> <Route path="/ Recommend "Component ={recommend} /> <Route path="/ranking" component={Ranking} /> <Route path="/search" component={Search} /> <Redirect from="/" to="/recommend" />  <Route component={Recommend} /> </Switch> </div>Copy the code

Add the following styles to app.styl to fill the remaining screen height

.music-view
    position: fixed
    top: 88px
    left: 0
    bottom: 52px
    width: 100%
Copy the code

Use the NavLink component to wrap the Tab with the route hop function

<div className="tab-item"> <NavLink to="/recommend" className="nav-link"> <span> </span> </NavLink> </div> <div ClassName ="tab-item"> <NavLink to="/ranking" className="nav-link"> <span> </span> </NavLink> </div> <div ClassName ="tab-item"> <NavLink to="/search" className="nav-link"> <span> </span> </NavLink> </div>Copy the code

Sets the NavLink component style

.nav-link, .link
  display: block
  color: inherit
  text-decoration: none
  &.active
    color: #FFD700
    border-bottom: 2px solid #FFD700
Copy the code

The final rendering of the NavList component is an A tag, which is embellished with the above style. The active style is automatically applied when the current NavLink component is active

The complete code for app.js and app.styl is shown below

App.js

import React from 'react'; import {BrowserRouter as Router, Route, Switch, Redirect, NavLink} from "react-router-dom" import Recommend from "./recommend/Recommend" import Ranking from "./ranking/Ranking" import Search from "./search/Search" import logo from ".. /assets/imgs/logo.png" import '.. /assets/stylus/reset.styl' import './App.styl'; class App extends React.Component { render() { return ( <Router> <div className="app"> <header className="app-header"> <img src={logo} className="app-logo" alt="logo" /> <h1 className="app-title">Mango Music</h1> </header> <div <div className="tab-item"> <NavLink to="/recommend" className="nav-link"> <span> </NavLink> <div > <div className="tab-item"> <NavLink to="/ranking" className="nav-link"> <span> </span> </NavLink> </div> <div className="tab-item"> <NavLink to="/search" className="nav-link"> <span> Search </span> </div> </div> <div className="music-view"> {/* Switch component used to select the nearest route, } <Switch> <Route path="/ Recommend "Component ={recommend} /> <Route path="/ranking" component={Ranking} /> <Route path="/search" component={Search} /> <Redirect from="/" to="/recommend" />  <Route component={Recommend} /> </Switch> </div> </div> </Router> ); } } export default App;Copy the code

app.styl

.app
  width: 100%
  height: 100%
  color: #DDDDDD
  background-color: #212121
  .app-header
    height: 55px
    line-height: 55px
    color: #FFD700
    text-align: center
    .app-logo
      width: 30px
      height: 25px
      margin-top: -5px
      vertical-align: middle
    .app-title
      display: inline-block
      height: 55px
      margin-left: 10px
      font-size: 18px
      font-weight: 300
  .music-tab
    display: flex
    height: 30px
    line-height: 30px
    color: #DDDDDD
    text-align: center
    .tab-item
      flex: 1
  .music-view
    position: fixed
    top: 88px
    left: 0
    bottom: 52px
    width: 100%

.nav-link, .link
  display: block
  color: inherit
  text-decoration: none
  &.active
    color: #FFD700
    border-bottom: 2px solid #FFD700
Copy the code

conclusion

In this chapter explains how to make font ICONS according to the page design basic routing structure

Full project address: github.com/dxx/mango-m…

This section is in the chapter2 branch

Font icon making

Page Routing setup

To prepare

Set up the routing

conclusion

Related Posts

Realize random number group method summary

[WebGL] millions of fluid particles

How to customize the El-Tree icon