144、React实现电影列表页面

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(, document.getElementById('app'))

 

4、index.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 
            

                {/* 这是头部区 */}
                

                    

                    
                        
                            首页 
                        
                        
                            
                                电影
                            
                        
                        
                            
                                关于
                            
                        
                    
                

                {/* 这是中间内容区 */}
                
                    
                    
                    
                

                {/* 这是底部区 */}
                

                    Ant Design ©2018 Created by Ant UED
                
            
        
    }


}