React basic features and tricks

<></> // fragment div container which won't be included in HTML

<CardContainer></CardContainer>

{} // put JavaScript code inside {} in case of unreachable variable

 <React.StrictMode></React.StrictMode> => https://reactjs.org/docs/strict-mode.html

export default function App() {}

// when using function instead class => function App() {} => export default App()

import { function } from './shared/func-do-smth'; // add { } to import just function from component

export const funcName = (a, b, c, d) => { return ( <div></div> );};

// to convert string to number use + => +e.currentTarget.value

Each child in a list should have a unique "key" prop.

const items = [ <>{ el being created }</> ] // dustructure const [items] to get keys

https://stackoverflow.com/questions/32888728/correct-way-to-share-functions-between-components-in-react

https://www.makeuseof.com/must-follow-react-practices/

https://www.educative.io/blog/best-practices-react-developer#5

Using Functional Components and Hooks Instead of Classes

Avoid Using State (If Possible)

Opt for Fragments Instead of Divs Where Possible

Use Object Destructuring For Props

Extract reusable logic into custom hooks