State Machines Using XSTATE

An Introduction to State Machines Using xstate

Mat Warger Articles, Development Technologies & Tools, JavaScript, React, TypeScript 1 Comment

State machines are an old concept. They are a proven solution that provides a solid architectural foundation for application processes. In this article, I hope to provide an introduction to what they are and how they can be useful for a modern web or mobile application engineer. We’ll be focusing on one library in particular – xstate – and how it can allow anyone to easily leverage state machines for managing global or component state.

The Extras of React

React, The Extras.

Chris Berry Articles, Development Technologies & Tools, JavaScript, React, Tutorial 1 Comment

Weโ€™ve all seen and read the React tutorials. We know about classes and components and JSX and whatnot, but then there comes the time when you have to start doing things for real. โ€œRealโ€ you say? Yes. Like connecting to a database or navigating around something larger than โ€œHello World.โ€ Oh, then there’s that dreaded state thing. Well, letโ€™s have a quick talk about the โ€œExtrasโ€ that we can add into a React application.

In this blog, we will address adding routing using the React Router, adding data access using the JavaScript Fetch API, and creating a global state management feature using Reactโ€™s built-in Context API.

Formik with React

Got Formik? Yup!

Chris Berry Articles, Development Technologies & Tools, JavaScript, React, Tutorial 3 Comments

Let us present this scenario. Youโ€™re building a React application, and youโ€™ve been tasked to build a registration form. Seems simple enough, you think at first, but then you start hearing the requirements. The application needs to have validation on each field, and each field needs to have certain requirements, such as being required, being a certain type of field, having a certain length, etc. Your form must also be easily created and have an easily adjusted state during its usage. At this point, something you originally thought would be quick and easy is seeming more and more time consuming and complicated!ย 

Well, worry no more and look no further; the community has come to your rescue. In this post, weโ€™re going to talk about using the form library called Formik and the validation library called Yup to build out a simple validation form inside of a ReactJS application.

React vs. Angular: A Comparison Between Two Great Options

Robert Rice Angular, Articles, Development Technologies & Tools, JavaScript, Opinion, React 2 Comments

Both React and Angular are very popular front end development frameworks. In this post, I will discuss the similarities and differences between the two, and consider when one should be used instead of the other.

React is an open-source JavaScript library introduced by Facebook to build dynamic user interfaces. It is based on JavaScript and JSX (a PHP extension) and is considered widely for developing reusable HTML elements for front-end development.

Angular is an open-source front-end development framework powered by Google. It is a part of the MEAN stack and is compatible with a large number of code editors and is considered for creating dynamic websites and web apps.

In this post, we will begin by going over the benefits of React and Angular, then break down the differences between the two frameworks using thirteen attributes. By comparing each framework side by side, it can help decide which is the best framework for your specific app project.

Spring Boot and React: Happily Ever After

Matt McCandless Articles, Development Technologies & Tools, React, Spring, Spring Boot Leave a Comment

So you have mastered Spring Boot and started toying around with React. Now you want React to talk to your Boot app as your back-end API. Thatโ€™s fabulous. You probably already know how to do this, but there is a kicker. You want to package them and start both of them as just one project.

Well, youโ€™re in luck! This blog is going to take a couple of simple projects and combine them into one project. Lace up your boots and get ready to React!