Starting React.js in 30 seconds

When you think about React, it is basically a Javascript library rather than a framework. This means you can import React library in the script tag in your html file and write an inline code, just like jQuery.

I previously wrote a post about setting up React development environment by using Node.js and creating a local server. It is fairly lengthy process and can be challenging if you are not used to web development.

React doesn’t need to be that complicated. If you want to do something with React, you can simply import a few libraries before the closing body tag and start writing React within the Script tag in the same html file. It really takes less than 30 seconds.

Here is what you need to do.

Set up a simple HTML file and import 3 libraries before the closing body tag as below.

Then set up the script tag below. You can straight away create a React component that renders in the div above.

That’s it!

Ok, here is a quick example of React button that randomly changes Bootstrap class as you click. Look how easy it is to integrate Bootstrap with React!

Now, you are a React developer. Cool!

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …