144、React实现电影列表页面

最新推荐文章于 2023-06-28 15:48:37 发布

置顶香港胖仔

最新推荐文章于 2023-06-28 15:48:37 发布

阅读量1.2k

点赞数 2

分类专栏：前端React

本文链接：https://blog.csdn.net/u012416045/article/details/107142331

版权

前端React 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

1、首先来看React实现电影列表的效果图是什么样子的

2、下一步来看一下项目的结构如何:

根目录下面有src文件夹

src文件夹下

components文件夹存放React组件的代码文件

css 文件夹下面存放样式表

还有

App.jsx 为主组件，所以需要放在最外层

index.html 为html页面，为的是引入main.js文件，

main.js 文件为了使用主组件App.jsx，React项目js的入口文件

3、下面我们看一下main.js文件里，的内容，内容很简单就是为了引入App.jsx的React虚拟DOM组件

//是项目的JS打包入口文件
import React from 'react'
import ReactDOM from 'react-dom'

//导入项目的根组件

import App from './App.jsx'


ReactDOM.render(<App></App>, document.getElementById('app'))

4、index.html文件用来作为容器来乘放页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <script src="../dist/main.js"></script> -->
    <script src="/main.js"></script>
</head>

<body>
    <!--创建一个容器，将来 渲染的虚拟DOM,会放到容器内显示-->
    <div id="app" style="height: 100%;"></div>
</body>



</html>

5、下面是主页App.jsx文件

因为电影列表页面的UI和主页组件使用的是蚂蚁金服的Ant Design UI框架

所以在App.jsx文件中，

1、导入的Layout，Menu 等组件都是来自antd 这个库

2、导入从'react-router-dom' 库中导入路由组件

3、导入模块化的样式

4、导入需要路由过去的相关组件页面

5、设置页眉页脚，并且设置相应的路由规则

//这是项目的根组件

import React from 'react'

// 导入路由组件
import { HashRouter, Route, Link } from 'react-router-dom'

// 导入需要的ant 组件
import { Layout, Menu } from 'antd';

const { Header, Content, Footer } = Layout;

//导入模块化的样式
import styles from './css/app.scss'

//导入路由相关的组件页面
import HomeContainer from './components/home/HomeContainer.jsx'
import MovieContainer from './components/movie/MovieContainer.jsx'
import AboutContainer from './components/about/AboutContainer.jsx'

export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }

    componentWillMount() {
        console.log(window.location.hash.split('/'))

    }

    render() {
        return <HashRouter>
            <Layout className="layout" style={{ height: '100%' }}>

                {/* 这是头部区 */}
                <Header>
                    <div className="styles.logo" />
                    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={[window.location.hash.split('/')[1]]}>
                        <Menu.Item key="1">
                            <Link to='/home'>首页 </Link>
                        </Menu.Item>
                        <Menu.Item key="2">
                            <Link to='/movie/in_theaters/1'>
                                电影
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="3">
                            <Link to='/about'>
                                关于
                            </Link>
                        </Menu.Item>
                    </Menu>
                </Header>

                {/* 这是中间内容区 */}
                <Content style={{ backgroundColor: '#fff' }}>
                    <Route path="/home" component={HomeContainer}></Route>
                    <Route path="/movie" component={MovieContainer}></Route>
                    <Route path="/about" component={AboutContainer}></Route>
                </Content>

                {/* 这是底部区 */}
                <Footer style={{ textAlign: 'center' }}>
                    Ant Design ©2018 Created by Ant UED
                </Footer>
            </Layout>
        </HashRouter>
    }


}

香港胖仔

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
144、React实现电影列表页面

1、首先来看React实现电影列表的效果图是什么样子的2、下一步来看一下项目的结构如何:根目录下面有src文件夹src文件夹下components文件夹存放React组件的代码文件css 文件夹下面存放样式表还有App.jsx 为主组件，所以需要放在最外层index.html 为html页面，为的是引入main.js文件，main.js 文件为了使用主组件App.jsx，React项目js的入口文件...
复制链接

扫一扫