那些羞于分享的书签，React + TypeScript助你一键搞定！

2023-11-24 07:08:03

打造你的 Chrome 书签共享扩展程序：使用 React + TypeScript 的完整指南

在当今数字时代，分享和管理书签变得至关重要。然而，传统的书签管理方式往往繁琐且缺乏协作性。如果你正在寻找一种方法来简化与团队分享书签的过程，那么构建一个 Chrome 书签共享扩展程序是一个绝佳的解决方案。本文将提供一份综合指南，手把手地教你如何使用 React + TypeScript 从头到尾构建这个扩展程序。

为什么要选择 React + TypeScript？

React 是一个流行的 JavaScript 库，用于构建用户界面。它以其高性能和组件化的架构而闻名。TypeScript 是一种由 Microsoft 开发的编程语言，它是 JavaScript 的超集。TypeScript 在 JavaScript 的基础上增加了类型检查功能，有助于编写更健壮、更易于维护的代码。

前端开发

安装 React 和 TypeScript

npm install create-react-app

创建一个新的 React 项目

create-react-app my-bookmark-extension

安装 TypeScript

npm install typescript @types/react @types/react-dom

配置 TypeScript

在 tsconfig.json 文件中添加以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "noImplicitAny": true
  }
}

编写你的 React 组件

在 src 目录中创建一个 App.tsx 文件，并添加以下代码：

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>书签共享</h1>
      <ul>
        <li>书签 1</li>
        <li>书签 2</li>
        <li>书签 3</li>
      </ul>
    </div>
  );
};

export default App;

构建你的扩展程序

npm run build

后端开发

安装 Node.js 和 Express

npm install nodemon express

创建一个新的 Node.js 项目

mkdir my-bookmark-extension-backend
cd my-bookmark-extension-backend

初始化一个 Express 项目

npm init -y

安装依赖项

npm install express body-parser mongoose

配置 Express

在 app.js 文件中添加以下代码：

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const app = express();

app.use(bodyParser.json());

mongoose.connect('mongodb://localhost:27017/my-bookmark-extension-backend', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

app.get('/bookmarks', (req, res) => {
  Bookmark.find({}, (err, bookmarks) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.status(200).send(bookmarks);
    }
  });
});

app.post('/bookmarks', (req, res) => {
  const bookmark = new Bookmark(req.body);

  bookmark.save((err, bookmark) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.status(200).send(bookmark);
    }
  });
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});