Question

我是react js的新手，我通过为myfirst react js项目做事来学习。因此，我很喜欢“如何在react js中创建最佳项目struckture文件夹”？，我想通过简单的struckture项目使我的代码清晰易读，但是我不知道React的最佳方法。

Answer 1

由于您正在学习React，请根据此处的官方React文档

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

最好的方法是在此处使用 Create React App

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

推荐的工具链

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

如果您正在学习React或创建一个新的单页应用程序，请使用“创建”   React App。

如果您要使用Node.js构建服务器渲染的网站，请尝试   Next.js。

如果您要构建一个静态的面向内容的网站，请尝试Gatsby。

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

使用当前安装的nodejs，就像输入其中任一行一样简单

npx create-react-app my-app

或

npm init react-app my-app

或

yarn create react-app my-app

Answer 2

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

我希望这可以阐明

Answer 3

React关于文件结构有documentation，他们提到您可以按照自己认为合适的方式组织文件。从文档中删除的关键是：“选择文件结构的时间不要超过五分钟。” 只需从将所有文件保存在一个文件夹中开始，随着项目的发展，您可以但将它们放入单独的文件夹中。只是避免过多的嵌套。该文档还提供了有关如何组织文件的一些建议。

按功能或路线分组

例如将所有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 4

如果您的项目很简单，只需执行标准

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

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

4 个答案:

按功能或路线分组

按文件类型分组