Planning A ReactJS Application
A very complex idea can be turned into beautiful user-interface with the help of ReactJS. More complex an application is, more you have to organize and be selective about it.
This article contains basic and advanced fundamentals that a Front-end developer should know before developing an application with React.
Planning an application carefully is very important, It’s very hard and sometimes impossible to scale the application if it’s not planned initially. You got to know the pro and cons of everything before development.
If you have basic clarity about things that you are using and how will they behave, I am sure you can create a masterpiece with React.
This article is for those who want to use React in their projects and wants to build an application that needs to be scalable in the future and run smooth and flawless.
This article contains points that you can follow step-by-step to build the outstanding project. From creating a layout to launching everything should be well planned for a perfect outcome.
A layout is the foundation of any project. It should follow certain pattern and theme to organize better for development and also for the design itself.
Breaking things into smaller components and using them in different places helps in scalability of the application.
2. File Structure
Having a good file structure is very important. It’s better to plan it in the start and follow certain patterns for files and folder structure.
We know that it Directory Structure has nothing to do with computer or compiler but this is what we see every day and should be structured perfectly so we can work more productively.
There are no certain rules for this but it should be easy to follow and should be obvious to everyone. Below structure, I like the most.
3. File Names
A file name should describe what task that file does or what it is about. Let’s say a file has ‘Header’ component then the name should be something like header.js not some random irrelative like index.js
It’s also better to follow certain pattern for the name for e.g.
fileName, FileName, file_name, file-name etc.
4. Back-end APIs
Sometimes developer programmes back-end without considering the layout on the mind and that’s not a good thing. It has bad consequences. APIs should be planned how it fits with the layout.
There shouldn’t be a lot of APIs. Building API for each and small thing is not good for the application. It is hard to integrate and slow downs the performance.
Every API calls take time to respond and because of that application might feel slow if we have a lot of API so it’s better to plan them efficiently.
If you are building a website than responsiveness is also the major point. There are three ways a website can be built for different sized screens.
5 .1 Using CSS Media queries
Most websites are built this way. One of the reasons behind selecting this option is that it saves time, money and effort. You should prefer this option If the layout is made in a way that just by doing some CSS changes it can be organized for each screen.
5.2 Dynamic serving
This option is good if you want to use the same URL but different code. Let’s say if you want to use different files for different sized screens then, you should consider this option.
It might be a little hard to manage but you shouldn’t worry about that if for some reason you decided to use the same URL for the different sized screen.
5.3 Using different URL
This is the more sophisticated way of creating different websites for different screens. You will have to use different URL in this case for e.g. ‘m.example.com’, ‘example.com’.
6. Data Flow
To manage complex data in client side a certain kind of pattern needs to be implemented. There
must be some pattern of data otherwise you will end up messing up your app.
Remember React is just a view library it has nothing to do with how you control your application. There are few external libraries that are extremely good at managing the data for the app. Using Redux with React is best possible option for now. It’s very easy to use. There are plenty of middleware for Redux that can help in many ways so you can confidently go for it.
Components are the heart of React. Reusability of the components makes the code more organized and efficient. Never build the same component twice instead use the same component in different places just by passing the necessary data as props.
Building smaller UI components and then using them is what makes react great. Each component has its own lifecycle and Renders intelligently based on the changes of the state.
Many times same logic needs to be used at multi places. It’s better to write all the logic at one places instead of rewriting it at different places. In that way, you’d be able to modify the logic better and it also helps to debug better.
9. Essential libraries
There are some libraries that are good to use. These libraries are really worth full. I can’t really see why one shouldn’t use those
Redux – To manage the overall state of the application
React Router – For managing routes
Axios – To make api calls
Redux Thunk – Middleware for Redux