This is a workshop for learning how to build React Applications
π₯ This is a workshop for learning how to build React Application
******* PLEASE STAR MY REPO TO SUPPORT MY WORK π ******
Please follow me π on twitter and github to stay updated with new content
I've branched the repo for individual topics.
To see all branches run: git branch --all
.
To checkout to individual branch run: git checkout <branch name>
. Then check its README.md .
From there on you should be good.
π 02-component-types : Types of Components : Class & Functional Components
π« 02-jsx-examples : Examples of JSX
β 02-state-and-props : Examples for Component State and Props
πΎ 02-hierarchical-components Demo for Parent & Child Component, with state and props.
π 02-handling-routes Handling routes using @reach/router
πΎ 02-get-derived-state-from-props Example for Component Lifecycle method: getDerivedStateFromProps, constructor, forceUpdate
π 02-handling-forms Handling forms in react
π¦ 03-react-application-example Example for creating React Application with Header Footer Navbar, Display Posts by fetching data from
β 03-react-app-example2 Example for Adding New posts using when the form is submitted. and api and Handling forms
π« 03-active-links Example for Active links using Reach router.
π² 03-higher-order-component Higher Order Component Example
π¦ 03-pure-component Pure Components Example
π 03-react-memo React memo example
β‘οΈ 03-refs React's Refs example
π΄ 03-context React Context example
git clone https://github.com/imranhsayed/react-workshop
cd react-workshop
git checkout branch-name
npm install
You can see the branches and their details listed above.
Please follow the README for individual repositories
dev
Runs webpack dev server for development ( in watch mode )prod
Runs webpack in production modeconst handleRemoveProductClick = ( event, productId ) => {
console.warn( 'Clicked productId', productId );
};
return(
<button onClick={ ( event ) => handleRemoveProductClick( event, item.productId ) }>Item</button>
)