Detailed process of making Douban film by react

Renderings: (ps: I don't know why some pictures can't be displayed, but the links are all right)

1. Establish react project:

create-react-app douban
cd douban
npm start

2. The page uses the antd template of ant gold, so download the antd first

npm install antd --save

3. Create three files: movie.jsx,about.jsx,home,jsx. Focus on the corresponding page of movie. First, you need to import the component names of the first three files and the layout layout of antd in app.jsx:
Make sure to introduce the antd css style, otherwise the effect cannot be displayed. Add import 'antd/dist/antd.css' in the following code

import Movie from './movie.jsx'
import About from './about.jsx'
import Home from  './home.jsx'
import {
  Layout, Menu, Breadcrumb, Icon,
} from 'antd';

const { SubMenu } = Menu;
const {
  Header, Content, Footer, Sider,
} = Layout;

4. After you make the desired effect, because you need to perform page Jump, import react router dom

npm install react-router-dom

Import after download

import {HashRouter,Link,Route} from 'react-router-dom'

Route and Link are used in. HashRouter only needs to be used once in the whole website. Route is the routing rule and Link is the jump path
The main code of app.jsx is

 render() {
        return <HashRouter>
           <Layout className="layout" style={{height:"100%"}}>
                <Header>
                
                <Menu
                    theme="dark"
                    mode="horizontal"
                    defaultSelectedKeys={[window.location.hash.split('/')[1]]}
                    style={{ lineHeight: '64px' }}
                >
                    <Menu.Item key="home">
                    {/* to :Path to jump */}
                        <Link to='/home'>home page
                        </Link >
                    </Menu.Item>
                    <Menu.Item key="movie">
                        <Link to='/movie/in_theaters/1'> Film
                        </Link >
                    </Menu.Item>
                    <Menu.Item key="about">
                        <Link to='/about'>about</Link>
                    </Menu.Item>
                </Menu>
                </Header>
                <Content style={{ background: '#fff' }}>
                {/* path: Route matching path */}
                <Route path="/home" component={Home}></Route>
                <Route path="/movie" component={Movie}></Route>
                <Route path="/about" component={About}></Route>
               
                </Content>
                <Footer style={{ textAlign: 'center' }}>
                   
                </Footer>
            </Layout>
        </HashRouter>
    }

defaultSelectedKeys={[window.location.hash.split('/') [1]]} This code is mainly used to refresh the page you are looking at

Tags: React npm

Posted on Wed, 04 Dec 2019 03:58:00 -0500 by 00Sven