react制作豆瓣电影详细过程（一）

效果图：（ps:不知道为什么有的图片显示不出来，但是链接都是对的）
react制作豆瓣电影详细过程（一）
1.建立react项目：

create-react-app douban
cd douban
npm start

2.页面用了蚂蚁金服的antd模板，所以先下载antd

npm install antd --save

3.创建三个文件，分别是movie.jsx,about.jsx,home,jsx,重点讲解movie这个页面里的相对应的页面。首先在需要在app.jsx里导入前面三个文件的组件名和antd的layout布局： react制作豆瓣电影详细过程（一）
一定要引入antd css样式,不然无法显示效果，在下面的代码里加上 import ‘antd/dist/antd.css’

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.做成自己想要的效果后，因为要进行页面跳转等，所以导入react-router-dom

npm install react-router-dom

下载完成后导入

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

Route和Link在中使用，HashRouter在整个网站中仅需使用一次，Route是路由规则，Link 是跳转路径
app.jsx主要代码为

 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 :要跳转的路径 */}
                        <Link to='/home'>首页
                        </Link >
                    </Menu.Item>
                    <Menu.Item key="movie">
                        <Link to='/movie/in_theaters/1'> 电影
                        </Link >
                    </Menu.Item>
                    <Menu.Item key="about">
                        <Link to='/about'>关于</Link>
                    </Menu.Item>
                </Menu>
                </Header>
                <Content style={{ background: '#fff' }}>
                {/* 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]]}这句代码主要是为了刷新后依然在本来正在看的页面