react项目搭建

爱健身_程序猿

已于 2022-03-12 11:34:17 修改

阅读量3.3k

点赞数 2

分类专栏： react redux router 文章标签： react.js javascript 前端

于 2022-03-12 11:31:23 首次发布

本文链接：https://blog.csdn.net/qq_40595166/article/details/123335352

版权

1 创建React-APP

通过官方的create-react-app，找个喜欢的目录，执行：

npx create-react-app app-name

稍等片刻即可完成安装。安装完成后，可以使用npm或者yarn启动项目。或者直接在vscode中打开项目，执行start命令启动项目。项目文件结构如下图：

2 精简项目

2.1 删除不用的文件

删除后目录如下：

2.2 简化代码

逐个修改以下文件：

src/App.js代码简化如下：

import React from 'react'

function App() {
  return (
    <div className="App">
      <h1>This is React App.</h1>
    </div>
  )
}

export default App

src/index.js代码简化如下：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

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

public/index.html 代码简化如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <!-- <noscript>You need to enable JavaScript to run this app.</noscript> -->
    <div id="root"></div>
  </body>
</html>

3 项目目录结构

项目目录结构可根据项目实际灵活制定。这里分享下我常用的结构，仅供参考。

    ├─ /node_modules
    ├─ package.json
    ├─ /public
    |  ├─ favicon.ico        <-- 网页图标
    |  └─ index.html         <-- HTML页模板
    ├─ README.md
    ├─ /src
    |  ├─ /common            <-- 全局公用目录
    |  |  ├─ /fonts          <-- 字体文件目录
    |  |  ├─ /images         <-- 图片文件目录
    |  |  ├─ /js             <-- 公用js文件目录
    |  |  └─ /style          <-- 公用样式文件目录
    |  |  |  ├─ frame.css    <-- 全部公用样式（import其他css）
    |  |  |  ├─ reset.css    <-- 清零样式
    |  |  |  └─ global.css   <-- 全局公用样式
    |  ├─ /components        <-- 公共模块组件目录
    |  |  ├─ /Header         <-- 头部导航模块
    |  |  |  ├─ index.js     <-- header主文件
    |  |  |  └─ style.module.css   <-- header样式文件
    |  |  └─ ...             <-- 其他模块
    |  ├─ /pages             <-- 页面组件目录
    |  |  ├─ /Home           <-- home页目录
    |  |  |  ├─ index.js     <-- home主文件
    |  |  |  └─ style.module.css      <-- home样式文件
    |  |  ├─ /Login          <-- login页目录
    |  |  |  ├─ index.js     <-- login主文件
    |  |  |  └─ style.module.css     <-- login样式文件
    |  |  └─ ...             <-- 其他页面
    |  ├─ App.js             <-- 项目主模块
    |  └─ index.js           <-- 项目入口文件
    └─ yarn.lock

3.1 支持jsx和sass

本人更喜欢用jsx，会把App.js 和 page , components的组件都改错jsx，直接改后缀名即可。

使用npm 或 yarn安装sass

npm install node-sass

安装好后，直接把项目里的.css 改成 .scss 就可以了。

此时项目目录结构如下：

3.2 使用classnames库

看个人习惯或项目要求，可用可不用

安装

npm install classnames

使用

import React from "react";
import styles from './style.module.scss'
import classNames from 'classnames/bind'

const Header = props => { 
    const cx = classNames.bind(styles);

    return (
        <div className={cx("header-test-1")}> header </div>
    )
}

export default Header

4 路由

4.1 页面构建

根据自己的要求创建页面，这里新建了home和login做演示，页面自己创建和编写即可。

4.2 使用react-router-dom

这里是v6的版本，v5版本的这里就不展示了。

安装

npm install react-router-dom

最低0.47元/天解锁文章

爱健身_程序猿

关注

2
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
react项目搭建

1 创建React-APP通过官方的create-react-app，找个喜欢的目录，执行：npx create-react-app app-name稍等片刻即可完成安装。安装完成后，可以使用npm或者yarn启动项目。或者直接在vscode中打开项目，执行start命令启动项目。项目文件结构如下图：2 精简项目2.1删除不用的文件删除后目录如下：2.2简化代码逐个修改以下文件：src/App.js代码简化如下：import React from '...
复制链接

扫一扫