Some months ago, I was given a new assignment which was to rebuild an application based on an already existing one but this time we were supposed to rebuild it using React.
This article is the first of two articles where I will talk about what I found out about React and React Redux.
My application had these main requirements:
- Allow end-users to upload excel sheets into a table in a database.
- Allow end-users to add, delete and update single records.
- Keep the look and feel as similar as possible to the current version.
- Validate the data using some rules to ensure the data meets with the criteria required.
Use a specific backend developed by Just-BI.
When starting a new project with a new framework, there is always the challenge of finding out how to do what we need to do using this new framework. This always require some research and potentially some trial-and-error.
In this particular case, developing an application based on an existing one while keeping look and feel as much as possible posed a new challenge, because the new application will always be somewhat different. Therefore, we need to deal with the user expectations and get them to accept these differences.
React is currently one of the most used and accepted frameworks. It was originally created by Facebook, and currently has a very big, active community supporting it.
Of all of its features, I would like to point out some of them in particular: Components, JSX, and the uni-directional flow of data and events.
1. React is component-based
These blocks of code are reusable, and are completely isolated, allowing them to safely manage their own state. Due to this encapsulation, it is impossible for one component to accidentally change the state of another component.
3. Single-Way flow of data and events
In React, data is pushed down from the parent components to its child components as properties. Components push up events, flowing from child components to their parent.
State and Prop
A component can change its own state by calling the function setState(). However, components cannot change their props directly, because they are read-only.
App File Structure
Structuring folders and files independently of the framework we are working with is a painful job most of the time. The important thing is to keep some logic behind how everything is organized.
At the end there is not a magic template or predefined structure that suits all the cases. The most advisable thing to do is just try out some different ways, keep an open mind and of course to stick to whichever structure we decide to apply.
In my case I used the create-react-app command which saves a lot of time when setting up and configuring a React application:
This gives us a very easy initial structure.
In the next article, I will explain a few things about React Redux and about how to use it to structure a React application.