react ag-grid note 4 Avoid Wasted Renders

 100% React Rendering, Avoid Wasted Renders

https://www.youtube.com/watch?v=oAQ5vavDupU&list=PLsZlhayVgqNwHNHeqpCkSgdRV08xrKtzW&index=4

const MyComp = params => {

  const renderCountRef = useRef(1);

  return (

    <>

      <b>({renderCountRef.current++})</b> {params.value}

    </>

  );

};

cellRenderer: memo(MyComp)

react ag-grid note 2 ag-grid-enterprise

 

react ag-grid note 2

react ag-grid note 2

https://www.youtube.com/watch?v=pKUhYE1VTP4&list=PLsZlhayVgqNwHNHeqpCkSgdRV08xrKtzW&index=2

npm install --save ag-grid-enterprise

import 'ag-grid-enterprise'

ag-grid-enterprise, ag-grid-community and ag-grid-react needs to be the same version to make ag-grid-enterprise work

enableRowGroup: true

rowGroupPanelShow='always'

Only shows at F12 developer tool * If you want to hide the watermark please email info@ag-grid.com for a trial license key.   

react ag-grid note 1

react ag-grid note 1 

https://www.youtube.com/watch?v=6hxbPqziELk&list=PLsZlhayVgqNwHNHeqpCkSgdRV08xrKtzW&index=1

npx create-react-app my-app

cd my-app

npm install --save ag-grid-react

npm run start

App.js

import { AgGridReact } from 'ag-grid-react';

import { useMemo, useState } from 'react';

import "ag-grid-community/styles/ag-grid.css";

import "ag-grid-community/styles/ag-theme-quartz.css";

import './App.css';

const MyCellComponent = p => {

return <>

<button onClick={ ()=>window.alert("Action!")}>+</button>

{p.value}

</>

};

function App() {

// Row Data: The data to be displayed.

const [rowData, setRowData] = useState([

{ make: "Tesla", model: "Model Y", price: 64950, electric: true },

{ make: "Ford", model: "F-Series", price: 33850, electric: false },

{ make: "Toyota", model: "Corolla", price: 29600, electric: false },

{ make: "Mercedes", model: "EQA", price: 48890, electric: true },

{ make: "Fiat", model: "500", price: 15774, electric: false },

{ make: "Nissan", model: "Juke", price: 20675, electric: false },

]);

// Column Definitions: Defines & controls grid columns.

const [colDefs, setColDefs] = useState([

{

field: "make",

cellRenderer: MyCellComponent,

cellEditor: 'agSelectCellEditor',

cellEditorParams: { values: ['Tesla','Ford']}

},

{

field: "model",

checkboxSelection: true

},

{

field: "price",

cellClassRules: {

'green-cell': p=>p.value > 30000

}

},

{ field: "electric" },

]);

const defaultColDef = useMemo( ()=>{

return {

flex: 1,

editable: true,

filter: true,

floatingFilter: true

}

});

const rowClassRules = useMemo( ()=>({

'red-row': p=>p.data.make == 'Tesla'

})

);

return (

<div className='ag-theme-quartz-dark' style={{height: 500}}>

<AgGridReact rowData={rowData} columnDefs={colDefs} defaultColDef={defaultColDef} rowClassRules={rowClassRules}></AgGridReact>

</div>

);

}

export default App;

App.css

.green-cell{

background-color: rgb(100,150,100);

}

.red-row{

background-color: rgb(150, 100, 100);

}

CSS note from The complete 2024 web development bootcamp

1.

p {

color: red;

}

.note {

font-size: 20px;

}

#id-selector-demo {

color: green;

}

li[value="4"] {

color: blue;

}

* {

text-align: center;

}

https://appbrewery.github.io/box-model/

2. Combining CSS Selectors

<p>Yellow Text</p>

<div class="box inner-box">

<p>White Text</p>

</div> 

p {

color: yellow;

}

.inner-box p {

color: white;

}

Descendant = Apply to all offsprings of left side

selector selector { ... }

Group = Apply to both selectors

selector, selector { ... }

Child = Apply to direct child of left side

selector > selector { ... }

Chaining = Apply where all selectors are true

selectorselector { ... }

3. CSS positioning

https://appbrewery.github.io/css-positioning/

4.

display: none/inline/block/inline-block/grid/flex

JavaScript definitive guide note

 1. == equality operator is deprecated. Use ===

2. Use const and let to define variable (or with var in older JavaScript code)

3. Expression a??b is equivalent to: (a!==null&&a!==undefined)?a:b

Youth

 Youth

Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life.

Youth means a temperamental predominance of courage over timidity of the appetite, for adventure over the love of ease. This often exists in a man of 60 more than a boy of 20. Nobody grows old merely by a number of years. We grow old by deserting our ideals.

Years may wrinkle the skin, but to give up enthusiasm wrinkles the soul. Worry, fear, self-distrust bows the heart and turns the spirits back to dust.

Whether 60 or 16, there is in every human being's heart the lure of wonder, the unfailing childlike appetite of what's next and the joy of the game of living. In the center of your heart and my heart there is a wireless station: so long as it receives messages of beauty, hope, cheer, courage and power from men and from the Infinite, so long are you young.

When the aerials are down, and your spirit is covered with snows of cynicism and the ice of pessimism, then you are grown old, even at 20, but as long as your aerials are up, to catch waves of optimism, there is hope you may die young at 80.

― Samuel Ullman

React note

 

1. Install Node.js so that you can run npm command

2. npm install -g create-react-app

   Add the path to env: C:\Users\theuser\AppData\Roaming\npm

3. Run 

create-react-app reactapp

then cd reactapp, npm start to start the react app

4. The virtual DOM is a lightweight copy of DOM, with the key difference that while the real DOM is made up of Node objects,

the virtual DOM is made up of plain JS objects that act as descriptions.

5. Reconciliation compares the virtual tree representing the current state of the user interface with a previous version to 

determine which parts of the user interface need to be updated.

6. Only reactive variables can be modified in the display, once the component is rendered. React uses a concept called "state".

7. [...Array(11).keys()].slice(1)

8. useEffect( function(){ setValue(1);,[] }; ) //conditions = [] means that setValue(1) is executed only on the initial display.