Create React App and the Production Build

Image for post
Image for post
Image credit: Author

Create React App is an integrated toolchain for the best user and developer experience. It has many things out of the box that we can jump onto and start coding immediately.

After finishing development, we need to make a production build and deploy it to a server. In this article, we walk through the build and deploy process.


Run Create React App in Development Mode

Install Create React App, and run it out of box:

npx create-react-app my-app
cd my-app
npm start
Image for post
Image for post

Form the Network tab, we see 10 requests in the development mode:

  • bundle.js: the Webpack bundle…


Learn the exponentiation, nullish coalescing, optional chaining, and pipeline operators

Image for post
Image for post
Photo by Shahadat Rahman on Unsplash

Technical Committee 39 (TC39) is a group of JavaScript experts who work on the standardization of ECMAScript.

The TC39 process has a number of stages:

  • Stage 1 (Proposal): Propose the high-level API for review.
  • Stage 2 (Draft): Precisely describe the syntax and semantics using formal spec language.
  • Stage 3 (Candidate): Designated reviewers have signed off on the current spec text.
  • Stage 4 (Finished): The addition is ready for inclusion in the formal ECMAScript standard.

After stage 4, proposals will be included in the next revision of ECMAScript. When the spec goes through its yearly ratification as a standard, the proposal is ratified as part of it. …


A guide to show SVG images in React apps

Image for post
Image for post
Image courtesy of Wikipedia

SVG stands for Scalable Vector Graphics. It defines vector-based graphics in XML format. Compared to a raster-based bitmap (above left), the vector-based image (above right) preserves the shape while scaling up. In addition, as the nature of XML files, they can be searched, indexed, scripted, compressed, and built with accessibility. SVG is a widely used graphic format on the web.


SVG Logo in Create React App

Create React App comes with an SVG logo:

Image for post
Image for post
Image provided by the author.

This logo is defined in src/log.svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">      
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 …


Better charts with C3

Image for post
Image for post

What is D3?

D3 stands for Data-Driven Documents. It is a JavaScript library for manipulating documents based on data. D3 is a dynamic, interactive, online data visualizations framework used in a large number of websites. The visualized data are called charts. Commonly, there are line charts, bar charts, pie charts, etc.


What is C3?

C3 stands for Comfortable, Customizable, and Controllable. C3 is a JavaScript library that builds on top of D3. C3 allows us to build charts quickly without knowing all the complexity of D3. C3 provides a variety of APIs and callbacks to access the state of the chart.

In this article, we are going to show how to build C3 charts using React functional components. …


React 17 comes with the power to lazy load and deep integrate multiple versions of React

Image for post
Image for post
Image credit: Author

The React team said that there are no new features in React 17, but react@17.0.0-rc.0 comes with the power to lazy load and deep integrate multiple versions of React. This no-feature is larger than any feature, which is a stepping stone for a paradigm that allows modern new apps to coexist with existing legacy ones.

This hybrid approach is meant to be an escape hatch, not the norm. …


Build out a basic testing infrastructure for your hooks

Image for post
Image for post
Photo by Anna Hunko on Unsplash

Hooks are popular, as they bring readability and maintainability. Custom hooks become enablers for composability and reusability. In headless UI components, we explored custom hooks, along with high-order components (HOCs).

How can we test them? In Test Cases and Test Coverage for High Order Components, we gave examples on how to write test cases for high order components and how to measure test coverage, using the Jest and React Testing Library. In this article, we are going to demonstrate how to use React Hooks Testing Library to test custom hooks.


Install React Hooks Testing Library

There are two packages needed for testing custom hooks:

npm install --save-dev @testing-library/react-hooks
npm install --save-dev…


A useful tool to improve the quality of your webpages

Image for post
Image for post
Image source: Screenshot by author

When opening Chrome DevTools, you will see this highlighted tab in the above image. What is it? It’s Lighthouse, an open-source automated tool for improving the quality of webpages.

By default, it measures performance, progressive web app, best practices, accessibility, and search engine optimization (SEO), although you can adapt them to your needs by checking and unchecking items in Categories.

We chose the Device type to be Desktop for our use cases.

There is also the ‘Clear storage’ button at the top-left corner. It has been hidden well, but we found the setting button to unhide it at the top-right corner. …


Examples on how to write test cases for high order components and how to measure test coverage

Image for post
Image for post
Photo by timJ on Unsplash

We recently wrote an article regarding headless UI components, which explored high order components (HOCs) and custom hooks. The next question is how to write test cases and measure test coverage. While testing custom hooks is covered in another article, here we’re going to walk through examples on how to test HOCs with Jest and the React Testing Library.


Terminologies

Unit test cases: Automated test cases written and run by developers. They isolate each part of the program and verify that the individual parts are correct.

Integration test cases: Automated test cases that combine individual parts and test them as a group. …


How to adopt styled components in Create React App

Image for post
Image for post
Photo by Meagan Carsience on Unsplash

With tagged template literals and the power of CSS, styled components let us write CSS code to style components.

It’s a CSS-in-JS approach — a JavaScript library that bundles each JavaScript component with all its belonging CSS rules and dependencies. As a result, components can run independently, without relying on any external CSS files.

Here’s is a quote from Max Stoiber, the co-creator of styled components, in February 2019:

For three years, I have styled my web apps without any .css files. Instead, I have written all the CSS in JavaScript.

Styled components are compatible with both React (for web) and React Native. We are going to use the Create React App to show how to use styled components. …


A detailed guide to making your web accessible to all

Image for post
Image for post
Photo by Christin Hume on Unsplash.

Accessibility (a11y) is the practice of making web applications that are usable for people whose abilities are limited in some way, such as vision (using a screen reader) and mobility (using the keyboard only). In addition, the limitation could come from the device’s capability, such as mobile devices.

In this article, we will provide ten steps to building web applications with accessibility.


Step 1: Choose Semantic HTML

Semantic HTML introduces meaning to web pages rather than just presentation. Sometimes, it is called Plain Old Semantic HTML (POSH).

The following is the semantic definition of a heading:

<h1>This is heading text</div>

Visually, it would look the same with the specified…


Headless UI components without UI but with UI functionality

Image for post
Image for post
Photo by Wes Hicks on Unsplash

We have given an introduction to React-Table — a custom Hook to build an extendable table without the actual UI component. This type of component is called a headless UI component — it separates the logic and behavior of a component from its visual representation.

Headless UI components have a long journey with high order components, render props, and custom hooks. These concepts will be explained in this article.


High Order Components

We have a component that prints out a simple UI:

Image for post
Image for post

For this article, the source code is verified in CodePen:

We want to make the text blue. This can be done by adding the style to line one or passing the style through line three. However, we want this style transformation logic to be reusable for other components too. …


Showcase debounce and throttle with useCallback, useMemo, useRef, and custom hooks

Image for post
Image for post
Photo by Octavian Rosca on Unsplash

Following our 10 Fun Facts About Create React App, today we present the 11th fun fact about Create React App: It has built-in Lodash, a JavaScript library that provides utility functions for arrays, numbers, objects, and strings.

Although many functions can be replaced by ES2015+, Lodash is still a super set with extra handy utilities. We can take advantage of the built-in Lodash to explore debounce and throttle with hooks.


Lodash, Debounce, and Throttle

In our previous projects, Lodash was always a utility package to be installed. By running npm i lodash, the lodash package becomes part of dependencies in package.json.

This pattern changes with the Create React App. After invoking npx create-react-app my-app, Lodash is ready for use. There is no need to install it at all. lodash is not in package.json, but in package-lock.json, installed along with other packages. …


A case study on how to apply functional programming in React applications

Image for post
Image for post
Photo by Scott Walsh on Unsplash.

Object-oriented programming is a programming paradigm based on the concept of “objects,” which are defined as classes. It is imperative programming that uses statements to change a program’s state.

Functional programming is another programming paradigm where programs are constructed by applying and composing functions. It is a declarative programming paradigm where functions are treated as first-class citizens (i.e. they can be assigned to variables, passed as arguments, and returned from other functions). It is highly recommended to compose pure functions, avoiding shared state, mutable data, and side effects.

As big libraries and frameworks such as React, Angular, and Vue arrived, functional programming has become appealing for the front-end web development community. React is a strong advocate of functional programming. After hooks were introduced in May 2018, it has become possible to write the entire application with just functions as React components. …


A full introduction to Recoil, an experimental state management library for React applications

Image for post
Image for post
Recoil data-flow graph for state management — Photo by the author.

Available since May 2015, Redux is a predictable state container for JavaScript applications. It is a single source of truth, its state is read-only, and changes are made with pure functions. Redux has a nice browser debugging extension for easy debugging. The drawback is the complex boilerplate to start with. It may not be compatible with React’s upcoming concurrent mode.

Context API was introduced by React 16.3 along with React Hooks in May 2018. It provides a way to pass data through the React component tree without having to pass props down manually at every level. It is designed to share global data, such as the current authenticated user, theme, or preferred language. …


A detailed guide

Image for post
Image for post
Photo by Mazhar Zandsalimi on Unsplash

This article is a detailed guide on how to use dynamic import, which enables code splitting and lazy loading. It also describes how to use error boundaries to catch errors.

Is import() a Function?

Yes, but no.

import() is currently in stage 4 of the TC39 process. It is a function-like module loading syntactic form in JavaScript.

It acts in many ways like a function:

  • It returns a promise for the module namespace object of the requested module, which is created after fetching, instantiating, and evaluating all of the module’s dependencies, as well as the module itself. …


An introduction to react-select, which works out of the box and is highly customizable

Image for post
Image for post
Photo by Jared Arango on Unsplash

HTML’s select isn’t easy. It takes two types of tags to define:

<select>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="berry">Berry</option>
</select>

React’s select is similar, except it uses JSX (JavaScript + XML), which is an extension of JavaScript that writes HTML directly within JavaScript. In many ways, JSX is similar to HTML, but it needs to be transpiled into standard ECMAScript and then converted to HTML.

I would recommend using React Select, which makes selection easy. This open-source code started in August, 2014, and now has hundreds of contributors and tens of thousands of stars. …


Understanding the key differences between JavaScript events

Image for post
Image for post
Photo by Robert Haverly on Unsplash.

What Are JavaScript Events?

JavaScript events are actions or occurrences that happen on web pages. They are an essential part of an interactive user interface. An event takes place when a user clicks a button or moves a mouse. It is also a result when a web page is loaded or unloaded, among many other circumstances.

HTML defines a set of events, and JavaScript uses event handlers to manage these events. React also implements event handlers, such as onClick, onMouseMove, onLoad, onError, etc. React’s event handlers are named with camelCase APIs, while JavaScript event handlers are named with lowercase APIs.

We are going to explain how React handles events and what React events’ capabilities and limitations are. …


A utility belt for lightweight, fast, and extendable data grids

Image for post
Image for post
Photo by sergio souza on Unsplash

A table, also called a data grid, is an arrangement of data in rows and columns, or possibly in a more complex structure. It is an essential building block of a user interface. I’ve built tables using Java Swing, ExtJs, Angular, and React. I’ve also used a number of third party tables. As a UI developer, there’s no escape from table components.

Build vs. buy? It is always a choice between cost and control. When there is an open-source with a proven track record, the choice becomes a no-brainer.

I would recommend using React Table, which provides a utility belt for lightweight, fast, and extendable data grids. This project started in October, 2016, with hundreds of contributors and tens of thousands of stars. It presents a custom hook, useTable, which implements row sorting, filtering, searching, pagination, row selection, infinity scrolling, and many more features. …


A walkthrough of test utilities, test renderer, and the React Testing Library

Image for post
Image for post
Image courtesy of watirmelon.blog

Software testing provides information about the quality of the software being tested.

There are many types of testing. Unit testing isolates each part of the program and verifies that the individual parts are correct — it has the narrowest scope and the largest number of test cases. Integration testing is the phase in which individual software modules are combined and tested as a group — it has the broadest scope and fewest number of test cases.

In the diagram above, the left side is the recommended testing pyramid, and the right side is the testing ice cream cone, which is to be avoided. …


Let’s build a GUI-based service to analyze logs using knowledge-based AI and NLP

Image for post
Image for post
Photo by Kaleidico on Unsplash

Natural language processing (NLP) is a branch of knowledge-based artificial intelligence. It’s intended to help computers to receive natural languages and decipher the meaning to provide proper responses.

Here’s the NLP workflow:

Image for post
Image for post

Based on a research report conducted by Darren Wong, Winnie Tseng Mueller, Judy Wu, and Astha Sirohi, there are four major areas to which we can apply NLP.

Discovering information

Help in catering information by voice or text, and provide easy assistance to customers with knowledge-based AI support.

Making search intelligent

Search is a vital feature for the World Wide Web — as well as any software system. …


A guide to writing and debug JavaScript with NodeJS instead of browsers.

What is NodeJS? It is an open-source and cross-platform JavaScript runtime environment. It can be interchangeably called node.js, nodejs, or node. NodeJS has a unique advantage because millions of frontend developers that write JavaScript for browsers are now able to write server-side code in addition to the client-side code without the need to learn a completely different language.

After writing a lot of JavaScript code for the client-side, I have been working on NodeJS middle layer lately. I’d like to share some of my experience of writing JavaScript in the NodeJS ecosystem. …


A detailed guide on how to set up unit test cases for asynchronous calls

Image for post
Image for post
Photo by Petr Macháček on Unsplash

Unit testing isolates each part of the program and verifies that the individual parts are correct. Unit test cases are typically automated tests written and run by developers. This enables problems to be discovered early in the development cycle. Jest is a JavaScript testing framework to ensure the correctness of any JavaScript codebase.

Asynchronous calls don’t block or wait for calls to return. After the call is made, program execution continues. When the call returns, a callback function is executed. It’s hard to test asynchronous calls due to the asynchronous nature.


The Pitfall of Asynchronous Calls

The following is a unit test case for an asynchronous call, setTimeout. …


A detailed guide on how to turn off console information

Among all types of tests, unit tests reside at the bottom of the Test Pyramid. Each unit test case verifies one specific point of the software logic, with a very narrow and well-defined scope. Since unit tests are nimble and fast, the number of unit tests should largely outnumber any other types of tests.

Image for post
Image for post

With a large amount of test cases, there might be a large amount of console information from the code, which you may not have control of.

The console object provides access to browsers’ debugging console. A number of methods are provided by the console object:

Image for post
Image for post

The most frequently-used feature of the console is logging information. The popular methods…


An introduction to react-async, a utility belt for declarative promise resolution and data fetching

Image for post
Image for post
Photo by Dylan Gillis on Unsplash

How do you make async calls in React? Do you use axios, fetch, or even GraphQL?

In that case, you should be familiar with getting data for a successful call, and receiving an error for a failed call. Likely, you also need to track the loading status to show pending state.

Have you considered wrapping them with a custom Hook?

All of these have been accomplished by react-async (react-async), a utility belt for declarative promise resolution and data fetching. We are going to show you how easy it is to use this powerful react-async.


Demo With Create React App

As always, magic starts with Create React App. This is the modified src/App.js. …


How do you decide whether micro-frontends are right for your project, and if so, how do you proceed?

Image for post
Image for post
Photo by Burst on Unsplash

In an era where certain JavaScript frameworks become out of favor at lightening speed, frontend developers are busy rewriting applications using new, emerging ways all the time.

We are desperately searching for a possibility to jump onto the latest and greatest things, without worrying about the baggage of legacy code. In simple terms, we want to decouple components. This appealing idea is called micro-frontends.

What is the micro-frontend approach? The term micro-frontend first came up in the ThoughtWorks Technology Radar in November 2016. It extends the concepts of microservices to frontend development.

This approach is to split the browser-based code into micro-frontends by breaking down the whole application. Sub-application is likely implemented by a vertical team from backend to frontend. This ensures that every sub-application is independently developed, tested, and deployed. …

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store