Showcase of React + Redux Web Application Development

Jian Li Articles, JavaScript, React, Single-Page Application, Tutorial Leave a Comment

In the last few years, React has continuously gained popularity for the development of web applications. At Keyhole, we have several blogs talking about React and related technologies, including React, Formik, react-router, and many others.

So why would we need Redux? Quite often when we develop applications, we start with small pieces. As the business requirements change, new features/modules/components are added/removed/updated. Particularly in enterprise applications, you may end up with a deep hierarchy of parent-child relationships.

In a React application, parent component-states are passed down to its child component as property. Application states can be changed in many different places. If not managed perfectly (and, in many cases, itโ€™s not), your system can behave differently than expected. It can become increasingly difficult for development, debugging, production support and code maintenance.

In this blog, Iโ€™ll talk about Redux and explain how it can benefit React front-end development. Iโ€™ll provide an introduction to using Redux with React and show a demonstration of reconstructing an example React application to React + Redux.

Iโ€™ll re-construct this React application into two projects. The first project will be the back-end server application which will handle all the typical business in the server end, like registration, authentication, database operation, etc. Iโ€™ll use MongoDB to persistent data and Node.js for REST API development. You can also reference RESTful API development to the Github repository open source khs-convo, released by Keyhole Software.

The second project will be pure front-end development, which will React with Redux for state management. React with Redux integration is the focus of this blog…

Thoughts on Application State

Mat Warger Articles, AWS, JavaScript, React 1 Comment

Use Redux! Use MobX! Just use `setState`!
Redux is functional! Mobx is reactive! `setState` is built-in!
But Redux has so much boilerplate! But MobX is more difficult to debug! But `setState` doesnโ€™t scale!
Why donโ€™t you just use Rematch to abstract the Redux boilerplate? Do I use redux-thunk? redux-saga? redux-observable?
How about using Unstated? How about just using the Context API?

:head-explodes:

There are a lot of options for developers regarding how and when to use state management libraries (SML).

Remember those last two articles (The Joy of Forms with React and Formik &ย One Router to Rule Them All: React Router) about the massively underplayed game library? There was a third part to comeโ€Šโ€”โ€Ša follow-up meant to implement an example of state management for an application. The application was small, granted, but this somewhat contrived example would tie it all up. Itโ€™d be the cherry on top. It would complete the rule of threes.ย ๐Ÿ˜‰

There is not going to be another tutorial about which state library we can use to better manage our game library. Rather, in this post, weโ€™re going to look at how and why you might use a library to manage your applicationโ€™s state, and why that particular application is a perfect example of when you might not need a SML at all.

One Router to Rule Them All: React Router

Mat Warger Articles, Development Technologies & Tools, JavaScript, React Leave a Comment

Previously, we looked at a very basic example of how one can benefit greatly by using community projects such as Formik to avoid the tedium of certain solutions while embracing convention to create composable and scalable applications. We will be build on that foundation to explore the objectively great library that is React Router.

React Router has been at the forefront of routing in the React ecosystem for as long as I can remember. If youโ€™re new to React, this is the way to go when you move state and start needing more options such as parameterized routing, nesting, and conditional rendering. If you have experience with React, this brings a powerful pattern to bear in that everything is a component. It takes the composablity of React and uses that to its benefit, handling any and all use-cases with relative ease.

In this blog, weโ€™ll introduce the basics of the React Router through hands-on examples using its features.

The Joy of Forms with React and Formik

Mat Warger Articles, Development Technologies & Tools, JavaScript, React, Tutorial 9 Comments

React is a JavaScript library for building user interfaces. That’s it. It’s a way to use JavaScript to define UI elements based on user-defined properties and internal state.

It has a clean, functional style. You can create simple components that compose very well into larger components, which you can then use to compose pages and entire applications. This simple composability is one of the main reasons I enjoy working with it.

But, it is not an application framework. It doesn’t pretend to be. This can be useful when all you want is some quick UI. But, as the application grows, you will need to depend on outside libraries for things like state-management, routing, and forms.

In this article, learn how to handle form input with React, from basic form input using simple state through advanced form components using Formik….

A Conversation About Conversations

David Pitt Articles, Conversational Apps, Development Technologies & Tools, JavaScript, Keyhole Creations, Mobile, Node.js, React Leave a Comment

We created a platform that supports developing a โ€œconversationalโ€ type application through SMS. The user experience between a user and an SMS application can be thought of as a conversation. A user texts a question or topic, and a reply is returned, then another question and reply is performed until a desired result is accomplished.

Now, this is not a universal user experience, but for many use cases it can provide an easy to deliver users functionality quickly and conveniently. There is no need to install or download apps, or pop open a browser and type in a URL; just have a conversation through your texting app.

In this blog: Why conversational applications are handy, examples of conversational applications we have created, and a walkthrough of the application architecture used to develop those SMS applications. Includes how to make texting a richer experience, state, and session handling insights.