src
---COMPONENT
---UI
card.js
---API
---JS
--display.js
---CSS
--display.css
Need to traverse from JS folder to UI
means, basically need to move 3 folder up. In display.js, need to import card.js
Tried with .../UI/card, but this did not work
Navigation to 3 folder up will not work with three dot in react, just like it works for 2 folder up navigation,
So, for 3 folder up navigation, every time you go up 2 folers, you need to go down 1 to continue.
'../../../components/UI/Card'
another way
'../../UI/Card'
Related
import style from './auth-input.module.css'
I'm using this in my authInput component, and i'm using this component 5 or 6 times,
it's better try to import this css first and import it only once, or even if I'm importing the css 5 times it will be considered only one import?
Correct, if you import the CSS module into your component, and then export your component and use it multiple times, the CSS will only be imported once.
I am trying to display a search icon in my react app.
In my SearchIcon component I have an img tag:
<SearchIcon>
<img src="/images/search-icon.svg" alt=""/>
</SearchIcon>
My icon is not being displayed though.
My SearchIcon component is in my ProjectFile->src->Profiles->EmployerHeader.js file.
My search-icon.svg is located in ProjectFile->public->images->search-icon.svg
What you are doing will search for the file inside images folder which is inside Profiles folder. That will not work obviously.
.. means up one level. You have to go up two levels to your Project folder and then search.
"../../public/images/search-icon.svg"
I do want to have a file structure by feature. But I'm using Styled Component and I have a lot of files.
For exemple in my project directory, which is an entity in my application, I have:
Projects.js ProjectList.js ProjectCreate.js ProjectShow.js Card.js CardHeader.js CardBody.js CardFooter.js TasksCounter.js ProjectDescription.js CardAdd.js ProjectDelete.js actions.js reducer.js saga.js constants.js
I could have more files but my pages are still under construction so I could add some more later. Should I split those files again? To have for example sub directories like Projects ProjectCreate ProjectShow put the common files in the root project directory and specific files into those three?
project
|_Projects
|_index.js
|_ProjectList.js
|_Card.js
|_CardHeader.js
|_CardBody.js
|_CardFooter.js
|_TasksCounter.js
|_ProjectDescription.js
|_CardAdd.js
|_actions.js
|_reducer.js
|_saga.js
|_ProjectCreate
|_index.js
|_Form.js
|_actions.js
|_reducer.js
|_saga.js
|_ProjectShow
|_index.js
|_ProjectHeader.js
|_ProjectContent.js
|_actions.js
|_reducer.js
|_saga.js
I saw a lot of different approaches in more than a dozen of tutorials but the examples are always really simple with just a couple of features.
Better solution maybe, using Ducks and put every Styled Components in the same file?
I usually make a separate folder called views for every react (custom) component.
views
- Cards
- index.js
- module.js
- test.js
- styles.js
- Button
- InputFields
- ...
- ...
Inside each view, notice that there is an index.js that has the react component. The module.js will contain reducers and actions if any. test.js will have tests regarding that component only and finally styles.js or styles.css/scss will have styles
I am using react and was trying out the new context API for my project which is a "Reddit clone". So my Context is created in a file named provider.js which is in the src folder alongside App.js. Now, I have created a HeaderComponent in its own folder which imports the Context in the following way:
import Context from '../provider'
I have created another component called LoginComponent inside the HeaderComponent. And, the LoginComponent is in its own folder. Now, I have imported Context in the following way:
import Context from '.../provider'
The ../ import worked fine but the .../ imported throws and error.
Failed to compile.
./src/HeaderComponent/LoginComponent/index.js Module not found: Can't
resolve '.../provider' in 'C:\Users.......\reddit\reactfe\src\HeaderComponent\LoginComponent'
Every step up in the folder structure is a .. followed by a /.
import Context from '../../provider'
The number of dots don't have the meaning you seem to think they do. Things to remember:
../ Up one directory.
../../ Up two directories (and so on).
./ Same directory as the current one.
With this in mind, since you need to go up one directory (from LoginComponent to HeaderComponent) and then up one directory again (from HeaderComponent to src) because that's where provider.js resides, you need to do:
import Context from '../../provider';
If you run in your console ls -la you see the . and ... So the . it's the current local where are you, and the .. it's a reference to the parent folder (one level up). So if you need back two folders you need put this two times, this way ../../.
In your case import Context from '../../provider'
I got some great react best practices are here. Grateful to AirBnB https://github.com/airbnb/javascript/tree/master/react
So... Got this idea like BEM for classes, but use for component names and children. A bit tired of happening to search around components.
Like so.. Component__childName__childName__childName.jsx
I have this idea however and would like to know:
Is this a bad practice?
Are component names going to be come unwieldy?
Sort of links the file names all together when its box in a box in a box in a box.
Could get as short as say:
Component__List.jsx
Component__List__Item,jsx
UpdAte question:
Could a separate directory for each component be useful? I am seeing that as well indifferent projects.
For example:
|-Components
|--ExampleComponent
|---Component.jsx
|---ComponentList.jsx
|---ComponentItem.jsx
|---ComponentItemDetail.jsx
|---Component.scss
|--AnotherOne
|---AnotherOne.jsx
And so on...
I guess you are asking for a good naming practice and is it ok to name your components like Component_User.jsx, then if it has a header, Component_User_Header.jsx, then if the header has a label Component_User_Header_Label.jsx. If you are asking smtg else you can just ignore the rest :)
I guess a better approach would be to put related components into a domain folder: such as under user directory index.jsx would be your main component and index.css would be your main css for that component. Then for each subcomponent you can create a similar named files as a sub-directory.
user // main directory
image //sub directory
index.jsx //component file import index.css
index.css //css for this component
header
index.jsx //component file import index.css
index.css
index.jsx //main component file import sub-directories index files to use those components
index.css