自学react搭建项目--踩坑

1.搭建一个react项目

cnpm/npm install -g create-react-app
create-react-app demp-react
cd demp-react
yarn start

2.安装Ant Design UI框架的依赖

yarn add antd
yarn start

此时还是正常运行的

image.png

3.安装路由配置 想模拟个项目练手

cnpm/npm install -save react-router-dom
yarn start

就报错了 运行不起来了

image.png

去问了下度娘才知道，有时候安装的过程中一些包会被删掉。我们需要将node_modules删掉重新下载下就好啦~~

4.配置路由
router/index.js

import React, {Component} from 'react';
import {HashRouter,Switch,Route} from "react-router-dom";//引入routerdom Redirect
import home from '../pages/home/home'; // 导入的组件

export default class Router extends Component {
    render() {
        return (
            <HashRouter>
                <Switch>
                    <Route path="/" exact component={home}/>
                    <Route path="/home" exact component={home}/>
                </Switch>
            </HashRouter>
        );
    }
}

index.js 添加

import Route from './router/';
const render = Component => {
  ReactDOM.render(
    <Component />,
    document.getElementById('root'));
};
render(Route)

在组件中引用

import React, { Component } from 'react'

class Home extends Component{
    state = {
        name: 'xiaoxiao'
    };
    render() {
        return (
            <div className="home-container">
                <h1>{this.state.name}</h1>
            </div>
        )
    }
}
export default Home

okk~~ 运行成功！！

image.png

5.引入react常用的ui框架 试写组件

import React, { Component } from 'react'
import { Layout, Menu, Breadcrumb } from 'antd'
import './home.css'
const { Header, Content } = Layout

class Home extends Component{
    state = {
        name: 'xiaoxiao'
    };
    render() {
        return (
            <Layout className="home-container">
                <Header className="header">
                    <div className="logo" />
                        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
                            <Menu.Item key="1">首页</Menu.Item>
                            <Menu.Item key="2">智能刷题</Menu.Item>
                            <Menu.Item key="3">直播课程</Menu.Item>
                            <Menu.Item key="4">模考人赛</Menu.Item>
                            <Menu.Item key="5">面授课表</Menu.Item>
                            <Menu.Item key="6">热点时评</Menu.Item>
                        </Menu>
                </Header>
                <Layout>
                    <Layout style={{ padding: '0 24px 24px' }}>
                        <Breadcrumb style={{ margin: '16px 0' }}>
                            <Breadcrumb.Item>Home</Breadcrumb.Item>
                            <Breadcrumb.Item>List</Breadcrumb.Item>
                            <Breadcrumb.Item>App</Breadcrumb.Item>
                        </Breadcrumb>
                        <Content
                            className="site-layout-background"
                            style={{
                                padding: 24,
                                margin: 0,
                                minHeight: 280,
                            }}
                            >
                            Content
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        )
    }
}

export default Home

image.png

okk~ 目前自学之路到这里就先告一段落啦！！
因为我又有新的需求来啦，下次有时间自学再更哈~~