从零开始创建react+flask项目+上传GitHub

原创已于 2023-10-11 17:05:54 修改 · 1.3k 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2023-09-25 15:39:28 首次发布

本文介绍在环境配置好的前提下，新建react前端+flask后端项目并上传至GitHub的方法。包括使用vite创建react前端项目、在项目根目录创建flask后端项目，还阐述了上传GitHub的步骤，以及前端项目的目录结构、初始文件解释和前端系统的编写。

从零开始创建react+flask项目+上传GitHub

一、创建新项目
- 1、创建react前端项目
- 2、创建flask后端项目
二、上传GitHub
三、前端项目

这是在环境已经都配置好的前提下，如何新建一个react前端+flask后端项目，并上传GitHub。

一、创建新项目

1、创建react前端项目

使用 vite 创建一个 react+vite+typescript 项目。
①在要放置项目的位置新建一个文件夹，并命名。这个文件夹就是整个项目的根目录。
②打开这个文件夹，在空白处按住shift，点击右键打开Powershell窗口。
③输入下列初始化命令，使用 vite 创建一个 react+vite+typescript 项目。client是项目名。

npm init vite
//或
yarn create vite

④输入项目名：
在这里插入图片描述
⑤选择框架react：

⑥选择语言typescript：

⑥安装依赖并启动

cd vite-project
npm insatll
npm run vite

启动后，打开网址
在这里插入图片描述

2、创建flask后端项目

①在项目根目录中，新建一个后端项目文件夹。

二、上传GitHub

①首先在GitHub上新建一个仓库。
②打开要上传的项目的工作路径，在目录空白处鼠标右键。点击Git Bash Here打开Git命令行界面。
③输入git init初始化项目。
④输入git add . 将该目录下所有文件加入本地暂存区。
⑤输入git commit -m "项目注释" 注释项目。
⑥输入git remote add origin https://github.com/XXX把本地历史区中的文件添加到github服务器的暂存区中。使本地和远程服务器建立联系。
⑦输入git pull origin master 先把github上的文件拉下来，每次提交之前要先进行pull，防止冲突。如果报错，输入git pull origin master --allow-unrelated-histories 即可。
⑧输入git push -u origin master 这一步是真正向github进行提交，执行完成后，github上的repository就有和本地一样的代码文件。

三、前端项目

1、目录结构

前端项目建成后会生成默认目录结构。一般而言，项目通用结构组织如下：

项目文件
├─node_modules            // 第三方依赖
├─public                  // 静态资源（不参与打包）
└─src             
	├─assets              //静态资源
	├─components          //组件
	├─config              // 配置
	├─http/apis           // 封装前后端请求方法
	├─layout              // 页面布局
	├─pages               // 页面
	├─routes              // 路由
	├─service             // 请求服务
	├─store               // 状态管理
	├─utils                // 通用方法
	├─App.css
	├─App.tsx
	├─index.css
	├─main.tsx
	├─vite-env.d.ts
├─.eslinttrc.cjs
├─.gitignore
├─index.html             // 页面入口
├─package.json
├─tsconfig.json          // ts配置文件
├─tsconfig.node.json
├─vite.config.ts         // vite配置文件

2、初始文件解释

index.html

index.html是网页主入口。在这里定义了HTML结构，html、body等DOM元素都在这里。可以看到，body里有一个id为root的div，这便是整个前端项目放置的div盒子了。
script中使用src引用了main.tsx，这表明，对网页的所有操作的入口就在main.tsx中，并且在main.tsx中一定有能够读取到root的代码。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

main.tsx

main.tsx 使用tsx语法，使用typescript操作html标签。
这里首先引入React和ReactDOM组件，ReactDOM.createRoot（）的时候，不能直接把HTML/BODY作为根容器，需要指定一个额外的盒子【例如：#root】。
基于ReactDOM中的render方法把构建的virtualDOM（createElement）渲染为真实DOM。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

index.css

这是main.tsx的样式文件

App.tsx

这是一个react函数组件。

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

App.css

设置了App组件的样式。

3、写一个前端系统

在main.tsx中配置页面路由：之后所有的组件都布局在layout中。

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import './index.css';
import Layout from './layout/layout';

const router = createBrowserRouter([
  {
    path:"/",
    element:<Layout/>,
  },
]);
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>,
);

标签

#react.js #flask #github