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

本文详细介绍了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=
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值