In this article, I will cover my ReactJS tech stack in which you might be interested. I will showcase what options are available in the market to start on a ReactJS based application.
ReactJS (with TypeScript)
People often use create-react-app for their ReactJS project. The default setup comes with ES6 syntax, but you can also switch your default installer to install TypeScript based ReactJS App.
# Default install command $ npx create-react-app my-app # With typescript $ npx create-react-app my-app --template typescript
When it comes to developing medium to large-scale applications, I would prefer to use React Router. This helps you to define your routes for your single-page application projects. React Router is a collection of navigational components that compose declaratively with your application. Whether you want to bookmark URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering.
$ npm i react-router
There is two kinds of state managements we have in ReactJS based application.
It is also known as an internal state of a component, which can be managed by your component itself. For example, you can use the
useState() react hook to manage the state in a functional component. Similarly, by using react lifecycle methods you can manage state in the
The application-level state is similar to the component state but works on the application level. For example, if you want to change the shopping cart count when someone adds a product to the cart. You need an application-level shared state which can work as a single source of truth for your application state. There are a couple of options to go with but I prefer using Redux library. It is a powerful library to handle a predictable state for your application. You can install this library as the initial setup of your ReactJS project.
# This command provides react boilerplate with redux $ npx create-react-app my-app --template redux # For existing ReactJS projects $ npm i redux
Tip: You can explore redux-toolkit in 2021
When it comes to handling user inputs, forms are required. Forms can easily mess up your project. I would suggest carefully choose form-library in order to add validations and state handlings. There are some form libraries to choose from. I would prefer to go with React Hook Form or Formik. Both libraries are very performance-oriented and have good community support. You can easily customize them, and use them as per your needs.
One of the most important parts of every project. It’s been a couple of years since I came across React Testing Library (RTL) which comes as default testing library inside your create-react-app project. This builds on top of DOM Testing Library by adding APIs for working with React components.
You can use this library in your old ReactJS project as well
$ npm i -D @testing-library/react
Storybook is an isolated library that can help to showcase ReactJS based components from the end-user perspective. It simplifies building, documenting, and testing UIs. You can develop presentational components even without having backend services in place.
# Following command will automatically detect your project type $ npx sb init
NextJS comes with lots of built-in features which will surely take time to build if you want to build them from scratch. It has default support to server-side rendering which helps you to make better SEO-friendly applications. It also has built-in support to TypeScript.
$ npx create-next-app