React 16.6 is out and with it comes the new Lazy API. The Rreact.lazy function lets you render a dynamic import as a regular component.

React.lazy takes a function that must call a dynamic import(). This must return a Promise which resolves to a module with a default export containing a React component.

Usage:

const LazyComponent = React.lazy(() => import(‘./Component’));

Show a fallback with Suspense

Wrap the component where it’s used with Suspense and pass a fallback. The fallback prop accepts any React elements that you want to render while waiting for the component to load.

<Suspense fallback={<div>Loading Component…</div>}>
 <LazyComponent />…

On 23rd December, I presented a 5 hour long React Session/Workshop for both beginners and experts at Facebook Developer Circle Delhi React Code Lab.

This was my first time presenting to so many attendees and mentoring live for so long. This was a great opportunity for me, thanks to FB dev circle.

I started from the very basics of JavaScript and React and leveled up to Advanced Component Patterns in React. All the attendees coded along with me and learned how things in worked in React and understood their internal implementations. …

Parcel.js is the new javascript bundler in town. Being less than 2 weeks old, it already has 11k+ stars on github. This will guide you to build your first React project with Parcel.js

Parcel.js boasts to be the fastest javascript bundler till date offering blazing fast performance utilizing multicore processing, and requires zero configuration. Head over to Parceljs.org to know more about.

1. We will jump right into using it by installing Parceljs

npm install -g parcel-bundler

2. Create a package.json file in your project directory using

npm init -y

3. Install react and react-dom

npm install --save react react-dom

…