创建最佳Reactjs项目结构文件夹的最佳方法

Question

我是 react js

中的新手，我通过为 myfirst react js 项目学习。所以我喜欢"如何在 react js 中创建最好的项目 struckture 文件夹"？，我想用简单的 struckture 项目让我的代码干净易读，但我不知道最好的反应方式。

Answer 1

既然你正在学习 React，根据官方的 react 文档 这里

https://reactjs.org/docs/create-a-new-react-app.html

最好的方法是在这里使用创建反应应用程序

https://github.com/facebook/create-react-app

推荐的工具链

React 团队主要推荐以下解决方案：

如果您正在学习 React 或创建新的单页应用程序，请使用 Create 反应应用程序。

如果您正在使用 Node.js 构建服务器呈现的网站，请尝试 接下来.js。

如果你正在构建一个静态的面向内容的网站，试试盖茨比。

如果要构建组件库或与现有组件库集成 代码库，尝试更灵活的工具链。

使用当前安装的nodejs，就像键入一行一样简单

npx create-react-app my-app

或

npm init react-app my-app

或

yarn create react-app my-app

Answer 2

React 有关于文件结构的文档，他们提到你可以用任何你认为合适的方式组织你的文件。从文档中得出的关键要点是：">选择文件结构的时间不要超过五分钟。只需从将所有文件保存在一个文件夹中开始，随着项目的增长，您可以将它们放入单独的文件夹中。只是避免过多的嵌套。这些文档还提供了一些有关如何组织文件的建议。

按要素或路径分组

例如，将所有CSS，JS和测试放在一起

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

按文件类型分组

您可以将所有组件放在一个文件中，将所有 api 文件放在另一个文件中

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

Answer 3

以下是我所做的一些事情：1. 为我为 react 应用程序创建的每个组件都有单独的文件夹。例如：导航组件的文件夹，包含"导航.js"、"导航"等文件.css以及导航所需的所有文件。2.使用解构，它将帮助您最大限度地减少"this"关键字的使用。

我希望这能说明一些问题

Answer 4

如果你的项目很简单，就做标准

src/
  actions/
  components/
  pages/
  reducers/
  App.js
  App.css
  store.js