react入门 + Ant design的组件库

快速入门React并使用Ant Design构建组件

最新推荐文章于 2025-10-06 03:48:46 发布

原创

最新推荐文章于 2025-10-06 03:48:46 发布 · 383 阅读

0 ·

CC 4.0 BY-SA版权

本文记录了作者为了面试准备学习React的过程，从使用create-react-app搭建项目，到启动项目，再到引入Ant Design组件库创建主页。详细步骤包括全局安装create-react-app，创建项目，启动项目，以及如何添加和使用Ant Design组件。

因为最近面试都被面临问到是否会react框架，在此之前基本都是使用vue框架，所以在此记录
这里是需要用到的是create-react-app脚手架。因此，我们需要先通过npm去下载create-react-app脚手架，它可以帮助我们快速的去搭建react项目。
一、安装create-react-app

npm install -g create-react-app //全局安装

二、创建项目

注意创建项目时没用npm而是npx ， my-app是项目名称
npx create-react-app my-app

三、启动项目

cd my-app 进入到你新创建的项目路径下
npm start 项目启动并在本地创建一个3000的端口号服务

在这里插入图片描述
引入Ant design的组件库:

下载组件 npm add antd或者yarn add antd

创建主页
在src中创建一个文件夹，名为views，在views文件夹下面创建一个index.js和一个index.css文件
js代码如下：

import {
   
    Layout, Menu, Breadcrumb, Icon } from 'antd';
import React, {
   
    Component } from 'react';
import 'antd/dist/antd.css';
import logo from '../logo.svg';
import './index.css'
const {
   
    Header, Content, Footer, Sider } = Layout;

class SiderDemo extends Component {
   
   
    state = {
   
   
        collapsed: false,
        mode: 'inline',
    };

    toggle = () => {
   
   
        this.setState({
   
   
            collapsed: !this.state.collapsed,
        });
    }

    render() {
   
   
        return (
            <Layout>
                <Sider
                    trigger={
   
   null}
                    collapsible
                    collapsed={
   
   this</

最低0.47元/天解锁文章