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.

Expression Parser with Antlr4

An Antlr4-Based Expression Parser

Lou Mauget Articles, Development Technologies & Tools, Java, Programming, Python 1 Comment

In this blog, weโ€™ll present a simple arithmetic expression parser implemented through an Antlr4 parser generator. It will be able to take in an input string (such as 2+4+-4+-2*10%9*7) to produce the result (-12.0).

You may be thinking, “Great, but whatโ€™s the point?” Well, to answer your question, as simple as this example may seem, the principles involved actually extend to use cases such as DSLs, transpilation, and anything else expressible by grammar rules.

This post has two parts. In part 1, weโ€™ll discuss the background components of a parser. In part 2, weโ€™ll cover building the demo and running it. If you already understand grammar parsing, you could skip part one.

Go With A Vue

Chris Berry Articles, Go, Vue.js 1 Comment

Last year I blogged about creating a Lean Mean Vue Machine called Quotes on Demand. The application was a fully-featured CRUD application served from a NodeJS server and had a self-contained VueJS front end. Since then Iโ€™ve also added a Python version of the same API.

But wouldn’t it be a nice test to see if that same Vue application could switch over to another API – say, something like a Golang application server?

In this post, we will create a Golang application server that will have 100% parity to an existing NodeJS web application. This will enable an existing VueJS front end to connect to the application with no additional code changes in the user interface code.

A Vue of Python

Chris Berry Articles, Development Technologies & Tools, JavaScript, Node.js, Python, Vue.js Leave a Comment

Earlier this year I blogged about creating a Lean Mean Vue Machine called Quotes on Demand. The application was a fully featured CRUD application served from a NodeJS server and had a self contained VueJS front end.

But wouldn’t it be a nice test to see if that same Vue application could switch over to another API, say something like a Python web server powered by Flask?

In this post, we will create a Python web application that will have 100% parity to an existing NodeJS web application. This will enable an existing VueJS front end to connect to the application with no additional code changes in the user interface code.