1.

Search Component
2. List Component
3. List item Component
4. Show Children Component

1. Country Component
2. State Component
3. City Component

Geo-List Component :
type: country / state / city
title: Countries, States / Cities

Country Component:
===================

search component
throttling / debouncing
clear icon
to clear the search string

list component
list item component
show children icon component
show info icon component

Search service:
===============
search word
entity-type: country / state / city
response data

GeoList Component

response from search

<Country list={geoList}></Country>

<State list="{stateList}"></State>

<City list="{cityList}"></City>

<div class="container">
<Title text{type}></Title>
<Search type={type}></GeoSearch>
<List type="countries" list={countryList}></List>
</div>

List Component:
================
<ul>
 {list.map(item => {
<ListItem item=item></ListItem>
})}
</ul>

ListItem Component:
===================
<li>
<<flag>>
<<countryname>>
<<country_abbreviation>>
<ListActionIcons id={listItemid}></ListActionIcons>
</li>

ListActionIcons Component:
<div>
<<infoicon>>
<<showicon>>
</div>

css for title: text-transform: capitalize;

Data fetching from JSON:

======================
https://www.pluralsight.com/guides/fetch-data-from-a-json-file-in-a-react-
app

https://www.pluralsight.com/guides/load-and-render-json-data-into-react-
components

Crux of React Source code:

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

1. React DOM
2. React Fiber
3. React Hooks
4. React Scheduler
5. React Work Unit
6. Hook Data structure
7. Fiber node structure
8. Update Queue
9. React Provider with Context API
10. React
11. React Event Handling
12 React Suspense

11. State Management - Redux

12. Co-operative Scheduling
13. declarative function composition.
14. React Application patterns
 ES6 / 7/ 8/ 9 New features

ReactDOM.render execution flow === blog with flow diagram and explanation

ReactDOM.render :

render(
element: React$Element<any>,
container: DOMContainer,
callback: ?Function,
) {
return legacyRenderSubtreeIntoContainer(
null,
element,
container,
false,
callback,
);
},

===>

ReactDOM.legacyRenderSubtreeIntoContainer

function legacyRenderSubtreeIntoContainer(
parentComponent: ?React$Component<any, any>,
children: ReactNodeList,
container: DOMContainer,
forceHydrate: boolean,
callback: ?Function,
)

===>
function legacyCreateRootFromDOMContainer(
container: DOMContainer,
forceHydrate: boolean,
):

====>
function ReactRoot(
container: Container,
isConcurrent: boolean,
hydrate: boolean,
)

=====>
/react-reconciler/src/ReactFiberReconciler.js
====>
function createContainer(
containerInfo: Container,
isConcurrent: boolean,
hydrate: boolean,
):

====>

/react-reconciler/src/ReactFiberRoot.js
 export function createFiberRoot(
containerInfo: any,
isConcurrent: boolean,
hydrate: boolean,
):

=====>
src/react-reconciler/src/ReactFiber.js

function
createHostRootFiber(isConcurrent: boolean): Fiber

===>
createFiber(HostRoot, null, null,
mode);
---> passing reactWorktag as
"HostRoot"

Once HostRootContainer Fiber

created, root.render() called

====>

ReactRoot.prototype.render = function(
children:
ReactNodeList,
callback: ?() =>
mixed,
):

===> creates a new

ReactWork.
work.then(callback);

===>

react/packages/react-reconciler/inline.dom.js
===>
react/packages/react-reconciler/src/ReactFiberReconciler.js

function
updateContainer(
element:
ReactNodeList,
container:
OpaqueRoot,

parentComponent: ?React$Component<any, any>,

callback: ?
Function,
):

====>
export
function updateContainerAtExpirationTime(

element: ReactNodeList,
container: OpaqueRoot,

parentComponent: ?React$Component<any, any>,

expirationTime: ExpirationTime,

callback: ?Function,
)

====>

function scheduleRootUpdate(

current: Fiber,

element: ReactNodeList,

expirationTime: ExpirationTime,

callback: ?Function,
)

//
// import { GeoList } from './GeoList';
// import './geodemo.css';
//
// const initialState = {
// entity: 'countries',
// searchStr: '',
// list: [],
// loading: true,
// error: ''
// };
//
// export const GeoDemo = () => {
// const [countryList, setCountryList] = useState([]);
// const [stateList, setStateList] = useState([]);
// const [cityList, setCityList] = useState([]);
//
//
// const [error, setError] = useState('');
// const [loading, setLoading] = useState(true);
//
// useEffect(async () => {
// try {
// const res = await fetch('data/countries.json', {
// headers : {
// 'Content-Type': 'application/json',
// 'Accept': 'application/json'
// }
// });
//
// const data = await res.json();
// setCountryList(data);
// setLoading(false);
// } catch(err) {
// setError(err.message);
// }
// }, []);
//
// const filterCountries = searchStr => {
// const data = [...countryList].filter(country =>
country.name.toLowerCase().startsWith(searchStr));
// setCountryList(data);
// };
//
//
// if (loading) {
// return (
// <div className="flexContainer">
// <h1> Loading ... </h1>
// <GeoList type="states" list={stateList}
handleSearch={searchStr => filterCountries(searchStr)}/>
// <GeoList type="cities" list= {cityList}
handleSearch={searchStr => filterCountries(searchStr)}/>
// </div>
// );
// }
//

// if (error) {
// return (
// <div className="flexContainer">
// <h1>{error}</h1>
// <GeoList type="states" handleSearch={searchStr =>
filterCountries(searchStr)}/>
// <GeoList type="cities" handleSearch={searchStr =>
filterCountries(searchStr)}/>
// </div>
// );
// }
//
// return (
// <div className="flexContainer">
// <GeoList type="countries" list = {countryList}
handleSearch={searchStr => filterCountries(searchStr)}/>
// <GeoList type="states" list={stateList}
handleSearch={searchStr => filterCountries(searchStr)}/>
// <GeoList type="cities" list= {cityList} handleSearch={searchStr =>
filterCountries(searchStr)}/>
// </div>
// );
// };
//

<List type={type} list = {list}

itemComponent={listItemComponents[type]} />

import React from 'react';

import { Header } from '../common/Header/Header';
import { CountryList, Search } from '.';
 import './geolist.css';

export const GeoList = ({ type }) => {

console.log("type::" + type);

const listComponents = {
countries: CountryList
};

console.log("listCompo");
console.log(listComponents)

return (
<div className="listContainer">
<Header type={type} />
<Search type={type} />
{
const ListComponent = listComponents[type];
<ListComponent />
</div>
);
};

if (openC > closeC || openC < 0 || closeC < 0) {

return;
}

if (openC === 0 && closeC === 0) {

console.log(comboStr)
res.push(comboStr);
return;
}

helper(openC - 1, closeC, comboStr + "(");

helper(openC, closeC - 1, comboStr + ")");

"s z z z s"
"s z ejt"