创建react项目，以及需要注意的一些东西

在那个盘创建都可以，推荐E盘或者D盘

 在E盘下创建一个文件夹，文件夹什么名字都可以,随便起

我创建的react

 点进去

 在这输入cmd

 

 输入完按回车

出现命令行

 在里面输入指令

npx create-react-app my-app

创建项目 前面固定格式 后面名称随便起

 cd my-app

选择项目 cd是选择 后面是项目xxx，到这一步就可以那代码编译器打开了

 最后

输入npm start是启动

输入完回车等一会会变成这样

 这个时候就已经在浏览器启动了，当然也就代表创建成功了。

整个流程下来创建成功，在浏览器启动结束，当然这一点完成后把他关闭掉就好了，用代码编译器打开就好了。

详情请接着往下看

 最后在代码编译器打开就可以编写代码了，是的没错就是这样

小编用的vscode

用编译器打开

可以删除一些不怎么用的，比如图标，图片之类的，当然不删除也行。

打开

这个是小编的---配置好的

按需创建

在src文件夹的下面创建一个router.js文件用于配置路由

在src文件夹的下面创建一个views文件夹用于放置自己的jsx文件

两边要对照

看图片左边框起来的就是创建的文件

右边import就是将他导入到里面

下面的就是用let创建一个变量，开始配置按照这个格式写就好了

 最后的这个非常重要，没有他就报错，见下面这段，也是上面图片最后一点没有框起来的那一点。

export default routes;

这是一个页面

完全创建好之后（这里）

在src下面 将多余的文件或者其他的东西删掉只留下router.js 如果没有那么新建一个 index。js 以及app。js改为jsx

在src下面创建文件夹views文件夹下面创建index

import React from 'react'
导入的放这里


function index() {
事件监听或者其他的放这



  return (
    <div>HTML页面样式于结构部分</div>
  )
}

export default index

router里面写

import Index from "../src/views/index.jsx";


let routes = [
    {
        path:'/',
        element:<Index></Index>
    }
]
export default routes;

index。js里面写

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { HashRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <HashRouter>
    <App />
  </HashRouter>
);

app。jsx里面写

// import logo from './logo.svg';
// import './App.css';
import routes from '../src/router'
import {useRoutes } from "react-router-dom";

function App() {
  return (
    <div>
{useRoutes(routes)}
    </div>
  );
}

export default App;

然后到这里本篇文章就完毕了，谢谢观看，有好的建议可以在评论区发出来。