最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【整理】ReactJS项目中的文件夹结构和架构的最佳实践

ReactJS crifan 3256浏览 0评论

ReactJS中,对于项目的架构,文件夹结构的常见做法和最佳事件

参考:

react js project architecture components container

How to better organize your React applications? – Alexis Mangin – Medium

/src
  /components
    /Button
    /Notifications
      /components
        /ButtonDismiss  
          /images
          /locales
          /specs
          /index.js
          /styles.scss
      /index.js
      /styles.scss
  /scenes
    /Home
      /components
        /ButtonLike
      /services
        /processData
      /index.js
      /styles.scss
    /Sign
      /components
        /FormField
      /scenes
        /Login
        /Register
          /locales
          /specs
          /index.js
          /styles.scss
  /services
    /api
    /geolocation
    /session
      /actions.js
      /index.js
      /reducer.js
    /users
      /actions.js
      /api.js
      /reducer.js
  index.js
  store.js

How to Structure Your React Project

A Better File Structure For React/Redux Applications

actions/
    CommandActions.js
    ProductActions.js   <= Here
    UserActions.js
components/
    Header.js
    Sidebar.js
    Command.js
    CommandList.js
    CommandItem.js
    CommandHelper.js
    Product.js          <= Here
    ProductList.js      <= Here
    ProductItem.js      <= Here
    ProductImage.js     <= Here
    User.js
    UserProfile.js
    UserAvatar.js
containers/
    App.js
    Command.js
    Product.js          <= Here
    User.js
reducers/
    index.js
    foo.js
    bar.js
    product.js          <= Here
routes.js

How to Organize a Large React Application and Make It Scale — SitePoint

之前自己的某个(别人帮忙搭建的架构的)Reactjs(确切来说是preact)的项目结构,列出来,供参考:

<code>.
├── Makefile
├── README.md
├── build/
├── jsconfig.json
├── node_modules/
├── package-lock.json
├── package.json
├── src/
│   ├── assets/
│   ├── common/
│   ├── components/
│   ├── config.json
│   ├── container/
│   ├── favicon.ico
│   ├── index.ejs
│   ├── index.js*
│   ├── lib/
│   ├── manifest.json
│   ├── pwa.js
│   ├── store/
│   └── style/
└── webpack.config.babel.js*
</code>

转载请注明:在路上 » 【整理】ReactJS项目中的文件夹结构和架构的最佳实践

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.190 seconds, using 22.15MB memory