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.
The Requirements
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.
The Challenges
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
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
A component is basically a block of JavaScript code – a class or a function – that optionally receives properties and returns HTML elements, forming a UI based on whatever properties were passed.
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.
2. JSX
It stands for JavaScript XML and it allows to write bare XML (or HTML) directly into JavaScript code.
Notice the return statement: this would not be valid JavaScript, because of the bare <div> and </div> tags. But in JSX, this is perfectly valid.
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
State and props are plain JavaScript objects that hold data that affects the behavior and appearance of the component. The difference between them is that state is managed and isolated within the component, whereas props (properties) get passed to the component. You can think of Props being passed to a component the same way as arguments are passed to a function.
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.
Easy start
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.
Next
In the next article, I will explain a few things about React Redux and about how to use it to structure a React application.
