Week 05

getDerivedStateFromError /componentDidCatch

Use static getDerivedStateFromError() to render fallback UI after an error has been thrown.

Use componentDidCatch() to log error information.

Error boundaries are like js catch blocks but for components. Only class components can be error boundaries. 

Babel

Babel is a free and open source JavaScript trans compiler that is mainly used to convert ECMAScript 2015+ code into backward compatible version of JavaScript that can be run by older JavaScript engines. Babel is a popular tool for using the newest features of the JavaScript programming language.

FLOW

FLOW is a static type checker for JavaScript. It is developed at Facebook and often used with React. It let developer to annotate the variables, functions and React components with a special type syntax, and catch mistakes early.

These are the way to add FLOW to react project:

By Using Yarn

By Using npm

Webpack

Webpack is a module bundler. The bundling process is begin from user defined entries. Entries themselves are modules and can point to other modules through imports. 

When bundle a project using webpack, it traverses the imports, constructing the dependency graph of the project and then generates outputs based on the configuration. It's possible to create split points to create separates bundles within the project code itself.

Webpack supports ECMAScript 2015, CommonJS and AMD module formats out of the box. 

Webpack's Execution Process

Parcel

Parcel is relatively new bundler. Parcel describes itself as a blazing fast, zero configuration web application bundler. To use parcel just need to point it at the entry point of the application.

Parcel offers following features:

• Fast bundle time - Parcel is faster than the other bundling tools.
  

• Assets Building - Supports for JS,CSS,HTML files.
• Automatic Transform - All codes are automatically transform using Babel, PostCSS and PostHTML.
• Code Splitting - Parcel allows to split output bundle by using the dynamic import() syntax.
• Hot Module Replacement(HMR) - Parcel automatically updates modules in the browser as you make changes during development, no configuration needed.
• Error Logging - Parcel prints syntax highlighted code frames when it encounters errors to help you pinpoint the problem. 

References:

https://reactjs.org/docs/error-boundaries.html

https://en.wikipedia.org/wiki/Babel_(transcompiler)

https://reactjs.org/docs/static-type-checking.html

https://survivejs.com/webpack/what-is-webpack/ 

https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-parcel