Using Lexical this in JavaScript Class Method with ES6 Arrow Functions
The way JavaScript handles scope is unique. It makes the language so fascinating to learn. It is so different from any other major programming languages. JavaScript has many quirks that make it so fascinating, such as its asynchronous nature, event loops, prototypes, closure and so on. I think this is …
Calling Async Function in Action with Redux-Thunk
Redux-thunk is a simple middleware that enables you to call functions in redux action. Thunk means function returning function. In JavaScript programming, we use thunk all the time although we may not use the name. Wikipedia has a simple example of thunk if you are interested. As the name suggests, …
Setting up Unit Tests for React with Mocha, JSDOM and Enzyme
Before start coding your awesome React app, it is always a good idea to set up unit test infrastructure. Once test is set up, you can write tests whenever you feel necessary before waiting to complete the entire app development. Mocha is a JavaScript test framework that runs on Node.js. …
Refactoring React ES6 Class Components with Property Initialisers
“Proprty initialisers” is an experimental ES6 JavaScript feature that allows you to write React class components without constructor and bind this. It creates cleaner React class component. The use of this syntax is so wide-spread and calling it experimental (because it is not yet ratified) feels almost misleading. Before getting …
Clarifying Which Babel to Use for Compiling React Today
Babel is a toolchain to transpile new JavaScript syntax (e.g. ES6) down to older versions that is supported by browser or node.js execution environments. The latest major version at the moment is Babel 7. To transpile JavaScript React, we normally use bable. The problem is that babel is evolving so …
My Gulp Job Example
Gulp is a build tool that automate application builds. It is usually used for front end build, but you can also use it for backend application build (e.g. automating .NET application build with gulp-msbuild). When it comes to front end build automation, gulp is the most flexible and powerful build …
Customising Cognito SignIn UI for aws-amplify-react with TypeScript
Let’s assume you are having trouble with customising Cognito Sign In UI for aws-amplify-react with TypeScript and have already know what AWS Cognito, aws-amplify and aws-amplify-react. Customising Cogito Signin UI is easy with JavaScript React. All you need to do is to extend the SignIn class in aws-amplify-react with a …
Getting Redux DevTools to Work with TypeScript
Redux DevTools is a chrome extension that enables developers to see Redux state change in the browser’s console. This post is a quick reference to set up your TypeScript react file so that you can debug your code with Redux DevTools. For normal JavaScript, it will be easy. You can …
Adding CSS Support for TypeScript React
Let’s extend the previously build Webpack TypeScript React project to include CSS support. For a small application or widget, it is better to bundle CSS with JavaScript code. This post focuses on getting Bootstrap and styled-jsx working for a React project with TypeScript. Styled-jsx enables us to inject CSS style …
Setting up Custom Webpack for TypeScript React
The easiest way to get started with React on TypeScript is to use create-react-app for TypeScript. As create-react-app uses webpack, you can eject config files by running npm run eject for further customisation. What about building the project and webpack config from scratch? It is sometimes good to give it …