ReactJS

Introduction

When I first started learning to code, I bought books on Python. Instead of continuing with Python, I turned to Javascript and front-end web development because that seemed like the path of least resistance to landing my first job.

Furthermore, I had already used Javascript in Google Sheet scripts, so it seemed like something I could do alongside my Python programming.

Flashforward a couple of years and the majority of my professional work is with ReactJS!

ReactJS

Frameworks are helpful tools when building front-ends, whether it's ReactJS, Angular, jQuery, NodeJS, or any of the many other options. The one that I have stuck with—and is one of the most popular among developers—is React.

React was popularized (and conceived) by Facebook and is used by other major online businesses such as Dropbox, Netflix, Uber, Airbnb, and Udemy.

React is a user interface library that makes handling data and application state a wonderful experience.

Designing Components

As a front-end developer, I build components. Components are part of a user interface that can be visual, informational, or interactive. All these components combine to create pages filled with dashboards, forms, graphics, and navigation. Finally, they come together to form the user-facing part of the web application.

Front-end Web Development

Developer Handoff

Taking designs, interpreting them, and working with a designer is an important part of front-end development work.

A few examples of components I built, based on designs from Figma, are pictured below.

On a personal level, I undertook a project to redesign my business website by finding and working with a designer.

The developer and designer must work together to build a product that works for the client and is feasible given the developer's constraints.

Data Fetching & State Management

The components above are simple in the sense that they are informational and consistent. They do not fetch data, nor do they update their state. However, the impetus of many web apps is to interact with data that changes over time.

Below is an example of a search application that:

• Is a form
• Queries the database after the user starts typing
• Implements null, error, fetching, loading, and success states for multiple components
• Allows the user to View or Download the data (PDFs) once retrieved

These data feedback states are essential to UI/UX. They are also common across web applications.

Dashboard

It's hard to imagine a web application without a dashboard. They are the control center for the user. Below is a mock-up of a complex dashboard that I helped to build for a client as part of a larger team.

Being sensitive to the client's intellectual property, this mock-up will have to be a stand-in for the dashboard implementation. However, many of the elements were implemented as seen.

Code

Although things are good from the outside, let's not forget about the application's core.

Recently, I shared one of my favorite pieces of code as a Github Gist. I was proud of it for several reasons:

1. Uses Typescript
2. Bundles and accesses state in a reusable custom hook
3. Customizes input element
4. Implements and calls backend function

Furthermore, the form uses Formik to handle input validation and form submission. The form uses a Gatsby Function, contact.ts, to call the Sendgrid API to handle sending an email to my inbox.

useHttpReducer.ts is a reusable custom hook that gives me easy access to common HTTP states. These state values (sending, error, success) help me handle user experience updates to the application.

Tools

My success in front-end development is in part due to the tools that I have incorporated into my workflow and projects. Development tools are always evolving, but they help with code readability, catching bugs, and code efficiency.

Your time is important, and so is a developer's. Therefore, it would be neglectful to not use tools to help write better code, faster. Some of the tools I use with my front-end development projects are ESLint, Typescript, Husky, lint-staged, Prettier, and other relevant extensions. Below is an example of how these tools can work together in a front-end project:

What's Next?

I sometimes ask myself, what will be next? Programming languages, technologies, and tools all serve the purpose of getting users to interact effectively with a company's product. As a developer, I stay open-minded and want to discover and use the next technology that could help me or my clients.

Although some things may change, I stay prepared to learn and adapt to do what's best for the job at hand.