Lessons from my first serious react project

Who this article is for ?

If you are writing your first react app, this article is not for you as it is not very beginner friendly. To fully appreciate this article you must have built a few basic react apps like a to-do list.

Whats in this piece of writing ?

I am going to discuss the practical nuances and learning from my hands-on experience of building a decent complexity react app which is still in development as I am ironing out some bugs and tweaking a few features ( I built front end for an e-commerce platform with some backend functionality built into the app, check the project here )

Since I don't know any backend technologies at this point I have to integrate some functionality of the backend into my app ( for example data manipulation actions on api calls )

Lessons learned

1. Use json-server for everything api

I placed the data of the products inside a .js file in the form of an object and imported that object. Wherever I would need to render data I would just import this object and use the data within the object. It makes dealing with data(product data) fairly simple.

However this is not how things are done in real life. In real world we make api calls ( I used the builtin fetch function ). I placed the .js file with all the data inside the public folder and provided the relative path of this file to the fetch function. Welcome first problem, using this approach images were not being rendered. Images( i.e. assets ) were inside the src folder which was considered private by react, and apparently you cannot put paths to anything that is private inside anything that is in the public folder. One solution that I came across but did not implemented was placing my assets inside the public folder. I did not tried this approach because that's not how things are done in real projects.

I solved this by installing json-server and creating an image index. Whenever I would need to render an image I would pass the product id to the required function (based on weather I need just one or multiple images) and it would get the image for me using the the image index file.

Check the code snippets below for my solution

This is an example from image index file

const image_urls = [
  {
    id: "0cb1a1c0-4ba9-4464-91d6-112c2dcfecc9",
    images: [require("../images/headphones (7).jpg")],
  },
  {
    id: "f7d224e4-0ecb-4b24-95a9-e171241b5eb4",
    images: [
      require("../images/jeans (1).jpg"),
      require("../images/jeans (2).jpg"),
      require("../images/jeans (3).jpg"),
    ],
  },
];

export default image_urls;

This function returns a single image

//IMPORTING ASSETS
import image_index from "../../assets/data/image_index";

const SingleImageLoader = (productId) => {
  const selectedItem = image_index.filter(
    (item) => item.id === productId.productId
  );
  return <img src={selectedItem[0].images[0]} alt="not found" />;
};

export default SingleImageLoader;

2. Master userReducer/Redux before diving deep into anything complex

If you have made forms in react, then you must be familiar with the frustration associated with it. Forms always turn out to be more complex then you thought they would be. There are multiple state variables and functions associated with it. Keeping track of all these variables and functions becomes a headache specially if your form has multiple input fields. Come to rescue useReducer. useReducre is a hook in react which implements redux type workflow in react. Here is nice tutorial by Harry Wolf to get you started. Go get hooked.

3. Follow a design pattern

Always follow a design pattern. No matter which pattern you follow but do make sure you follow a design pattern. As your project grows in size it will become more difficult to keep track of file no matter how smart your file naming strategy is. After coming mid way through the app I realized that it became too chaotic inside my src folder hence i decided to adapt a design pattern and have to refactor the entire project to make sense out of things.