console.log(g, a, b, c);

}

}

type Circle = {
	radius : number;
}

type Rectangle = {
	width : number;
	height: number;
}

function computeArea(shape: Circle | Rectangle) {
	if("radius" in shape) {

		} else if ("width" in shape) {

		}
}

function getTotal(...numbers: number[]) :number {
	let total: number = 0;
	numbers.forEach(n => total + n);
	return total;
}

console.log(getTotal()); // 0
console.log(getTotal(10,20)); // 30
console.log(getTotal(10, 20, 30)); // 60

let result = doTask(); ==> directly to stack
console.log("blocked.... until doTask() completes");

Promise API
	is for asynchronous task ==> anything using callback queue then to stack

	==> possible return type is resolved or rejected


	doTask() ==> Promise<Pending>
		RESOLVED
		REJECTED

  doTask().then(function(data) {


  }, function(err) {

  });

  console.log("not blocked!!!");

 ==============


 interface User {
 id:number,
 name:string
}

function fetchData(id:number): Promise<User> {
  return new Promise<User> (function(resolve, reject) {
    setTimeout(function() {
       resolve({"id": 5, "name": "Banuprakash"}); // data from server
     // reject("Not found");
   }, 2000);
 });
}

fetchData(5).then(function(data) {
  console.log(data);
},
function(err) {
 console.log("Boom :-(", err);
});


console.log("not blocked!!!");

// tsc --lib ES2015,dom promiseExample.ts
// node promiseExample.js

interface User {
 id:number,
 name:string
}

function fetchData(id:number): Promise<User> {
  return new Promise<User> ((resolve, reject) => {
    setTimeout(() => {
       resolve({"id": 5, "name": "Banuprakash"}); // data from server
     // reject("Not found");
   }, 2000);
 });
}

fetchData(5).then(
data => console.log(data),
err => console.log("Boom :-(", err)
);

console.log("not blocked!!!");

interface User {
 id:number,
 name:string
}

async function fetchData(id:number): Promise<User> {
	const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`);
	const json = await response.json();
	return json;
}
 
fetchData(2).then(user => console.log(user));

console.log("not blocked!!!");

function forEach<T>(elems:T, action:(elem:T) => void) : void {
	let i:number;
	for(i = 0; i < elems.length; i++) {
		action(elems[i]);
	}
}


let nos:number[] = [6,22,67,1,13,56,19];

forEach(nos, console.log);
forEach(nos, alert);

let names:string[] = ["harry", "peter", "danny", "James"];
forEach(names, console.log);



for(i = 0; i < nos.length; i++) {
		alert(nos[i]);
}
for(i = 0; i < nos.length; i++) {
		console.log(nos[i]);
}


map, filter, reduce, limit, skip, flatMap

map(transformFn) ==> transformed data

filter(predicate) ==> subset

function add(x, y) {
	return x + y;
}

HOF:

function adder(base) {
	return function(no) {
		return base + no;
	}
}

let fiveAdder = adder(5);

console.log(fiveAdder(2)); // 7
console.log(fiveAdder(5)); // 10

getEmp(5); ==> REST api call ==> server ==> DB ==> server ==> json

getEmp(5); ==> cache

fibanocci(34) ==> compute and store in cache
fibanocci(34) ==> get from cache


function fibanocci(no:number) : number {
 return no ==0 || no === 1 ? no : fibanocci(no - 1) +  fibanocci(no - 2);
}

console.time("first");
 console.log(fibanocci(34));
console.timeEnd("first");

console.time("sec");
 console.log(fibanocci(34));
console.timeEnd("sec");

declare var random:any;

function doTask(){
	console.log(random(1,100));
}


 Approach 2)
 using typings.d.ts

declare module 'lodash' {
    export function random(min:number, max:number);
}

example.ts

import {random} from 'lodash';

function doTask(){
	console.log(random(1,100));
}

export default class Person {
    private name:string;
    private age:number;
    constructor(name:string, age:number) {
        this.name = name;
        this.age = age;
    }

    getName():string {
        return this.name;
    }
    getAge():number {
        return this.age;
    }
}

===

 constructor(private name:string, private age:number) {
  }

========
package.json

 "scripts": {
    "dev": "webpack --mode development",
    "prod": "webpack --mode production",
  
}

create many chunk files

main.454dfsfdfsf.js ==> our "compiled ts"
runtime.f4534534fsdf.js ==> React / Angular
vendor.453453dfdg.js ==> files from "node_modules" [ lodash]

let Welcome = React.createElement("h1", {style:{'color':'green'}}, "Welcome to React");
console.log(Welcome);

ReactDOM.render(Welcome, document.getElementById("root"));

render()

var h1 = document.createElement("h1");
h1.appendChild("Welcome to React");
h1.addAttribute("style", ...);
document.getElementById("root").appendChild(h1);

const diffs = [
	{
		newNode : { <li> 1</li>},
		oldNode: { <li>One </li>},
		index: 0
	},
	{
		newNode : { <li>Four</li>},
		index: 3
	}
];


Re-Render

diffs.forEach( diff => {
	if(diff.oldNode) {
		document.replaceChild(diff.newNode, diff.index);
	} else {
		document.appendChi(diff.newNode)
	}

});
	

function Welcome() { // JSX
  return <div>
    <h1> Learning React </h1>
    <h2>Place Virtual</h2>
   </div>
}

ReactDOM.render(<Welcome/>, document.getElementById("root"));

function Welcome(props) { // JSX
  return <div>
    <h1> {props.title} </h1>
    <h2>Place {props.loc}</h2>
   </div>
}

function Welcome({title, loc}) { // JSX
  return <div>
    <h1> {title} </h1>
    <h2>Place {loc}</h2>
   </div>
}

function ProductList({title, products}) {
  return <div>
    	<h1>{title}</h1>
    	{
    		products.map(p => <h2> Name: {p.name} Price: {p.price}</h2>)
    	}
   </div>
}

let productsData = [
        {"id":1,"name":"iPhone","price":124447.44,"category" : "mobile"},
        {"id":2,"name":"Onida","price":4444.44,"category" : "tv"},
        {"id":3,"name":"OnePlus 6","price":98444.44,"category" : "mobile"},
        {"id":4,"name":"HDMI connector","price":2444.00,"category" : "computer"},
        {"id":5,"name":"Samsung","price":68000.00,"category" : "tv"}
];



function ProductList({title, products}) {
  return <div>
    	<h1>{title}</h1>
    	{
    		products.map(p => <Product product={p} key={p.id} />)
    	}
   </div>
}


function Product({product}) {
  	return <div>
  		Name : {product.name} <br />
  		Price : {product.price}	
  		<hr />
  	</div>
}

ReactDOM.render(<ProductList title="List of Products" products={productsData} />, document.getElementById("root"));

class ProductList extends React.Component {
 state = {
 	"products": [
        {"id":1,"name":"iPhone","price":124447.44,"category" : "mobile"},
        {"id":2,"name":"Onida","price":4444.44,"category" : "tv"},
        {"id":3,"name":"OnePlus 6","price":98444.44,"category" : "mobile"},
        {"id":4,"name":"HDMI connector","price":2444.00,"category" : "computer"},
        {"id":5,"name":"Samsung","price":68000.00,"category" : "tv"}
	]
 }
 constructor(props) {
 	super(props);
 }
 //JSX
 render() {
  	return <div>
    		<h1>{this.props.title}</h1>
    		{
    			this.state.products.map(p => <Product product={p} key={p.id} />)
    		}
  		 </div>
  }
}

function Product({product}) {
  	return <div>
  		Name : {product.name} <br />
  		Price : {product.price}	
  		<hr />
  	</div>
}
ReactDOM.render(<ProductList title="List of Products"   />, document.getElementById("root"));

deleteProduct(id){

}

npx create-react-app customerapp --template typescript


builds scaffolding code using webpack

import React from "react";

export default function Parent({children}:{children:React.ReactNode}) {
    return <div>Parent <br/> {children}</div>
}

or

screen.debug();         
      <body>
        <div>
          <div
            class="App"
          >
            <h1>
              React Application
            </h1>
            <div>
              <input
                placeholder="search by name"
                type="text"
              />
              <div
                class="row"
              >
                Monica
                  
                Geller
                  
                <button>
                  ×
                </button>
              </div>
              <div
                class="row"
              >
                Ross
                  
                Geller
                  
                <button>
                  ×
                </button>
              </div>
            </div>
          </div>
        </div>
      </body>
 

setCount(data) {
	this.setState({
		count = data;
	})
}

setUser(data) {
	this.setState({
		user: data
	})
}

</>

[{
	product:{....},
	count: 3,
	total:89000
},
{
	product:{....},
	count: 1,
	total:89000
}
]

import { stat } from 'fs';
import React from 'react';
enum ActionType {
    INCREMENT,
    DECREMENT
}

type Action = {
    type:ActionType
    payload?:number
}

type StateType = {
    count:number
}


let countReducer = (state:StateType, action:Action) => {
    switch(action.type) {
        case ActionType.INCREMENT:
            if(action.payload){
                return {count: state.count + action.payload}
            } else 
            return {count: state.count + 1}
        case ActionType.DECREMENT:
            return {count: state.count - 1}
        default:
            return state;
    }
}

let initialState:StateType = {
    count:0
}

export default function ReducerComponent() {
    let [state, dispatch] = React.useReducer(countReducer, initialState);
    function handleIncrement() {
        let action = {"type": ActionType.INCREMENT, payload: 10};
        dispatch(action);
    }
    return <>
        Count {state.count} <br />
        <button onClick={handleIncrement}>Increment</button>
    </>
}

export default function UseRefComponent() {
    let [name,setName] = React.useState<string>("");
    let [age,setAge] = React.useState<string>("");
    function handleClick() {
        // need to access data in text box ?
        console.log(name, age);
    }
    return <>
        <input type="text" onChange={evt => setName(evt.target.value)}/>
        <input type="text" onChange={evt => setAge(evt.target.value)}/>
        <button onClick={handleClick}>Do Task</button>
    </>
}

using useRef()

import React, { MutableRefObject } from "react";

export default function UseRefComponent() {
    const inputEl = React.useRef() as MutableRefObject<HTMLInputElement>;
    function handleClick() {
        console.log(inputEl.current.value);     
    }
    return <>
        <input type="text" ref={inputEl}/>
        <button onClick={handleClick}>Do Task</button>
    </>
}

class Child extends React.Component {
	render() {
		console.log("child re-renders!!!");
		return <>
				<h1>Child {this.props.name} </h1>
			</>
	}
}


class Parent extends React.Component {
	state = {
		count: 0,
		name : "Banu"
	}

	increment() {
		this.setState( {
			count: this.state.count + 1
		})
	}

	render() {
			console.log("parent re-renders!!!");
			return <>
				Count : {this.state.count} <br />
				<Child name={this.state.name} />
				<button onClick={() => this.increment()}>Increment</button>
			</>
	}
}

ReactDOM.render(<Parent />, document.getElementById("root"))

class Child extends React.Component {
 
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.name !== nextProps.name;
  }
	render() {
		console.log("child re-renders!!!");
		return <>
				<h1>Child {this.props.name} </h1>
			</>
	}
}

class Child extends React.PureComponent {
   render() {
		console.log("child re-renders!!!");
		return <>
				<h1>Child {this.props.name} </h1>
			</>
	}
}

function Child(props) {
		console.log("child re-renders!!!");
		return <>
				<h1>Child {props.name} </h1>
			</>
}

const MemoChild = React.memo(Child); // HOC

class Parent extends React.Component {
	state = {
		count: 0,
		name : "Banu"
	}

	increment() {
		this.setState( {
			count: this.state.count + 1
		})
	}

	render() {
			console.log("parent re-renders!!!");
			return <>
				Count : {this.state.count} <br />
				<MemoChild name={this.state.name} />
				<button onClick={() => this.increment()}>Increment</button>
			</>
	}
}

ReactDOM.render(<Parent />, document.getElementById("root"))

	 const incrementAge = React.useCallback(() => {
		setAge(age + 1)
	}, [age]);

	const incrementSalary = React.useCallback(() => {
   		setSalary(salary + 1000)
	}, [salary]);

function Title() {
  console.log('Rendering Title')
  return (
    <h2>
      Example: Title
    </h2>
  )
};


function Button({ handleClick, children }) {
  console.log('Rendering button - ', children)
  return (
    <button onClick={handleClick}>
      {children}
    </button>
  )
}

function Count({ text, count }) {
	console.log(`Rendering ${text}`)
	return <div>{text} - {count}</div>
}

const MemoTitle = React.memo(Title);
const MemoButton = React.memo(Button);
const MemoCount = React.memo(Count);

function ParentComponent() {
	const [age, setAge] = React.useState(25)
	const [salary, setSalary] = React.useState(50000)

	 const incrementAge = React.useCallback(() => {
		setAge(age + 1)
	}, [age]);

	const incrementSalary = React.useCallback(() => {
   		setSalary(salary + 1000)
	}, [salary]);
  
  
	return (
		<div>
			<MemoTitle />
			<MemoCount text="Age" count={age} />
			<MemoButton handleClick={incrementAge}>Increment Age</MemoButton>
			<MemoCount text="Salary" count={salary} />
			<MemoButton handleClick={incrementSalary}>Increment Salary</MemoButton>
		</div>
	)
}

ReactDOM.render(<ParentComponent/>, document.getElementById("root"));

````

6) Custom Hooks

	* starts with "use"
	* built using already existing hooks

==============

 Day 6
 
 React Hooks
 1) useState
 2) useReducer
 3) useRef ==> React.createRef()
 4) useEffect 
 5) custom hooks
 6) useCallback()

 ---
 React.memo(); ==> HOC ==> memoize pattern
 shouldComponent()
 PureComponent

 ----------

 npx create-react-app shopapp --template typescript
 yarn add bootstrap styled-components @types/styled-components react-router-dom axios

 ------------

 HOC ==> high order component
 * to inject new props
 * conditionally render a component

 ==> Composition pattern ==> Decorator pattern

CustomerList.tsx

HOC 
function withLoading(WrappedComponent) {
	return function({isLoading, ...props}) {
		if(!isLoading) return <WrappedComponent {...props} /> 
		else return <h1>loading.... </h1>
	}
}

const WithLoadingCustomerList = withLoading(CustomerList);

class App extends Component {
	state = {
		loading: true,
		data: null
	};

	componentDidMount() {
			api call and set
			loading and data
	}

	render() {
		return <WithLoadingCustomerList isLoading={loading} customers={data} />
	}

}

=========

function DivComponent(props) {
	return <div>
		Count : {props.count}
		<button onClick={() => props.increment()}>Click </button>
	</div>
}

const withCounter = (WrappedComponent) => {
	return class extends Component {
		constructor(props) {
			super(props);
			this.state = {
				count : 0
			}
		}

		increment = () => {
			this.setState({
				count: this.state.count  + 1
			})
		}

		render() {
			return <WrappedComponent count={this.state.count} increment={this.increment} />
		}
	}
}


====
	CustomerList.tsx
	withSecurity(withLoading(CustomerList))

=========================


React Context
Context provides a way to pass data through the component tree without having to pass props down manually at every level.

```
var PersonContext = React.createContext();

class PersonProvider extends React.Component {
  state = {
    name : 'Smith',
    email : "",
     update : this.update.bind(this)
  };
  
  update(email) {
    this.setState({
        "email": email
    });
   }
  
  render() {
    return <PersonContext.Provider value={this.state}>
        {this.props.children}
      </PersonContext.Provider>
  }
}

class App extends React.Component{
  render() {
    return <PersonProvider>
        <First />
       </PersonProvider>
  }
}

class First extends React.Component {
  render() {
     return <Second/>
  }
}

class Second extends React.Component {
  render() {
    return <PersonContext.Consumer>
            {
              value => { 
                return <React.Fragment>
                  <h1> {value.name} {value.email}</h1>  
                  <button onClick={() => value.update('[email protected]')}>Change</button>
                  </React.Fragment>
              }
      }
      </PersonContext.Consumer>
  }
}

ReactDOM.render(<App/>, document.getElementById("app"))

using Hooks

function Second() {
  	let {name, email, updateEmail} = React.useContext(PersonContext);
         return <React.Fragment>
                  <h1> {name} {email}</h1>  
                  <button onClick={() => update('[email protected]')}>Change</button>
                  </React.Fragment>
             
  }
}


```

react-router-dom

configure routes

 <BrowserRouter>
          <Navbar />
          <Routes>
            <Route path="/products" element={<ProductList/>} />
            <Route path="/cart" element={<Cart/>} />
            <Route path="/details/:id" element={<Details/>} />
            <Route path="/" element={<ProductList/>} />
            <Route path="*" element={<Default />} />
          </Routes>
</BrowserRouter>

-----------

Lazy loading of modules 

Cart module ==> lazy loading


const Cart  = React.lazy(() => import('./components/Cart'));

function App() {
  return (
    <div>
        <BrowserRouter>
          <Navbar />
          <Routes>
            <Route path="/products" element={<ProductList/>} />
            <Route path="/cart" element={
              <Suspense fallback={<h1>Loading....</h1>}>
                  <Cart />
              </Suspense>
            } />
            <Route path="/details/:id" element={<Details/>} />
            <Route path="/" element={<ProductList/>} />
            <Route path="*" element={<Default />} />
          </Routes>
        </BrowserRouter>
    </div>
  );
}

export default App;


==========

download "share.zip", data.js, App.css from "github"


copy "images" folder into "public"
overwrite App.css
place "data.js" in "src" folder
overwrite "Navbar.tsx"
place "Button.tsx" in "components" folder


====================

import {Link} from 'react-router-dom';

  <Link to="/products" className="nav-link">   
                    Products
  </Link>   
 uses HTML5 history API
 ==> navigate between views in SPA

instead of

<a href="/products"> ==> make a call to server ==> server-side rendered


============
Reducer 
CartContext.tsx
================

Redux

====================================

Day 7

React-router-dom ==> BrowserRouter, Routes, Route, Link, useParams
ReactContext

Cart module
------------

Cart Context
	cart:[],
	addToCart()
	increment()
	decrement()
	removeFromCart()

==

useReducer() instead of useState() 

* cartReducer

* CartContext
	has a dependency on ProductContext ==> useContext() is a hook
	use reducer

1) cartReducer.ts

2) CartContext.jsx

3) Product.tsx
 <Button onClick="">


4) index.tsx
ReactDOM.render(
  <ProductProvider>
    <CartProvider>
      <App />
    </CartProvider>
  </ProductProvider>,
  document.getElementById('root')
);

===================

Cart.jsx
CartList.jsx

====================

APi call

yarn add axios

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

 
==> fetch(url)

==================

RESTful web server to serve JSON data
==> Spring boot / ASP.net MVC RAZOR, PHP, ExpressJS nodeJS

JSON Server
Get a full fake REST API with zero coding in less than 30 seconds 

json file as data

{
	"customers": [],
	"products" : [],
	"orders" : []
}


http://server/customers
http://server/orders
http://server/products
http://server/products/4 ==> get by id
http://server/products?price=2222 ==> query paramter

CRUD operations ==> on JSON file

data.json
```
{
    "customers": [],
    "orders" : [],
    "products": [
        {
          "id": "1",
          "name": "Accent Chair",
          "price": 25999,
          "image": "images/accent_chair.jpg"
          
        },
        {
          "id": "2",
          "name": "Albany Sectional",
          "price": 109999,
          "image": "images/albany_sectional.jpg"
        },
        {
          "id": "3",
          "name": "Albany Table",
          "price": 309999,
          "image": "images/albany_table.jpg"
        },
        {
          "id": "4",
          "name": "Armchair",
          "price": 12599,
          "image": "images/armchair.jpg"
        }]
}
```

npx json-server --watch data.json --port 1234


==============================
 

====================

https://dev.to/ruppysuppy/redux-vs-context-api-when-to-use-them-4k3p

==========================================================

Redux

1) Action Creators

function addToCart(product) {
	return {
		type:"ADD_TO_CART",
		payload: product
	}
}


type: FETCH_PRODUCT

StatusReducer
	state: {
		loading:true
		error
	}

ProductReducer 
state: {
	product: ...
}

UserReducr

statue {
	user:
}

CartReducer {
	cart:
}


yarn add redux react-redux

The connect() function connects a React component to a Redux store.

Redux store has
state {
	data : [],
	done: false,
	...
}

// state from redux
// return as props to react component
function mapStateToProps(state) {
	return {
		products: state.data,
		isLoading: done
	}
}

// dispatch refernce to reducer
// props function given to react components to dispatch actiions to reducer
function mapDispatchToProps(dispatch) {
	addToCart: (id) => dispatch({type:"ADD_TO_CART", payload:id}),
	clearCart: () => dispatch({type:"CLEAR_CART"})
}

connect(
	mapStateToProps,
	mapDispatchToProps
)(SmartComponent)


=====================================

Day 8
npx create-react-app reduxexample
yarn add redux react-redux


Redux ==> State Management 

* Action object has {
	type:
	payload
}

* ActionCreators are functions which take data and returns Action Object

* Store ==> Redux has a single store where state resides

* Reducer ==> functions which read state from store takes dispatched action
mutate the state and return the state to store. store updates

* RootReducer if many reducers exist in application
  compose({
  	r1:...
  	r2:...
  	r3:...
  })

  * connect () is a react-redux
  	state present in store ==> give it as props to component
  	dispatch function of reducer => give it as props to component
=======================================================

Contacts Application:
ADD Contact
Remove Contact

Contact contains name and email


export default combineReducers({
    contacts: ContactReducer,
    products: ProductReducer,
    customers: CustomerReducer
})

redux store

contacts: [state managed by ContactReducer]
products: [state managed by ProductReducer]

===

import rootReducer from './redux/reducers';

moduleResolution of nodejs uses "index.js" as entry point

import React from 'react';

useEffect.js
usememo.js
react.js
useCallback.js

https://www.npmjs.com/package/dotenv

===================================

 npx create-react-app reduxmiddleware
 yarn add redux react-redux redux-thunk axios

================

Redux MiddleWare
* redux thunk
* redux saga
* redux observables

Redux middleware provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.

Redux is synchronous 
Redux store doesn't know anything about async logic. It only knows how to synchronously dispatch actions

view ==> dispatch(action) ==> reducer ==> updates the state ==> view gets the state
view uses the state ==> dispatch(newaction)

============
React Redux hooks
useSelector() The selector is approximately equivalent to the mapStateToProps argument to connect conceptually.

let {contacts} = useSelector(state => state.contacts);

is same as 

function mapStateToProps(state) {
	return {
		contacts: state.contacts
	}
}

connect(mapStateToProps,..)(App);

useDispatch() similar to mapDispatchToProps(dispatch) { ...}

====================
https://redux.js.org/tutorials/essentials/part-5-async-logic

Thunk middleware for Asyncronous actions.

As of Redux ==> dispatch takes only action object.
With Thunk we can dispatch functions

Thunk intercepts dispatch ==> makes stage wise state update

Thunk ==> dispatch(function) ==> make API call
Thunk ==> dispatch(action) ==> call reducer to update the state

===============================

Redux-Saga

uses ES6 generators ==> function with multiple return values

function* fetchData() {
	task1
	task2
	yield "A"
	task3
	task4
	task5
	yield "B"
	task6
	yield "C"
}

let iter = fetchData();

iter.next(); // A

check the returned value  and decide

iter.next(); // B

use "B"

iter.next() // C

================

Saga

call(function)

put(action)


Users.js for Thunk
```
import React from 'react';
import {fetchUsers} from './redux/thunk/thunkapi';
import { useSelector, useDispatch } from 'react-redux';

export default function Users() {
    let state = useSelector(state => state);
    let dispatch = useDispatch();

    let {loading, error, users} = state;
    // componentDidMount
    React.useEffect(() => {
        dispatch(fetchUsers());
    }, []);

    return <>
       {
           loading? <h1>Loading..</h1> :
           users.map(user => <h1 key={user.id}>{user.name}, {user.email}</h1>)
       }
    </>
}

```

Users.js for Saga

```
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

import {FETCH_USERS_REQUEST} from './redux/Actions';

export default function Users() {
    let state = useSelector(state => state);
    let dispatch = useDispatch();

    let {loading, error, users} = state;
    // componentDidMount
    React.useEffect(() => {
        dispatch({type:FETCH_USERS_REQUEST}); 
    }, []);

    return <>
        <button type="button"
         onClick={()=>dispatch({type:FETCH_USERS_REQUEST})}>Reload</button>
       {
           loading? <h1>Loading..</h1> :
           users.map(user => <h1 key={user.id}>{user.name}, {user.email}</h1>)
       }
    </>
}



```


npx create-next-app sampleapp

Next.js supports SSR, CSR

SSR ==> data from API call and serve static page to client

CSR ==> pass data to client, render in client

"pages" folder
is place where you create your react components

pages/ProductList.jsx

pages/Cart.jsx

http://server/ProductList
http://server/Cart

SSR

export default function ProductList({products}) {
	return <>
		{
			products.map(...)
		}
	</>
}	


export const getServerSideProps = async () => {
	const res = axios.get(...)
	return {
		props: {
			products:res
		}
	}
}


Cart.js
CSR
export defualt function Cart() {
	useEffect(() => {
		api call
	})
}