一步步教你React SAP开发与项目工程化

最新推荐文章于 2024-07-16 09:44:32 发布

calidan-x

最新推荐文章于 2024-07-16 09:44:32 发布

阅读量333

点赞数 1

分类专栏：入门教程文章标签： react js typescript

本文链接：https://blog.csdn.net/weixin_36330664/article/details/104759811

版权

本文详细介绍了React应用的开发流程，从环境配置到工程搭建，包括使用TypeScript创建项目，实现路由与页面跳转，讲解CSS模块的使用，组件的编写，HTTP请求的处理，以及Hook的运用。此外，还探讨了组件状态管理和项目打包的方法。

摘要由CSDN通过智能技术生成

一步步教你React SAP开发与项目工程化
Calidan前端教程

本文适合React的初学者阅读
你将学到

搭建环境
创建工程
路由与页面跳转
css模块
编写组件
如何发http请求
使用hock
打包

搭建环境

在学习React之前，我们需要配置下环境
到 https://nodejs.org/ 下载最新版本的node.js
到 https://code.visualstudio.com/ 下载vscode
https://classic.yarnpkg.com/en/docs/install/#mac-stable 安装yarn

创建一个工程

因为TypeScript已经成为了前端开发的标准，所以直接使用TypeScript创建项目

# 新建react项目
yarn create react-app my-app --template typescript
cd my-app
yarn start

然后在浏览器输入

http://localhost:3000/

就可以看到React APP的界面了
在这里插入图片描述

路由与页面实现

# 安装router模块
yarn add react-router-dom @types/react-router-dom

使用vscode打开my-app目录
修改 src/App.js

import React from 'react';
import {
    BrowserRouter as Router, Route, Switch, useHistory } from 'react-router-dom';

const Home = () => {
   
  const hitory = useHistory();
  return (
    <div>
      This is home page
      <br />
      <button
        onClick={
   () => {
   
          hitory.push('/product');
        }}
      >
        Go to product page
      </button>
    </div>
  );
};

const Product = () => {
   
  return <div>This is product page</div>;
};

const App = () => {
   
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact component={
   Home} />
          <Route path="/product" exact component={
   Product} />
        </Switch>
      </Router>
    </div>
  );
};

export default App;

上面的例子最简单的实现了页面路由，在浏览器输入

http://localhost:3000/
http://localhost:3000/product

在home页面，已经加入了路由跳转的代码

上述的例子其实有一些偷懒，把几个页面的内容都写到了同一个文件中，具体的项目我们应该把页面分成不同文件，并且CSS样式也应该和页面分离。

所以实际的工程项目的结构应该是这样。
在这里插入图片描述

在这里，我还强烈建议吧App开头的文件和引用全部改成小写app，使用 - 作为单词分隔，原因是同时使用大小写命名会照成文件命名混乱，还有一个重要原因是git默认是不支持大小写的，在项目版本管理上会遇到麻烦。

src/app.tsx

import React from 'react';
import {
    BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './pages/home/home';
import Product from './pages/product/product';

const App = () => {
   
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/" exact component={
   Home} />
          <Route path="/product" exact component=