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.
Install Create React App, and run it out of box:
npx create-react-app my-app
Network tab, we see 10 requests in the development mode:
localhost: the main entry
index.htmlfor the root directory
bundle.js: the Webpack bundle…
The TC39 process has a number of stages:
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. …
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.
Create React App comes with an SVG logo:
This logo is defined in
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<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 …
In this article, we are going to show how to build C3 charts using React functional components. …
The React team said that there are no new features in React 17, but
email@example.com 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. …
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.
There are two packages needed for testing custom hooks:
npm install --save-dev @testing-library/react-hooks
npm install --save-dev…
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. …
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.
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. …
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
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. …
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.
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…
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.
We have a component that prints out a simple UI:
For this article, the source code is verified in
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. …
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
throttle with hooks.
In our previous projects, Lodash was always a utility package to be installed. By running
npm i lodash, the
lodash package becomes part of
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. …
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. …
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. …
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.
import() a Function?
Yes, but no.
It acts in many ways like a function:
select isn’t easy. It takes two types of tags to define:
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. …
We are going to explain how React handles events and what React events’ capabilities and limitations are. …
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. …
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. …
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:
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.
Help in catering information by voice or text, and provide easy assistance to customers with knowledge-based AI support.
Search is a vital feature for the World Wide Web — as well as any software system. …
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 following is a unit test case for an asynchronous call,
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.
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.
console object provides access to browsers’ debugging console. A number of methods are provided by the
The most frequently-used feature of the console is logging information. The popular methods…
How do you make async calls in React? Do you use
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.
As always, magic starts with Create React App. This is the modified
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. …