Things I've Learned after building five ReactJS projects in five-week
React is the best product of Meta(Facebook) I have used so far, the learning curve is soo smooth
In the last five weeks with the front-end development, I have used the ReactJS library to build those projects. I must say the ReactJS ecosystem is very huge and it has a lot to offer. ReactJS is the easiest way to build a web application, without having in-depth knowledge of the library, and JavaScript. I restricted myself not to use ReactJS frameworks like NextJS more than twice, rather I stick to plain ReactJS and React router dom.
Anyway, let me share the things I've learned while using ReactJS at the front-end development.
Minimum JavaScript to get started with ReactJS
- variable declaration
- function declaration /arrow function
- template literal
- spread operator
- destructuring
- Array methods like map, filter, reduce, etc.
If you are familiar with these concepts, you can easily pick up ReactJS. However, the more you know JavaScript the more it gets easier for you. If you have at least one year of experience you can easily build complex web applications with ReactJS.
Component Library is ideal for faster development
You will be repeating a lot of codes, to keep the code clean and readable, you can split the page into tiny atoms and place them together to build the component. I found Atomic Design pattern is a great way to do this. Usually, I use Material UI most of the time, two of the five projects are built using Material UI. Then I decide to use plain CSS as I need to brush up on my CSS skills. So, I build a tiny component library to use for the rest of the project. It turns out great it saved me a lot of time and it also help me to organize my code clean ar more readable.
React Context-API is enough to deal with the state
You don't need to use Redux, you can use React Context-API to deal with the state. I have used Redux Toolkit, Xstate and Valtio for state management. And I realized that I don't need them to manage the state, context-API is enough to meet the requirement unless you're are dealing with a complex application state.
After using these three State management libraries I found Valtio is easier to use. Xstate is a little bit more complex, but the state becomes more predictable. I need more time with Redux to understand it better, I found it a bit confusing, followed instructions to get the job done for one of the projects. For the rest two projects, I haven't used any state management library but useSWR and Apollo Client, and it went well.
Don't overcomplicate the code
Nope, writing claver code is not a good practice. Write the code that should be understandable by anyone, and it will be very helpful for you if you have to re-visit the codebase after some time. You will catch up with the codebase and you will be able to understand it better.
Don't Skip Component LifeCycle methods
If you're planning to skip this part please don't, the more you know about the lifecycle methods, the more you control you have when rendering the components.
Don't silence the warning
While building the project, I found some warning messages are coming up, and I can't figure out some of them why they are coming up. So I googled them and learn a lot of things about react which I was unaware of. It helped me to understand ReactJS better. So, don't silent the warning.
Projects that I have built
- The Ethnic Store - A E-commerce website with Authentication
- Crypto Duniya - A Platform for Cryptocurrency enthusiasts to get the stats of coins, market place and news
- The Recipe Hub - A platform for foodies who are loading for recipes to try out at home.
- The MCU HUB - A platform for MCU fans to get the movie details like cast, crew and many more.
- Mobile Hunter - A Blog to publish news and updates about mobile phones.