8 - (Re)Designing file.io for React

Armed with the knowledge of components and JSX, we'll start the file.io service migration work from vanilla JS to React. In this section, we'll break down the service into small, manageable, and reusable components. This is very important in the React world. It is not advisable to write a single component that does everything.

Note: Once the migration is complete, the usage of React for this app will feel excessive. The vanilla app that spans over 2 HTML, 3 JS and 1 CSS files will now span over around 10 JS files & 10 CSS files. It is natural to feel that the vanilla app was more concise & easier to develop. That's true. But only for this case. When you start working on real apps, you'll see that the components will run into hundreds. In those cases, small & manageable components will make a big difference over the spaghetti JS code (tens or hundreds of thousands of lines of code) that goes in the traditional world. Of course, there is a reason why everyone is using React over other technologies.

Decomposition

The file.io app has two main screens:

• Upload a file: This screen provides a way to upload a file and get the URL with a QR code.

• Download a file: This screen provides a way to download a file

React recommends small & manageable components. But React is not going to come after you if you don't follow the guidelines. At first look, the upload functionality can be divided into three child components:

• Header

• Main upload functionality (MainUpload)

• Footer

The download functionality also follows the same structure: a header, main download functionality (MainDownload), and a footer. This makes header and footer small & reusable components. Here is a look at the first decomposition:

We've just divided the file.io service into four components:

• Header

• Footer

• MainUpload

• MainDownload

However, we're missing the conditional part. When a file is uploaded, we get the URL back. The URL is used to generate a QR code. Therefore, the MainUpload component has two states that are mutually exclusive:

• Select file to upload

• Show access details for the uploaded file

Either of these will appear, not both.

With further redesigning, we have more components:

• Header

• Footer

• MainUpload

• FileUpload

• FileInfo

• UploadAnother

The reason to separate UploadAnother is that it is used by MainDownload too. Let's repeat the same exercise for MainDownload. The MainDownload also has two states that are mutually exclusive:

• Download a file

• Error out if file doesn't exist

Either of these will appear, not both.

With further redesigning, we have more components:

• Header

• Footer

• MainUpload

• FileUpload

• FileInfo

• FileDownload

• FileError

• UploadAnother

There is one more possible division we can do:

• The 'Download file' heading is common across FileDownload and FileError. We can move it to MainDownload.

• The file info and file size is shown in both upload and download screens. That can be made common.

With the last re-designing, the screens now look like:

That finishes the re-designing of the file.io for the React world. The final list of components is:

• Header

• Footer

• MainUpload

• FileUpload

• FileInfo

• FileDetails

• FileAccess

• FileDownload

• FileError

• UploadAnother

Again, it might seem excessive to do this much work for a simple file.io app. We've intentionally chosen a simple app to learn the React concepts while migrating the app. The real world apps will be much more complex, therefore the React principles will make UI code manageable and maintainable. Imagine running into a few hundred thousand lines of JS code with hundreds of small & reusable components.

The following is a diagram showing all the components and their relationships:

--

That's all about decomposing the file.io app into small & manageable components. This important section demonstrates one of the core design philosophies of React: Small & reusable components. The part 1 of this book covered introduction to React and file.io service in vanilla JS. The part 2 (this part) of this book covered development environment, app structure, JSX, and decomposing file.io into React components. This is the end of part2. In the next part, we'll learn some basics of React such as routing, props, states, API calls, and simulating clicks. Then only we can think about starting to write code to migrate the file.io app. We'll start from the root and go to the leaves. Whenever you're ready, we'll see you in the part 3.