A tour guide to ReactJS Ecosystem

ReactJS is a very popular front-end library for building UI components. That being said, React is actually what it says, a library for building UI components.

There are many front-end features that React does not support by default (unlike Angular), thus we have to decide which tech to use on a specific task.

As a result, we have to cherry-pick dependencies and Google things like how to have multiple pages and routes in React, until we end up with tons of browser tabs open.

So in this blog, I'll be talking about some of the common tech used alongside React (which I also use myself) to cutout your research and go straight to the topic or tech.

If you're learning React, this blog can serve as a roadmap to guide you through the ReactJS wilderness.

The React Ecosystem

Alright, so we will be tackling the common front-end tasks and the (popular) technologies used for such purposes.

State Management: Redux

Managing state is one of the most important aspects in React. And for this, I'll be talking about Redux.

But isn't React have in-built support for handling state?

Yes it is, and with hooks, we have useState, useContext, and useReducer. So why should we learn Redux then?

There are many reasons and motivations why.

Maybe you're opting to become a React dev. In that case, take note that hooks are just released a few years ago, while React and Redux are out in the wild a longer time before hooks. That means there are legacy codes that you may work with, and it's highly likely that they use Redux.

Likewise, the in-built state management solutions by React are only ideal for smaller apps. Redux actually shines if the project is large. There are many benefits Redux brings to the table, like easy debugging, but I won't be talking much about those as this will get much longer.

So in Redux, we have the following to keep in mind when managing state:

• Actions
• Reducers
• Store

Redux is awesome and powerful, but it also comes with too much boilerplate. The dynamics of state management with Redux is complex and will be overkill for smaller apps, but in essence, the front-end components just have to subscribe to the store to get the current App state. The components also are given dispatchers as they cannot change state themselves.

Tip: With React, another dependency is used alongside Redux
called react-redux which makes it easier for react to
work with redux and subscribe to the store.

You can find out more in Redux Documentation.

Routing: React Router DOM

React is used to build Single-Page Apps.

But what if your website has more than one page, like an e-commerce site?

In this case, we need Routing, and the (most popular) tech used for this purpose is the React-Router DOM. With React-Router DOM, we can build React Apps with multiples pages and navigate the site without the need to refresh the current tab.

You can read more on React Router from their Documentation.

Form Handling: Formik

In React, we handle the form and it's state ourselves by using onChange event. For simpler forms, tasks like these are just a breeze. But working with a larger form (i.e. online application form, booking form, etc.) will be pretty daunting. Things like form validation and preventing XSS can become complex really fast.

Formik helps solve this problem by providing an intuitive API to easily handle forms for us.

You can check out more on Formik Documentation Here.

Components Library: Material UI/Chackra UI

These are actually optional especially if the company you're working with have their own styles and components. But if they suggest or requires you to do so, or you're working for your own project, Chackra UI and Material UI are among the best Components Library out there for React. You can take advantage of a professional design and layout so that you can focus more on code and building the App.

Material UI was maintained by Google and reflects their years of research in UI. So yes, we're standing on the shoulder of giants here. By using Material UI, we can leverage their professional design.

Chakra UI is also as awesome and professional as Material UI. There are many professionally designed components there ready for us to be used on our next project.

You can check out more about Material UI here and in Chakra UI here.

Testing: React Testing Library

Testing is as important as development. In fact, we should write tests before we develop (it's Test Driven Development). This practice makes us more focused on what we're working on while also ensuring that our website or app will not suffer from an unexpected bug or crash without knowing which caused it and how to fix it.

That's why we have testing.

The React team recommends (and uses by default) the testing library, more specifically the react-testing-library for us to write unit tests.

The most common approach on writing test suites is to include the test files alongside the code and components that each tests, and naming the test files exactly as the module it is testing with an additional .test.js (which is like this: module-name.test.js.

With testing library, we can write test for common functions and codes, and also for components and their behaviors.

You can check out more about React Testing Library here.

Let's get in touch!

Follow me on Twitter