返回
初探React TS + Antd + Axios 项目创建全解析
前端
2023-11-07 07:33:07
前言
随着前端技术的发展，React已成为构建前端应用程序的强大工具，它的组件化、响应式特性大大简化了复杂界面的开发。
与此同时，TypeScript 作为JavaScript的超集，凭借其静态类型检查和面向对象编程能力，让代码更加健壮可靠。
Ant Design 作为一套高质量的React UI组件库，集颜值与性能于一身。
Axios作为一款轻量级、易用的HTTP请求库，能够便捷地进行数据请求与处理。
综合运用这些技术，可以创建高效、美观的应用程序。
正文
一、使用脚手架进行项目的创建
- 安装必要的依赖
npm install create-react-app
- 创建项目
create-react-app my-project --template @typescipt
这条命令将使用TypeScript模板创建一个名为
my-project的新项目。
- 进入项目目录
cd my-project
- 启动项目
npm start
浏览器将自动打开，显示项目主页。
二、项目启动查看效果
在浏览器中输入localhost:3000，即可看到项目的主页。一个简单的“Hello World”字样会出现在屏幕上。
三、添加必要模块
- 安装Ant Design
npm install antd
- 安装Axios
npm install axios
- 在
src/App.tsx中导入Ant Design和Axios
import { Button } from 'antd';
import axios from 'axios';
- 在
src/App.tsx中使用Ant Design和Axios
const App = () => {
const onClick = () => {
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => {
console.log(response.data);
});
};
return (
<div className="App">
<Button type="primary" onClick={onClick}>Click me!</Button>
</div>
);
};
export default App;
现在，点击“Click me!”按钮，就可以从API中获取数据并打印到控制台。
四、配置目录结构
为了保持代码整洁和可维护性，可以对目录结构进行配置。
- 创建
src/components目录
mkdir src/components
这个目录将用于存放组件。
- 将
App.tsx移动到src/components目录
mv src/App.tsx src/components/App.tsx
- 在
src/index.tsx中导入App组件
import App from './components/App';
- 在
src/index.tsx中渲染App组件
ReactDOM.render(<App />, document.getElementById('root'));
现在，项目结构更加清晰，便于管理。
五、配置Ant Design的国际化设置
为了支持多语言，可以配置Ant Design的国际化设置。
- 安装
antd-localization
npm install antd-localization
- 在
src/index.tsx中导入antd-localization
import { LocaleProvider } from 'antd-localization';
import enUS from 'antd-localization/en_US';
- 在
src/index.tsx中包裹App组件
ReactDOM.render(
<LocaleProvider locale={enUS}>
<App />
</LocaleProvider>,
document.getElementById('root')
);
现在，Ant Design组件将使用英语显示。
结语
本文详细介绍了如何从零开始创建使用React、TypeScript、Ant Design和Axios的项目，并对目录结构和国际化设置进行了配置。希望这篇文章对您有所帮助。
如果您想了解更多关于React、TypeScript、Ant Design和Axios的信息，可以参考以下资源：
