There is no strictly to use a single folder structure or file naming in React project. Most of the time, these kind of choice can be made by a team or a company may have a guideline. There is no right or wrong way of structuring a React project but some structures are better than the others for scalability, ease of working on files and easy to understand structure. If you like to learn further about folder structure you may check the following articles.
There is no strict way to use a single folder structure or file naming in React project. Most of the time, these kind of choice can be made by a team. Sometimes a company may have a developed guidelines about what code conventions to follow, folder structure and file naming. There is no right or wrong way of structuring a React project but some structures are better than the others for scalability,maintainability, ease of working on files and easy to understand structure. If you like to learn further about folder structure you may check the following articles.
- [React Folder Structure by https://www.devaradise.com ](https://www.devaradise.com/react-project-folder-structure)
- [React Folder Structure by www.robinwieruch.de ](https://www.robinwieruch.de/react-folder-structure)
@ -35,9 +35,9 @@ In all my React project, I will use CamelCase file name for all components. I pr
## Folder
I found it easy to put all images, icons and fonts in an asset and all CSS style sheets in styles folder. All components will be in a component folder.
I found it easy to put all images, icons and fonts in the assets folder and all CSS style sheets in styles folder. All components will be in the components folder.
So far, we have been working on index.js file. We have lots of component on index.js. Today we will move every component to a single file. We import all the file to App.js. In the process, you will see my folder structure. We are in src directory. All the folder structure will be inside the src directory. Let's start from the index.js file. In addition to index.js file, let's create an App.js file and move most of the components we had to App.js for the time being.
So far, we have been working on index.js file. We have lots of component on index.js. Today we will move every component to a single file and we will import all the files to App.js. In the process, you will see my folder structure. Currently, we are at src directory. All the folder structure will be inside the src directory. Let's start from the index.js file. In addition to index.js file, let's create an App.js file and move most of the components we had to App.js for the time being.
The index.js is your getaway to connect the component with index.html.
```js
@ -67,8 +67,20 @@ We just add the keyword export before _let_ or _const_ to make a named export.
```js
// src/App.js
import React from 'react
// named export in arrow function
export const App = () => <h1>Welcome to 30 Days Of React</h1>
```
Exporting in a function declaration, a regular function
```js
// src/App.js
import React from 'react
// named export in regular function, function declaration
export function App () {
return <h1>Welcome to 30 Days Of React</h1>
}
```
Now, let's import the App component from the App.js file to index.js.
Asabeneh
4 years ago