Category Archives: React.js

Forms in React & Other best Form libraries you might need

Before diving into different Form Libraries in React/Redux, please lets first understand Forms in React.

Forms with controlled components

 

Well, In most cases, React officially recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component itself using setState(). Thus you need to write an event handler for every way your data can change and pipe all of the inputs into React component.

Examples-

Forms with uncontrolled components

Sometimes it can be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component.

First of all now understand what is uncontrolled components where in you can use a ref to get form values from the DOM. Where form data is handled by the DOM itself.

So here are some reasons to use Forms with uncontrolled components –

  • Integrating a React application with a non-React library.
  • Converting a preexisting codebase to React
  • Managing state will be tedious

Examples-

Form Libraries

Now lets dive into some other best Libraries which you might want to use. Here are some curated libraries by popularity.

 

 

Although there are many such libraries we restrict ourselves to comparing two of the most commonly used libraries Formik and Redux Form.

Well, if you want to have more detailed comparison of mentioned libraries, you can read it over here.

Over the time i am working on redux projects. Hence i always prefer to Redux Form.

Additionally for validation part you can prefer to use validator.js (A library of string validators and sanitizers). It will be great choice for validating string fields and still you can write your own custom validators as well.

In following section will create an sample Settings page with Form having different settings using Redux Form. So files will be —

  • form-helper.js — Having HOC to render input field with Label & Error messages, different validators such as Email/Required.
  • SettingsForm.js — Actual Form, Just like a dump component
  • SettingsPage.js — Parent component for SettingsForm which will handle Form submission

Code in Action –

 

.form-error {
  color: #ff0000;
}

Thats it!

Still which library you have to use depends on Customisations /complexity/easy to create/easy to validate/Non react library and so on. So choose wisely before selecting one with many stars.

If you think this is a good read, don’t forget to give me a 👏 also don’t forget to share this article with others.

Advertisements

Analyzing the Bundle Size & Code splitting in Create React App

 

react-loadable-webpack

TLDR: You can clone/download cra-boilerplate from github and see how Code splitting is implemented.  

Create React App(CRA) by default bundle out entire app into single main.*.js file with Webpack. As our app grows, bundle grows. Bundling is the process of following imported files and merging them into a single file: a “bundle”.

So instead of downloading the entire app(This hurts the initial load time of our app.) before users can use it, We can split code into small chunks which we can then load on demand and Code splitting is really helpful for larger React apps.

Continue reading Analyzing the Bundle Size & Code splitting in Create React App

Integrating create-react-app, Redux, React Router, Redux observable & Bootstrap altogether

TLDR; You can clone the example project to quick start from GitHub repo and walk through codebase.

image

create-react-app (CRA) is awesome with the power of react-scripts.

Although when it comes to complicated single-page applications, we need –

  • Routing
  • Central state/data container like local storage
  • Aysnc actions handler
  • UI framework
  • CSS preprocessors… and so on as per individual need.

Now lets dive in to create one full fledged single-page application with CRA and other great libraries.

Continue reading Integrating create-react-app, Redux, React Router, Redux observable & Bootstrap altogether

Create-react-app managing different environments easily

This article explores how to build with configuration for a specific target environment.

create-react-app supports an environment variables which we can use to build with configuration for different environments (e.g. staging, production). I managed them by copying respective environment file on the fly to default .env file on the fly & before running actual build.

I am assuming that you are familiar with how CRA(create-react-app) manages environments & dotenv module.

Continue reading Create-react-app managing different environments easily

React + Redux and Application development basics

React

React is simply great framework for any kind of projects. And its much powerful when it used with Redux.

So building react redux app was a cool and innovative expreicence. React is popular for its component based and decalrative approch for creating rich UIs. Also you can use same code to create mobile cross platform web apps using react-native too.

As react is just UI library and its not sufficient to build whole application. In conjunction with React you might need react-router for routing, flux – application architecture for apps, Redux – an state container for your app, react-bootstrap for using Bootstrap components in React and many more. Or you can simply use React as V(View) part in MVC* frameworks such as Backbone js.

Its complete your choice and depends on your need. But out there peoples working really hard to make React world more better everyday.

Continue reading React + Redux and Application development basics