react博客项目(一）—— 基本项目搭建

目标效果：夜月归途

1.利用脚手架创建项目，首先在工作空间中进行全局安装，然后通过create-react-app创建项目，其后跟随项目名称(此处为hello-reat),其后是打开项目，并启动项目，启动成功后以在浏览器中输入可以看到成功页面http://localhost:3000/

npm install -g create-react-app
create-react-app hello-react
cd hello-react
npm start

2.实现静态页面的编写：首先拆分页面结构，在项目中写好相应的组件。项目结构图和具体效果图如下，页面设计用了antd简化页面开发，npm install antd。具体引用细节参考官方文档Ant Design - 一套企业级 UI 设计语言和 React 组件库

3.静态页面的跳转使用了路由，此处的router为v6版本，与v5版本比起来有很多不同，引入为npm install react-router-dom。分别在APP.js和index.js中写入如下内容

  <Routes>
                  <Route path="/detail/:_id" element={<Detail />} />
                  <Route path="/skill" element={<Skill />} />
                  <Route path="/life" element={<Life />} />
                  <Route path="/" element={<Content />} />
                </Routes>

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);