2017-11-09 1 views
0

現在、私はsass、images、およびjsxファイルを使用しており、標準があるかどうかを知りたいと思います。彼のプロジェクトReact(Reduxなし)のファイルをどのように整理するのですか?

例えば、現在、私は、このやっている:私のApp.jsx(例輸入)で

"/src 
    /components 
     App.jsx 
     App.scss 
     /Header 
     Header.jsx 
     Header.scss 
    /utils 
    index.js" 

import Header from './Header.jsx 
import appSass from './App.scss' 

答えて

0

あなたのファイルを整理するには多くの方法の良いプラクティスはありますが、私は現在はコーディングブートキャンプを通過しており、この組織プロセスを示しています:

/src 
    /components 
     /app 
      index.js 
      app.scss 
     /header 
      index.js 
      index.scss 
    /lib 
     util.js 
    /style 
     main.scss 
     _reset.scss 
     _vars.scss 
     _layout.scss 
     _base.scss 
    main.js 

あなたとあなたのアプリコンポーネントをインポートすることができmain.js:

import App from './component/app' 

とあなたのapp.js(および他のコンポーネント)で、使用してインポートすることができます。

import Header from './header' 

私はこれを維持するための良い方法を見つけました物事は整理され、各コンポーネントを格納しているディレクトリレベルを把握しようとしていないところで、インポートをより統一します。

また、スタイルディレクトリ内には、あなたの全体のアプリケーションのスタイリングと関連したすべてのsassファイルを持っているので、sassファイルを整理するのに良い方法です。 main.scssは他のファイルをインポートし、最初に適用するscss(通常はリセット/正規化)を指定します。各コンポーネントディレクトリには、その単一のコンポーネントのスタイリングを指示するsassファイルも含まれます。

+0

ありがとうございますが、どのファイルに「app.scss」をインポートしますか? – ken

+0

アプリディレクトリのindex.jsにあります – MackoyokcaM

関連する問題