ReactJS

Lazy Loading:   1. Create an asyncComponent.js:   import React, { Component } from 'react';   const asyncComponent = (importComponent) => {     return class extends Component {         state = {             component: null         }           componentDidMount () {             importComponent()                 .then(cmp => {                     this.setState({component: cmp.default});                 });         }     ...

Render Props   The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.   A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.   <DataProvider render={data => (   <h1>Hello {data.target}</h1> )}/>   Note :   It’s important to remember that just because the pattern is called “render props” you don’t have to use a prop named render to use this pattern. In fact, any prop that is a function that a component uses to know what to render is technically a “render prop”.   Using Props Other Than render   Although the examples above use render, we could just as easily use the children prop!   <Mouse children={mouse => (   <p>The mouse position is {mouse.x}, {mouse.y}</p> )}/>   S...

Context   Context provides a way to pass data through the component tree without having to pass props down manually at every level.   In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.   Using context, we can avoid passing props through intermediate elements.   React.createContext   const MyContext = React.createContext(defaultValue);   Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching Provider above it in the tree.   The defaultValue argument is only used when a component does not have a matching Provider ...

Enabling CSS Modules in create-react-app setup: If the project was created using create-react-app css modules will be enabled by default. If the project was not created using the create-react-app use the following tutorial to enable css modules: Installing Webpack After  installing NPM and node  we need to setup an empty directory somewhere and run the following: npm init --y This will make a  package.json  file and fill it with a bunch of defaults. This is our dependency manifest - the instructions for what is downloaded and installed when other people  npm install  this project. Webpack  will be handling our build process. It will be watching our CSS, JavaScript, and HTML and performing all the magic in between. But what is Webpack?  Maxime Fabre wondered if Webpack is a build system or a module bundler : Well, it's both—and by this I don’t mean that it does both I mean that it combines both. Webpack doesn’t build your ...