imranhsayed / React Workshop
Programming Languages
Labels
Projects that are alternatives of or similar to React Workshop
React Workshop
π₯ 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
App Demo
πΉπΉ React Developer Tools (Chrome Extension) Demo
Live Search Demo
πΉMmenu Navigation
πΉBefore you Start
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.
Branch Info
Day 1:
- βοΈ 01-add-react-in-a-min : Create a react app in a minute π using React Scripts
- π 01-create-react-app : Create a React application using create-react-app
- π¦ 01-react-app-parcel : Create a React application using parcel
- π 01-react-app-webpack : Set up React application with using Webpack and Babel
Day 2:
-
π 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
Day 3:
-
π¦ 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
React Hooks
- β‘οΈ react-hooks React Hooks
Miscellaneous:
- π live-search-react Realtime search on typing using react and axios. Includes pagination( Onchange Input ).
- π± mmenu-react-app Mobile menu Sidebar using Burger Menu
Installation
- Clone this repo in
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.
Instructions
Please follow the README for individual repositories
Common Commands
-
dev
Runs webpack dev server for development ( in watch mode ) -
prod
Runs webpack in production mode
Workshop Gallery π
Tutorial Videos π₯
FAQs
- How to pass a parameter in a event handler?
const handleRemoveProductClick = ( event, productId ) => {
console.warn( 'Clicked productId', productId );
};
return(
<button onClick={ ( event ) => handleRemoveProductClick( event, item.productId ) }>Item</button>
)