PROJECT_FOLDER/package.json – configuration of installed packages and their versions
“next”: “^13.2.4” – check nextjs installed version here
PROJECT_FOLDER/tsconfig.json – Typescript configuration
PROJECT_FOLDER/.eslintrc.json – EsLint configuration
PROJECT_FOLDER/postcss.config.js – PostCSS configuration
PROJECT_FOLDER/next.config.js – NextJS configuration
PROJECT_FOLDER/tailwind.config.ts – Tailwind configuration
Three dots {…props} decompiles array and used to merge an array with individual variables
const linkProps = {
...props,
...(customname === true ? { passHref: true } : {})
}
git reset -- path/to/file git checkout -- path/to/file |
/* eslint-disable no-console */
console.log(yourtext)
/* eslint-enable no-console */ ssh-add and press [Enter] |
Enter passphrase for /path/to/.ssh/id_rsa: |
Identity added |
git checkout {branchname} {filename} |
Consts of 3 phases:
Phase 1: The mounting phase is when a new component is created and inserted into the DOM or, in other words, when the life of a component begins. This can only happen once, and is often called “initial render.”
Phase 2: The updating phase is when the component updates or re-renders. This reaction is triggered when the props are updated or when the “state” is updated. This phase can occur multiple times, which is kind of the point of React.
Phase 3: The last phase within a component’s lifecycle is the unmounting phase, when the component is removed from the DOM.
In React, state refers to a structure that keeps track of how data changes over time in your application. In other words, state = current situation = current snapshot = status of the component.
The state of a React class is a special property/variable (actually it is Object which acts as a container for variables and arrays) that controls the rendering of a page. When you change the state, React knows that the component is out-of-date and will automatically re-render.
For example React class:
class App extends React.Component {
render() {
}
}
If we define some variable and store data in it, react won’t know that and won’t call render() function to update
component and visually nothing changes in the frontend browser.
But if we store data in special variable called “state”, react will detect that and will call render() function again to update component and visually changes appear in the frontend browser.
When a component re-renders, it modifies the rendered output to include the most up-to-date information in state. Managing state is a crucial skill in React because it allows you to make interactive components and dynamic web applications. State is used for everything from tracking form inputs to capturing dynamic data from an API. React hook gives access to the state property of React class.
Although the use of React Hooks is considered a more modern practice, it’s important to understand how to manage state on class-based components as well. Learning the concepts behind state management will help you navigate and troubleshoot class-based state management in existing code bases and help you decide when class-based state management is more appropriate.
https://www.digitalocean.com/community/tutorials/how-to-manage-state-on-react-class-components
React Hooks allow you to hook into the state and lifecycle of a component in functional components.
If hooks are so similar to regular functions, you might wonder why we even have the “hook” concept. The reason we need this concept is because hooks are special. They are functions that also have state that is persisted under the hood by React across calls.
A custom Hook is a JavaScript function whose name starts with ”use” and that may call other Hooks. a function can be custom hook if the following conditions are met:
Action Hook is used to run custom functions at a specific point during the execution of WordPress Core.
Filter Hook is used to modify or customize and return data used by other functions.
SVG image manipulation similar to looking through a hole (window, viewport) to some part of area on some distance. For example: looking to a part of map through magnifying glass, moving magnifying glass around left, right and zooming in and out.
SVG width, height – is a viewport, a window to look through to something, some image, for example: looking to a part of map
SVG viewbox 1st, 2nd parameters – x,y positioning, for example: like moving magnifying glass around the map
SVG viewbox 3rd, 4rd parameters – zooming, for example: like looking through magnifying glass
Source: https://webdesign.tutsplus.com/tutorials/svg-viewport-and-viewbox-for-beginners–cms-30844