React+TypeScript+Styled项目搭建指南：从零开始
2023-11-15 09:00:14
目录
- 使用Create-react-app
- CSS重置
- 配置SCSS
- 配置Styled-component
- 用React Router添加底部导航
- 引入SVG图标
- 创建Item组件
- ...
引言
React是一个强大的JavaScript库，用于构建交互式用户界面。TypeScript是对JavaScript的扩展，增加了类型系统，可以提高代码质量和可维护性。Styled-component是一个流行的CSS-in-JS库，允许我们用JavaScript编写样式，从而提高样式的可重用性和模块化。
本文将带你逐步了解如何使用Create-react-app、React Router、Styled-component、TypeScript和SVG从零搭建一个React+TypeScript+Styled项目。我们从创建一个新的React项目开始，然后介绍如何配置SCSS、Styled-component和React Router。
创建一个React项目
要创建一个新的React项目，请使用create-react-app：
npx create-react-app my-app --template typescript
这将创建一个名为my-app的新项目，它使用TypeScript模板。
CSS重置
为了确保浏览器的默认样式不会影响我们的项目，我们添加一个CSS重置文件：
/* styles/reset.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
配置SCSS
我们使用SCSS来扩展CSS的功能。在package.json中添加sass和sass-loader：
// package.json
{
"devDependencies": {
"sass": "^1.53.0",
"sass-loader": "^13.1.0"
}
}
在src文件夹中创建styles文件夹并添加一个main.scss文件：
/* styles/main.scss */
@import './reset.css';
body {
font-family: sans-serif;
}
在webpack.config.js中配置SCSS：
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
}
};
配置Styled-component
Styled-component允许我们用JavaScript编写CSS。在package.json中添加styled-components：
// package.json
{
"devDependencies": {
"styled-components": "^6.4.1"
}
}
在src文件夹中创建styled文件夹并添加一个App.styled.js文件：
/* styled/App.styled.js */
import styled from 'styled-components';
const AppContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
`;
export default AppContainer;
用React Router添加底部导航
React Router用于管理应用程序中的路由。在package.json中添加react-router-dom：
// package.json
{
"dependencies": {
"react-router-dom": "^6.4.4"
}
}
在src文件夹中创建components文件夹并添加一个Navigation.js文件：
/* components/Navigation.js */
import { Link } from 'react-router-dom';
const Navigation = () => {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
</nav>
);
};
export default Navigation;
在src文件夹中创建pages文件夹并添加一个Home.js文件：
/* pages/Home.js */
const Home = () => {
return <h1>Home Page</h1>;
};
export default Home;
在App.js中设置路由：
// App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Navigation from './components/Navigation';
import Home from './pages/Home';
const App = () => {
return (
<BrowserRouter>
<Navigation />
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>
);
};
export default App;
引入SVG图标
SVG图标可用于添加视觉元素。在public文件夹中创建icons文件夹并添加一个logo.svg文件：
/* public/icons/logo.svg */
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5 17h-2v-6h-2v6h-2v-8h2v2h2v-2h2v8z"/></svg>
在App.js中导入图标：
// App.js
import logo from './public/icons/logo.svg';
const App = () => {
return (
<div>
<img src={logo} alt="Logo" />
</div>
);
};
创建Item组件
Item组件是一个可重用的组件，用于显示项目信息。在src/components文件夹中添加一个Item.js文件：
/* components/Item.js */
import styled from 'styled-components';
const ItemContainer = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
margin: 10px;
border: 1px solid #ccc;
`;
const ItemImage = styled.img`
width: 100px;
height: 100px;
`;
const ItemInfo = styled.div`
flex: 1;
margin-left: 20px;
`;
const ItemName = styled.h3`
font-size: 16px;
`;
const ItemDescription = styled.p`
font-size: 14px;
`;
const Item = ({ name, description, image }) => {
return (
<ItemContainer>
<ItemImage src={image} alt={name} />
<ItemInfo>
<ItemName>{name}</ItemName>
<ItemDescription>{description}</ItemDescription>
</ItemInfo>
</ItemContainer>
);
};
export default Item;
总结
通过遵循本指南，你将能够从零开始使用React+TypeScript+Styled-component构建一个现代的Web应用程序。你已经了解了如何配置SCSS、Styled-component和React Router，并创建了一个可重用的组件来显示项目信息。随着项目的发展，你可以继续添加功能和改进代码质量，从而创建一个健壮且可维护的应用程序。
