This is the first section of the third part in this book. In this part, we'll do spend more time coding to prepare ourselves for migrating the file.io app vanilla JS app to React. We've already decomposed the file.io into components. We've a good idea about the app design. We're ready with the list of components.
Development environment
Let's start the work by setting up the environment & dependencies.
We'll create two folders in the root directory:
server: This will contain the server code. This will run separately. The server code will be similar to the server of vanilla app except for a couple of server routes that are not required in React.
client: This will contain the React code. The initial code will be generated using create-react-app. Some code will be removed that we don't need. Additional dependencies will be added.
Now, let's copy the server code from the vanilla app. The server app for React based file.io doesn't need the following:
Static file server (handled separately by client part of this app)
Redirection of / to /upload.html and /:file to /download.html. First, there are no such files like upload.html or download.html. Second, this will be taken care by a package called react-router which is part of the client app.
The server port is changed from 3000 to 3001 because port 3000 is used by webpack development server.
The server side part (or you can call it the backend part) of the React file.io app needs to be started in a separate terminal. This is different from the vanilla app where the server provided both the client and API code.
The client code has been generated by the create-react-app utility. We need to make a couple of changes to it:
Remove the code/files that we don't need
Add additional dependencies like react router, bootstrap, QR generator, and sweetalert
After removing the unwanted files, the client code looks something like this:
We'll need to add four dependencies to the project:
React router
Bootstrap
QR generator
Sweet alert
In the vanilla world, we were loading bootstrap, QR & sweetalert from CDN. Of course, there was no react router in the vanilla world. We can use CDNs in React world too, but we don't have to. We can use NPM packages for all the required dependencies. Later, these dependencies will get clubbed using webpack.
The following are the instructions to install required dependencies:
react-app/client: npm i react-router-dom --save
added 3 packages, and audited 1490 packages in 2s
~/Work/source/React-learning/learn-react-by-example-file-io-app/react-app/client: npm i bootstrap react-bootstrap --save
added 19 packages, and audited 1509 packages in 3s
~/Work/source/React-learning/learn-react-by-example-file-io-app/react-app/client: npm i react-qr-code --save
added 2 packages, and audited 1511 packages in 6s
~/Work/source/React-learning/learn-react-by-example-file-io-app/react-app/client: npm i sweetalert2 sweetalert2-react-content --save
added 2 packages, and audited 1513 packages in 2s
Finally, let's update the app by:
Removing App.css
Removing generated code from App.js
Importing bootstrap at this level because bootstrap is a global CSS
Testing out bootstrap by adding a simple HTML code
Just for verifying the dependencies, we'll also import QRCode component from the react-qr-code package. This component can be used just like any other react component. Later, we'll remove QRCode beacuse QR's usage is only inside the FileAccess component.
This needs a quick check. Let's open the page and find it out.
We can see that the imported bootstrap CSS is working fine. The famous btn-primary in visible in the right font and style. The QR code component is also able to generate a QR code. We're ready with the environment for the file.io app.
--
That's all about setting up the app for migration. In the next section, we'll cover routing.