Lasting first that “every package you add means another dependability on an external source.”
In this solution, we will go through challenging topics like how to pick an npm package to add to your project and how to keep them updated with less hassle in the development and maintenance process. Also, I have assumed you have basic knowledge about Javascript libraries like React.
Based on my experiences, I can suggest dividing packages into two categories:
- Core packages: Those are packages that come from trusted resources and so many developers spend a lot of effort and their time like React, Material-UI…
By definitions
- Typescript = JavaScript + a type system
- TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
What is the Typescript type system?
- Helps us catch errors during development
- Uses ‘type annotation’ to analyze our code
- Only active during development. It is like writing JS code with some documentation.
- Its compiler doesn’t provide any optimization. It has no effect on how our code executed by the browser or Node
Syntax and features of TS:
Type: An easy way to refer to the different properties + functions that a value has (any value has a type).
- Basic Types are categorized into two main categories, first is Primitive Types…
These are essential to keep in mind if you are preparing to migrate your application to React 17. A great starting point is replacing the unsafe methods with these new lifecycle methods.
Following life-cycle methods will be deprecated in React v17:
- componentWillMount: componentWillMount should be removed altogether for async rendering
- componentWillReceiveProps: replace with getDerivedStateFromProps in conjunction with componentDidUpdate
- componentWillUpdate: replace with getDerivedStateFromProps in conjunction with shouldComponentUpdate
New lifecycle methods:
- getDerivedStateFromProps: This lifecycle method replaces componentWillReceiveProps and componentWillUpdate and will be called after a component is created and when it received new props. …
ES6 classes in React won’t go away anytime soon. But now with React hooks it’s possible to express the flow internal state change. Then UI reactions without using an ES6 class.
Most important React Hooks
React hooks were born for a reason: sharing logic between components (a nice, standardized, and clean way for encapsulating and sharing logic.)
- useState: useState is a function exposed by the react package.
- Import the function:
import React, { useState } from "react"; - By importing useState in code, signaling the intent to hold some kind of state inside your React component. It is important, that React component shouldn’t be an ES6 class anymore. It can be a pure and simple JavaScript function.
- Afterward, pick an array containing two variables out of useState…
Frontend Architecture for Design Systems
- The growing of the Web forced Webmasters to hire new team members or leaving the market
- Content strategy is a concurrent process with designing of website. It is mandatory to treat the content as a critical asset and to have a strategic planning for it.
- Responsive web design (RWD) is introduced as a collection of Fluid grids (% based widths), Flexible images (100% fit to its container), and Media query.
- The role Frontend Architecture is a missed position in projects and you should define it in your company.
What is FA?
It is a collection…
