React TypeScript Environment Setup

React TypeScript Environment Setup

Set up React dev Environment using Webpack and TypeScript HelloWorld example in React with TypeScript HelloWorld create-react-app Application using TypeScript

HelloWorld create-react-app Application using TypeScript

In the previous post we saw on how to setup a React Application using TypeScript and webpack, in that post we manually installed the required npm packages, created the config files and the React component files from scratch, this was a good way to know how React application builds and executes, but it takes time to do this setup.

In this post we will use the create-react-app package from Facebook to quickly create a React application using TypeScript.

Open a command prompt and run the following command.

HelloWorld example in React with TypeScript

In the previous post we did setup the Development environment to develop React applications using TypeScript. In this post we will use this environment and create a Hello World React application using TypeScript.

Assuming we have a root folder and the environment setup with required npm packages installed and config files we will go ahead and create the Application files. First let us create the following folder structure for the React components.

Set up React dev Environment using Webpack and TypeScript

In the previous posts we saw on how to create React Applications using JavaScript and JSX. We can also write react applications using TypeScript. The build environment setup will be different when we use TypeScript.

When we created React Applications using JavaScript (ES6) we used the Bable loaders to transpile ES6 code into browser compatible JavaScript code, in case of TypeScript we will have to use a TypeScript loader (ts-loader) instead of Bable.  In this post we shall see in details on how to setup the environment for creating React applications using TypeScript.

First to start with let us create a new project by running npm init

React Boilerplates Overview

React Boilerplates Overview

What are React Boilerplates React Hello World using create-react-app

React Hello World using create-react-app

In this post we shall see on how to install the create-react-app boilerplate and how to create a simple Hello World application using the boilerplate.

Let us create a React application hello-world using the following command.

npx create-react-app hello-world

The command will install all the required packages and the basic files for a startup React application. Once the command is completed it creates the following files and folders.

What are React Boilerplates

In the post Setting up React Environment, we saw the process to setup the environment to do a simple Hello World application in React, we know that it takes quite a bit of time and effort to get started with a simple Hello World application.

We need to install react, bable and web-pack packages. Create configuration files for web-pack and bable. Create a root Html page (index.html), create at least one React component and a root class to load the component in the HTML DOM using ReactDOM.render. That’s quite a bit of work to do the simplest Hello World sample.

React Environment Setup and Build Tools Overview

React Environment Setup and Build Tools Overview

Setting up React dev Environment using Webpack and babel React Setup and Build Tools Webpack npm npm semantic versioning npm package-lock.json Bable Source Map

Source Map

Source Map helps us debug JavaScript code in production. Source Map creates a mapping between the original development version of the JavaScript / JSX files and the compiled and bundles production version of the JavaScript files, thereby allowing us to debug in production.

In the previous posts we saw how Bable compiles the ES6 & JSX code and transforms them into JavaScript and how webpack bundles the individual files into a common bundle.js file. As a result of the transpilation, minification and bundling process we are left with a large JavaScript file which is almost impossible to debug, but we cannot avoid these steps since they are required to make the JavaScript application secure and performance efficient in the production environment. If so then how do we debug issues in production environment, the answer to this is Source Map.

Bable

Babel is a JavaScript compiler which is used to transform ES6 JavaScript code to ES5 JavaScript which the browsers can understand. This transformation is called transpilation. React components are generally written using ES6 classes and JSX syntax, bable loaders are used to transpile ES6 and JSX code to core ES5 JavaScript.

Webpack cannot compile ES6 JavaScript code, hence it used loaders to transpile ES6 and JSX code. In the React sample we used bable-loader in the webpack configuration to compile ES6 and JSX code into native JavaScript code.

For the React Application we used the following 3 bable packages

npm package-lock.json

The package-lock.json is a new file introduces in npm v 5.*. The goal of introducing this new file is to resolve issue due to installing different versions of packages.

In the previous post we saw about the semantic versioning for npm and the various wild cards associated with this versioning. We saw that the package.json by default uses the carot (^) wildcard for package versioning, this allows for auto upgrade of the minor and patch versions.

Let us say we have the following entry in our package.json file for react
"react": "^16.8.3"

npm semantic versioning

NPM uses Semantic package versioning, which is a 3 part versioning like 7.5.5

<Major version>.<Minor version>.<Patch version>

Patch version – Patch versions will includes bug fixes
Minor version – Minor versions will include feature additions without breaking changes
Major version – Major version changes can include breaking changes

NPM

NPM is the package manager for Node.js, NPM is also used to install dependent packages for client side applications like React, Angular etc. NPM takes care of installing and maintaining the dependent packages for a project.

The command npm init is used to create a new project, this command will create a project.json file which will record all the dependent packages required for the project. If also records the commands to be executed when we build/run/test the Project.

The package.json file for our Hello World React application looks as follows.

Webpack

Webpack is a module bundler, its main purpose is to bundle all the dependent files into a single .js file which helps optimize the page load. Apart from bundling webpack can also be used as a task runner by configuring a sequence of tasks in the build process like cleanup target folder, bundle files, copy files etc. Webpack by itself is a big topic, in this post we shall see the minimal configuration required in webpack to bundle and load a React Application.

Webpack is configuration driver, remember we created a file in the webpack.config.js previous Hello World post, this is the webpack configuration file. The most minimal webpack configuration includes and entry (input) and an output.

React Setup and Build Tools

In the previous post we saw how to setup the environment to develop a Hello World React App, we saw that we used a set of npm packages and tools like webpack, bable etc to setup the environment, in this post we shall see the purpose of each of the tools in setting up the React Environment.

Setting up React dev Environment using Webpack and babel

Modern web development frameworks like Angular / React are complex and involves complex environment setup before we could write our Hello World program. Setting up the development environment for React is a tedious task. In this post we will try to set up the development environment and display Hello World using a react component.

1. First let us create a folder ReactHelloWorld, we will setup the environment and create the Hello World component in this folder.

2. Next make sure node is installed in the pc, if not installed already install the latest version of Node.js. We can check if Node is installed by running the command node –v, if Node is installed this command will return the version of Node.js Installed in the pc.

ReactHelloWorld>node –v
v8.12.0

React Fiber Overview

React Fiber Overview

What is React Fiber What is Reconciliation

What is Reconciliation?

A React application comprises of various React components, the components are organized in a tree structure with a root component and other child / nested components. When the React application loads it creates the component tree in memory called the Virtual DOM. Whenever a component gets updated in the tree React runs an algorithm to determine what changes should be made to the DOM to reflect the changes in the UI, this process of comparing the changes to update the DOM is called Reconciliation.

React reconciliation is based on 2 assumptions

What is React Fiber

React Fiber is a re-write of React’s core algorithm which aims in improved rendering and responsiveness of the UI. React Fiber helps in improving performance of UI intensive operations like animation, layouts etc. React Fiber improves the algorithm to render / re-render changes to the DOM thereby improving the performance / UI responsiveness of React applications.

To better understand React Fiber we should first understand the concept of Virtual DOM and Reconciliation in React, let us look at these in brief.

React 16.9 Profiler Overview

React 16.9 Profiler Overview

React.Profiler component in React 16.9 React.Profiler component example

React.Profiler component example

In the previous post we saw in detail about the React.Profile component and how it is used to capture performance metrics of a React Component. In this post we shall see a small example on how to use the React.Profile component to measure and display performance metrics.

We will use the useEffect example and add React.Profile to it. The sample consists of a Parent component App, child component UseEffectComponent and the Root ReactDOM to load the App component. We will add Profiler to the App component in the Root and add Profiler component for UseEffectComponent in the parent App component as follows. Remember we are using create-react-app boilerplate to create these examples which will have additional supporting files.

React.Profiler component in React 16.9

Profiling React applications for performance was introduced in React 16.5 using a React Profiler DevTools plugin, this works but not straightforward. To get this working we need to open the developer tools, record the performance metrics and later analyze the results. Also it records the performance of all running React Apps.

React 16.9 introduces the new React.Profiler component which avoids the drawbacks of the earlier DevTools based Profiler. The Profiler API is programmable and we can configure it only for specific applications. Also the Profiler API does not need DevTools support it can capture and write performance logs to the console directly.

React 16.8 Hooks

React 16.8 Hooks

Hooks in React 16.8 useState Hook example in React 16.8 useEffect Hook example in React 16.8

useEffect Hook example in React 16.8

In the previous post we saw an example of how to use the useState hook in a function component to maintain and update state props. In this post we will see an example on how to use the useEffect hook to perform side effects from a function component.

In this sample, we will use the useEffect hook to change the title of the document. We will use the value from the state prop title to set the document title as Hello + {title}. Initially the title will be displayed as Hello React, on clicking a button we change the state value of title, which in-turn triggers the useEffect and changes the document title.

useState Hook example in React 16.8

In the previous post we saw that the useState Hook is used to define state props in a function component, in this post we shall see a small example on how the useState hook works in action.

In this post we will create a function component and define a state prop count using the useState hook, we will attach a function setCount which will be used to change the value of the count prop. We will also attach the setCount function to the click event handler of a button, so that each time the button is clicked the setCount function will be called which will increase the value of the count state prop by 1.

Hooks in React 16.8

Hooks were introduces in React 16.8, hooks let us create function components in React with state and other React features. Usually for a React component to have state it should be created as a class component.

React 16.8 introduces the following basic hooks

React 16.8 Lazy, Memo and contextType

React 16.8 Lazy, Memo and contextType

React.memo & React.lazy in React 16.6 React.memo example React.lazy with Suspense example What is Code-Splitting? Lazy loading React components

Lazy loading React components

Lazy loading is loading dependent modules / components dynamically, this is done to optimize the initial load time of larger React Applications which have multiple components and 3^rd part library dependencies.

In React 16.6 lazy loading is enabled by using React.lazy function and the Suspense component. React.lazy is used to lazy load react components from the same or different bundle file and the Suspense component is used to display a fallback UI till the dependent component / bundle is loaded. Lazy loading and code-splitting works together to enable optimization of initial load time for large React Applications.

What is Code-Splitting?

Code-spitting is a feature supported by bundling tools like web-pack to split the React Application bundle into multiple bundle files to improve the performance. To understand bundles this we should first go to the basics of how React applications are bundled and rendered to the browser.

In the React Environment we see how the React components are compiled and bundled before being rendered to the browser. We use Bable to compile the react Application and web-pack to bundle the compiled JavaScript into a bundle.js file.

React.lazy with Suspense example

In the previous post we saw that React.lazy is used to lazy load react components from the same or different bundle file and the Suspense component is used to display a fallback UI till the dependent component / bundle is loaded.

In this post we shall see a simple example which uses React.lazy to lazy load a Child Component and display Loading… text till the child component is loaded. The example has 2 components, the App component is the parent component which laze loads the ChildComponent.

React.memo example

React.memo was introduced in React 16.6 to create performance efficient function components, these components are similar to PureComponents except that they are function based. These components will re-render only when the props of the component changes and not when the parent component re-renders, thereby reducing the number of render cycles and improves the component performance.

In the below example we will create a React.memo component MyMemoComponent which will take a prop msg from the parent and display it. Remember that the memo component will only re-render when the props passed to it changes.

React.memo & React.lazy in React 16.6

React 16.6 introduces 2 main features React.memo and React.lazy

React.memo is similar to PureComponent, it only re-renders if its props are changed. They both offer performance booster to the component by reducing the number of renders. The difference is that PureComponent works with classes and React.memo works with functions.

React 16.4 Pointer Events

React 16.4 Pointer Events

What's new in React 16.4 React 16.4 Pointer Events example

React 16.4 Pointer Events example

Pointer events were introduces in React 16.4 to handle mouse and touch events. In jQuery we have only mouse events, now with the introduction of touch screen and devices like iPad we need to handle touch events also. React now introduces pointer events which can handle both mouse and touch events.

In the below example we will capture 2 Pointer events onPointerEnter & onPointerLeave. We will add these events to a DIV, when we move the mouse over the DIV or touch the DIV the onPointerEnter event will trigger in the event handlers we toggle the isHover state property which will in turn change the color of the DIV. By default the DIV gets silver color, when we hover the mouse over the DIV or touch the DIV its color will change to golden color.

What's new in React 16.4

React 16.4 consists of mainly 2 things. First is the introduction of Pointer Events, and second is a fix to the getDerivedStateFromProps component life cycle event.

Pointer events are used to handle mouse and touch activity like hover, enter, leave etc. They are similar to jQuery mouse event handlers like mouseenter, mouseleave, mouseover etc. The difference between jQuery mouse events and React pointer events is that the Pointer events support both Mouse events and Touch events.

The following are the pointer events supported in React 16.4