×
  • React – The Complete Guide (incl. React Router 4 & Redux)

  • 35 – Better Project Structure For React

    Lesson List
    [ Project Structure For React, 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.

    The question always is:
    • What should go into its component?
    • What do you group in a higher component in the root component?

    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.

    Project Structure For React

    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.

    Project Structure For React

    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.

    In other words:
    The Render method should be very lean and not contain too much JSX.

    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 :

    Project Structure For React

    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.

    Persons folder Structure
    
      ...
      |- 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

    src/containers/App.js
    
    ...
    import Person from '../components/Persons/Person/Person';
    ...
    

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

    src/index.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
    Project Structure For React

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept