react学习之路（1）——创建一个基于antd的React项目

最新推荐文章于 2024-07-10 01:10:32 发布

爱睡觉的西西

最新推荐文章于 2024-07-10 01:10:32 发布

阅读量424

点赞数

分类专栏： react WEB知识文章标签： react.js javascript

本文链接：https://blog.youkuaiyun.com/wxh777789/article/details/120348338

版权

本文介绍了如何使用IntelliJ作为开发工具，通过npm和yarn设置环境，创建一个React项目。在项目中，作者展示了如何启动本地服务器并访问localhost:3000查看页面。接着，详细讲解了在index.html中修改系统名称，引入Antd的CSS，并在App.js中遇到的关于Sider组件宽度的问题。这是一个React初学者的学习记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.环境配置

开发工具idea intelliJ

安装npm+yarn+node.js+react

2.创建项目

yarn  create react-app oaflowweb

cd oaflowweb

yarn add antd

yarn start

浏览器输入http://localhost:3000

3.修改代码，创建自己的页面

index.html

修改自己的系统名字，显示在浏览器标签上的文字

<title>基于antd的React项目</title>

App.css

增加antd的css引用

@import '~antd/dist/antd.css';

App.js

import React from 'react';
import logo from './logo.svg';
import {Layout,  Menu, Breadcrumb} from 'antd';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import