Introduction

React is one of the most popular front-end framework at this moment and to start with it is not so difficult but there are many options out there in market. What options we can install first? In this post I will talk about several setups that I have used.

Getting started

Choose start kit to start with

The popular kits to start with are

• Create React App, this one is becoming more popular and it is lightweight, has build tool, dev server, tests. Create React App also supports typescript
• NextJs, this one is my favorite one. NextJs has builtin many things that are ready for product development which are routing, api setup, build tool, tests.
• Remix, Remix is introduced later than the above two but it is getting more attentions recently. Remix can be compared with NextJs as the two provide ready stack to develop products.

UI components or build your own

if you decide to build your project based on an UI library then there are several libraries that are popular on markets.

• Material UI, https://mui.com/. This lib has just rebranded their components. They also offer professional support. There are two parts in the lib: core which is stable, lab contains more complex and some of them are experimental.
• Antd, https://ant.design/docs/react/introduce, this one is also a popular which provides a handful of components that are ready to build products.
• BluePrint, https://blueprintjs.com/
• Semantic React, https://react.semantic-ui.com/. This one provides many components as Material UI. I prefer Table and List components from semantic which are easy to use.
• React-Bootstrap, another popular components lib.

CSS integration

either you choose to build on your own or on a ui library you might still need a css lib for styling. My tips are:

• **@emotion/css **or styled-components. These two are very similar and easy to use. Styles will be modularized.
• tailwindcss, https://tailwindui.com/. This is functional css, your styles will go with your markup. This is my favorite recently.

State management

My tips is always start with something simple first before looking for something more advanced.

• React Context, builtin in react. I feel comfortable with what ReactContext offers. I usually use it with HoC and hooks.
• Redux, a popular option. I think it is needless to say how redux is popular. There are many plugins to redux to facilitate multiple scenarios when developing as well. But redux is not my first choice at this moment because I think it needs to take many steps to achieve same things as I can do with other libs.
• Recoil, this is one is simple to use and intuitive.

Making requests

Beside fetch is native we have several options such as:

• axios, my favorite one, easy to use and powerful when we need to intercept.
• appollo client, if you use graphql then this one will fit your needs perfect as well.
• useSWR, https://swr.vercel.app/, from nextjs, modern react api and has cache function.
• react-query, this one is popular one as well with similar features as useSWR

Routing

If you do not use nextjs or remix, you might need routing for your app. The most popular one is react-router

Form managements

if your app has inputs for users to send to the system then you might need a form lib to handle multiple forms. There are several popular alternatives such as:

• react-jsonschema-form, this lib has multiple integrations with popular ui libraries like MaterialUI, Bootstrap. if you need to create quickly multiple forms in short time then this lib is an option. If you want many custiomizations in your forms then this one might not fit.
• formik, this one provides both components and hooks for writing form easily. Validations can be integrated with Yup schema. Formik can be integrated with any ui lib easily via hooks.
• react-hook-form, this one is similar to formik however my personal experience is that formik is easier to develop further.

Testing

Jest, @testing-library/react are often found in the popular kits. To test your applications you might need further libs for testing making requests for example.

• nock, can be used for testing components that make requests to server.
• identity-obj-proxy, for testing components that require static files such as svg, images.

Conclusion

So that is it! what I have tried and been using so far with React projects. In this post I did not mention several classic options like sass for handling styles,.. because I just want to mention new trendy options to work with.

This post is originally published at https://www.hittaducmai.se/blogs/start-a-new-project-with-react