“Build a React App” they said, “It will be FUN” they said!!

— So you want to build a React Application. Nice! React is a great way to build BIG and build FAST. React is a component-based library which is used to develop interactive UI’s (User Interfaces). It is currently one of the most popular JavaScript front-end libraries which has a strong foundation and a large community supporting it. So it’s easy to say, “Why not!”

— In this article we are going to cover three rudimentary concepts that will enable you to determine what you are doing, where you are doing it, and how. Let’s try to put the “easy” in the “peezy”.

— Full disclosure: I am an absolute novice, but here is how i’ve have managed to conceptualize the etiquette to create an app!

— First and foremost, before we start building our application, we need to think about what exactly should be built. In React, an application consists of reusable, independent components which are used to display certain UI elements. Therefore, defining which UI elements our application has is absolutely dire as a first step. Without this, we don’t know what components to create.

1.Create! VISUALIZE! Create!

— This doesn’t necessarily have to be done in Sketch, Adobe XD, or other design tools. You can use a simple pen and paper the “Good ol’ fashion” way. In this case, create a minimalist mockup just by drawing rectangles and shapes which represent the UI elements.

1.5 Break the UI into all of its bits, AKA “components”

— With your mockup in place, we can start identifying our app’s components.

The above photo is a perfect depiction of breaking the UI into all the necessary components for your app. The better you can wireframe your app the clearer the steps will become to navigate the next steps for your app.

1.7Arrange all components like a chain of command

— After we identified all components, arranging them in a hierarchy is the next step in our planning process. This hierarchy will help us later on when we look at how our data flows in our application. Additionally, it makes a component’s dependencies clear and thus helps to build the app.

You can create such a hierarchy by having a look at the mockup and see which components are nested inside each other. For instance, the search bar component contains the input field and button as child components.

App
|__Header
| |__Logo
|__Search bar
| |__Input field
| |__Button
|__Card
| |__Weather details
|   |__Icon
|   |__Temperature
|   |__Description
|   |__Date
|__Footer
| |__Logo

1.9** Define where state should live

— As a last step in the planning process, we need to define components which should manage the application’s state. Ideally there is one single source of truth at the top of our main application and from this source, all information flows downwards like a waterfall.

Usually, the source of truth is implemented in the component that needs it for rendering. So in our case, we manage state in our containing app component at the very top. Mostly likely your App.js.

2. Organizing our project — get the ice ready, shave it, chop it, shape it.

— Let now focus more on how you can organize your code while building. Having certain patterns throughout the building procedure really helps you in keeping the app manageable.

— Folder structure: Be neat and you’ll stay classy

An often discussed aspect of organizing your React project is the folder structure. There are tons of approaches, all coming with different pro’s and con’s. I personally have learned the hard way so heres the approach:

****Be consistent with your folder structure****

We distinguish between three different types of components in our application which can be ordered like this:

Elements:

— Buttons, Icons, Inputs, etc. — all those are elements which are used over and over again. They are low-level items, reused in multiple components.

Components:

— Even though almost everything is called a component in React, I use a more precise definition for the term in my folder structure. There, a component has to fulfill a certain pure function for the user or the app’s appearance. Therefore, it is not just an element. Elements, in contrast, don’t provide standalone functions. So whilst a search bar component allows the user to submit a search query, an input field alone won’t.

Containers:

— As a third and last type of component, there are containers. Containers are our state-managing components. They are at the very top of our hierarchy and usually consist of several components. In our project, we only have one container, our app container/component. Yet, I wanted to add it in a separate folder so you can see how our final folder structure looks like in the end.

2.5 Class-based vs. functional components

— In React, we can write our components as class-based ones or functional ones. To always know which type you should use, here is a rule of thumb:

If your class-based component only has a render method, make it a functional component.

Using functional components has a lot of benefits: They make your code cleaner and easier readable, they are better debuggable, and they are easier testable. So using them as often as you can, won’t hurt your application. Regarding my three component types I mentioned before (elements, components, containers), only containers are written as class-based components. Elements and components are written as functional ones — like the Header component you can see below.

Use functional components like this as often as possible

3. Building the app- Pour it up and take a walk-

— You are here —

Having the planning done, we can start building our application — finally. Here again, it is recommendable to follow a certain pattern which is stated in the official React docs and helps us in understanding how we should best build our application. The pattern consists of three steps:

1. Build a static version of your application
2. Identify and implement the minimal state your app needs
3. Add functions to mutate the state and thus make the UI interactive

3.1 Build a static version of your application

As a first step, we build a static version of the frontend which we outlined in the mockup. So do not think about any functionalities or state manipulations. First, we focus on designing the app. For that, we take every component we previously identified and implement it in our app. Since we don’t have any data to use at that point, we can temporarily use placeholders.

— Our static App component will have no state or functions —

3.2 Identify and implement the minimal state your app needs

— To make our app interactive, we need to implement state. In React, every change in the UI is triggered by a change in the state object. Therefore, if we, for instance, want to display a loading spinner and thereafter an error notice, we have to change the data of our state accordingly. This change in data, then, triggers a re-rendering of our application.

— Before we implement state, we have to think about which data should be in there. Here as well, the React team did a great job and outlined some questions you should ask yourself in order to figure out if some piece of data is state or not. In general, the state should be as lean as possible. Only add data to your state that is necessarily needed by your app and compute everything else on-demand.

If you think like this for each piece of data in your application, you will end up with a minimal set of state that your app really needs. A simplified state object looks like:

state = {
  searchBarInput: '',
  weatherDetails: {
    temperature: '',
    description: ''
  },
  loading: false,
  error: false
}

3.3 Add functions to mutate state and thus make the UI interactive- Hold tight now, here comes the magic : )

— Our third and last step is the toughest one. But it is also the most fun one as well. Now you can finally bring your app to life. To do that, we create all functions that are being run in the background to modify and update our state correctly. Thus, we make the app and its UI interactive.

Never modify state directly-Mutating state directly can lead to odd bugs, and components that are hard to optimize.

— One concern, every React beginner should be aware of, is the appropriate way to modify state. This always has to be done in an immutable way. Meaning, every state mutation should be done by using the setState method. If you change a state property directly, like in the example below, React might not track that change and hence it won’t re-render your component. This is due to the fact that even though you changed a state property, the object reference for that state object is still the same. For React, this means there is no need to re-render the component. A good tip here is to treat the this.state object always as if it were immutable.

***How to modify state in React correctly***

State updates may be asynchronous
Another essential thing to know (which can save you a lot of debugging time), is the fact that state updates may be asynchronous in React. As stated in the docs, “React may batch multiple setState calls into a single update for performance”. That means if we have subsequent setState calls in a function, React can combine those and call setState only once in the end. Resulting, we would lose previous changes to state since those will be overwritten by the last call. Additionally, we can’t rely on values of state properties for calculating the next state.

So what do we do if we have such a situation, where we want to make sure that state is updated before we execute further code? A solution could be to pass a callback function to the setState method as a second argument. By doing that, you ensure that state is updated before it executes the callback function.

Alrighty, I think we learned a lot throughout this article. Let me quickly wrap up the most important stuff:

Planning our application

1. Create a mockup — Either by using a design tool or pen and paper.
2. Break the UI into components — Draw boxes around every component in your mockup. Use the single responsibility principle to identify what should be its own component and not.
3. Arrange all components in a hierarchy — Create a hierarchy by identifying components that are nested inside each other. This will help you to implement data flows later on.
4. Define where state should live — Try to have as few stateful components as possible. Best would be to encapsulate state responsibility in a single component at the very top of your previously created hierarchy.

Organizing our project

1. Have a consistent, though-out folder structure — Look for structuring patterns that are applicable to your project and be consistent with it.
2. Write functional components if possible — Rule of thumb: If your class-based component only has a render method, make it a functional component.
3. Use CSS modules — Don’t worry about same class names within your project by scoping classes locally to a component.

Building the application

1. Built a static version of your app first — Create the frontend with all its components before you implement state or any other functionalities.
2. Implement the minimal state your app needs — Only add data to state that is necessarily needed by your app and compute everything else on-demand.
3. Add functions to mutate state and thus make the UI interactive — Treat this.state as if it were immutable. So, never modify state directly and keep in mind that setState is asynchronous.

Austin Coding Academy