35 – Better Project Structure For React

Intro

Now we have learned about so many core features and basics of React. its time to dive deeper into components after all component is the core building block and the feature of the react library.
So we have to make sure that we know how they work what happens behind the scenes and what we can do with them.
You already learn quite a bit about that but there still are some blind spots which I want to cover in this module.

Back to our starting project which we worked on. let’s improve the project thus far we only use two components the app component and the person component which simply outputs one single person.
It’s nothing wrong with these files, its working fine, but of course behind the scenes, we can still tweak that a little bit.
For Example, you would typically split this application into more components than that.

Now if we analyze our existing components we see that the person component is pretty focused. It displays the card of one person the information of one person. So our Person component dosen’t need more splitting.
You could outsource the input into its own component.



That might make sense if you want to create a generic input component across your application where you only change the styling but if that not the goal putting into its component doesn’t make much sense.

Splitting Up App Component

Improvements

We can split up our App.js file though. We managed the state and do a lot of things there.
If we have a look at our render method which doesn’t decide what this component is responsible for rendering.



We see that we rendered a list of persons but then we also ofcourse do have a toggle button. Now typically container components like the App.js component.
So component which also manages the state shouldn’t be involved with UI rendering too much.

So while it’s not necessarily, the worst practice to have this kind of app component especially for a small app like this one is we might still split this up into more components.
For example :



It might make sense to create a person list comonent or a Persons component is how we could name it.
We could then simply pass the array of persons into that component and inside that Persons component we would do the mapping and render a list.

Another Improvement

Another improvement we can do is, of course, optional is to outsource our cockpit into its component so that in the end our app component only has wrapping div.

Create Persons component

container for Person component
let’s create a new folder named as Persons inside that we can have a Persons.js.
Now in my openion it also make sense to move the previous Person folder to Persons folder because Person really s just well one single element which we are about to render.
This is optional but having this kind of structure makes sense we can improve this even more. In our source folder, we might things like assets folder which contains images or stuff like that.
Also we can maintain all our component in the components folder with that we can have a container folder which holds all our container like like App.js and its respective CSS files.

  ...
  |- src
  |   |-assets
  |   |-components
  |   |   |-Cockpit
  |   |   |  |-Cockpit.js
  |   |   |-Persons
  |   |   |  |-Persons.js
  |   |   |  |-Person
  |   |   |     |-Person.css
  |   |   |     |-Person.js
  |   |
  |   |-container
  |   |   |-App.js
  |   |   |-App.css
  ...

So now we restructured our application to only have the index.js file directly in the src folder. then have a list of the containers we know and then we have a laist of components.
ofcourse this will break the applicaion for now because all our imports are wrong now.
The first thing we should do now is to fix those imports before we in the next lectures continue working on that persons.

Fixing Imports

After Restructuring the code lets fix the imports. Regarding the imports in applications we need to reach out to the person component

...
import Person from '../components/Persons/Person/Person';
...

In the src/index.js file we need to adjust the import pointing to the App.js

...
import App from './containers/App';
...

This is it for now next we need to create the Persons.js and the Cockpit.js file they have created of course but we need to fill them with life and then we can really see an improved and focused component structure.

React introduction
React Component