Currently I use sass, images, and jsx files and I would like to know if there is a standard.
For example, currently I'm doing this:
"/src
/components
App.jsx
App.scss
/Header
Header.jsx
Header.scss
/utils
index.js"
In my App.jsx (Example importations)
import Header from './Header.jsx
import appSass from './App.scss'
There are many ways good practices in organizing your files, I am currently going through a coding bootcamp and they showed us this process of organization:
/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
In your main.js you can import your app component with:
import App from './component/app'
and in your app.js (and other components) you will can import using:
import Header from './header'
I found this a nice way to keep things organize and makes your imports more uniformed where you aren't trying to figure out which directory level you are storing each component.
It also is a good way to organize sass files, inside the style directory you have all your sass files that has to do with the styling of your overall app. main.scss imports the other files and dictates which scss you want applied first (usually a reset/normalize). Each component directory will also contain a sass file that will dictate the styling for that single component.
Related
I am trying to use some SCSS variables/fonts in a Gatsby project which uses CSS modules. Currently my project structure looks like this:
src
├── components
├── Footer
├── footer.module.scss
├── index.js
├── Header
├── header.module.scss
├── index.js
├── Layout.js
├── layout.module.scss
├── pages
├── index.js
├── styles
├── _typography.module.scss
├── _variables.module.scss
Gatsby's docs recommend putting global styles into a Layout component (containing the header & footer) and then wrapping this around all other components. This works fine for the styles contained within the layout.module.scss file, but if I import the _variables.module.scss into this file, then I cannot use the variables in other SCSS files (for example header.module.scss).
What is the best way to structure my application so that I can access global variables/fonts in my modules? Do I just need to import the partial files into all of the individual modules when needed?
Thank you!
You have multiple approaches. I think the best and straightforward approach is importing the partial files (variables, functions, mixins, etc) into each individual module when needed since it would be a dependency of that specific file (it makes structural sense).
If your system and modules are properly structured, webpack will tree shake your SCSS modules and will remove the dead-code so you don't need to worry about importing the same file (let's say _variables.module.scss) into each specific module.
I'm looking to optimize my React folder structure.
It looks like this:
- components
- Header
- Header.tsx
- Header.styles.ts
- index.ts
The index.ts is just there to allow me to import the Header component with import { Header} from "components/Header. This works because I'm using babel-plugin-module-resolver. Now, since my folder name is always the same as the main file name inside my components folder, I would like to be able to import the header with import { Header } from "components" and have a Babel plugin resolve this to import { Header } from "components/Header/Header". This would mean I could remove the index.ts
Which Babel plugin can do this?
I'm already using babel-plugin-module-resolver to resolve the components folder. My problem is that i'm also using TypeScript so how do I tell the TypeScript compiler that this module is being resolved like this?
Please help me out. Thanks!
You should be able to just have your index.ts in your components take care of that normally. I don't think that this has anything to do with babel-plugin-module-resolver, it's just how index.ts/js files work in general. https://alligator.io/react/index-js-public-interfaces/
You should be able to get what you are looking for by doing the following in your index.ts file in your component directory:
You import your Header component and then directly export it.
import {Header} from './Header/Header'
export Header
Or you might be able to do a symmetrical export depending on your setup:
export {Header} from './Header/Header'
I’m am new to React and need to understand a concept.
In my text editor there is a source file. Within the source folder I have created component folder as recommended by other sites. This comp folder holds my modules in jsx.
My question is, How do i import my app.js file to component folder modules. App.js is set as export default.
I believe i should use: import App from 'app'; and for other modules import ... from './src/comp/file.jsx'.
is any of this correct.
Your app.js doesn't export app.js per se, it exports whatever you export, probably a class or a function called App.
You probably don't want to import that (except maybe the root index.js did), but you might import another import another component into App, with something like:
import Header from './components/Header'
That's assuming that you have a file called index.js in the subfolder components/Header and that file is exporting the Header class/function.
I have started learning React with the "create react app with webpack" configuration. I import css like this in react component js
import '../dist/css/bootstrap.min.css';
import '../dist/css/main.css';
but when webpack compiles the css, my main.css rule is overlapping with bootstrap.css.
How do I fix this without adding '!important' in my main.css and inline styling in .js file? I also have a global css rule to set like h1,h2,h3 dll to separate files?
This is my current project directory structure, as I couldn't think of a better way of organizing for the use case that every component has it's own .scss file, however, the entire app are fed themes which include a global variables.scss file. Currently, I'm importing the variables.scss file at the top of every component's .scss file and I'm wondering what the best practices are for this sort of workflow.
/ app
/ components
/ Navigation
- Navigation.js
- Navigation.scss
/ styles
- globals.scss
- variables.scss
- main.scss
My main.scss file basically #import all .scss in its directory (e.g. variables.scss, globals.scss, etc.), however, I need to the following to have access to variables inside of each component:
// Navigation.scss
#import '../../styles/variables.scss
.class { ... }
I understand I could also import all component .scss files inside of the main.scss directory but that defeats the purpose of having css modules and being able to import them at component level for name spacing, etc.
It is possible but I don't recommend it.
Dependencies
Every component has it's dependencies. You have to require several dependencies in each Sass (ES6/React.js) module. That's how Webpack resolves dependencies.
I recommend add an resolve path to Webpack / Sass config and import the variables file in each Sass module.