Exploring React: A Full-Stack Developer's Perspective

If you don’t know, I’m a full-stack developer who develops Android and web apps for different clients. I wanted to explore more skill sets, so I started learning React. Now, if you’re unfamiliar with React, you must be living under a rock because it’s the biggest and most popular web framework for developing frontend applications. With multiple backend support, you can create a good-looking UI using React with a great developer experience, and it’s all done with JavaScript. What could go wrong, right!?

Well, I’m here today to share my experience of learning and using React to develop a full-stack application.

The application I’m developing is called Shafiq Law Chamber, and it has two parts:

1. Frontend
2. Backend

In this blog post, I’ll focus on the frontend, and in the next post, I’ll cover integrating the backend with React. So, let’s get started.

Creating the Project

To create a project in React, there are two ways: use the npx command or use the Vite command.

To create a project using npx, here is the command:

npx create-react-app my-app --template typescript

Or you can use Vite to create a React application with TypeScript using this command:

npm create vite@latest

Both are fine, but I recommend using Vite because it simplifies things.

Main Programming Language

For this project, I’m using multiple programming languages, primarily TypeScript and JavaScript. We all know React uses JavaScript, or you can opt for TypeScript. For this project, I decided to use TypeScript. When TypeScript was first launched, I wasn’t a fan. But now that I’ve used it, it makes a lot of sense.

I really like TypeScript, especially for this project. When it comes to configuring TypeScript with React, it was challenging at first, but over time, I’ve come to appreciate it. It’s much better now—one simple command to set up TypeScript, and debugging is easier.

Example

When I was designing the contact form page and needed to get the values from the form, TypeScript threw an error, saying that I needed to define data types for the variables. That’s when I realized how, in the past with JavaScript, these errors would only show up at runtime. This made a lot of sense to me.

I use Flutter, which also uses types, and this whole type-matching system fits perfectly for me.

Tailwind CSS

I love Tailwind CSS. It’s simple to code and makes things fun with inline CSS and default themes in the config file. It’s awesome. Installing Tailwind CSS can be a bit rough, but other than that, it’s easy and good to use. It also takes care of UI for both web and mobile. No need to write separate CSS for mobile—Tailwind handles it.

React

With everything explained and set up, let’s talk about React. You have to agree there are some pros and cons to using React.

Pros:

• Modular Component Code
• React DOM
• Load pages without reloading the entire site
• Live Development Environment

These are some of the things I love about React. It’s very much like Flutter—the reusable components can be called again and again when needed. The whole site doesn’t need to be reloaded when moving from one page to another. Running the local server with just one command makes things easier and errors easier to locate.

Cons:

Here are all the cons I encountered while building this project:

• React Hooks
• Adding Support for .env File
• Adding Firebase
• React Queries

While building this project, I faced several challenges. Implementing React Hooks was difficult, particularly in managing state and side effects. Adding support for the .env file also presented issues, as configuring environment variables across different setups was tricky. Integrating Firebase was another challenge, from setting up authentication to managing the real-time database. Additionally, working with React Query brought its own complexities in data fetching, caching, and synchronization.

Image Optimization

On the web, loading images efficiently is crucial. You don’t want users to have a bad experience. In Flutter or any other platform, you can use a package called pre-caching, which I’ve used a lot for loading images into the UI. But in React, I’m still figuring out how to do that.

To this day, I’m searching for a way to optimize images while ensuring they load quickly and with good quality. If I find a good solution, I’ll let you know in the next blog and video as well.

New UI Libraries

I come from Flutter, where I mainly use the Material UI library. But I didn’t know that React has a huge set of predefined libraries for the UI, such as MaterialUI, Chakra, and NextUI. These libraries are simple plug-and-play with customization options, and many use Tailwind under the hood, which makes designing the UI much easier.

If I had known about this earlier, it would have helped me a lot in designing the UI.

Conclusion

What’s my conclusion for this blog and video? I think React is great. I don’t understand why people dislike it so much. Or maybe I’m not knowledgeable enough yet to make a final judgment. But as of today, using React in this project, I’m loving it. The modular and component-based way of building websites is familiar to me.

I like React for now, and I’ll let you know more in the future.

Until then, peace out, nerds. 💕