🔥 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.

1. ❄️ 01-add-react-in-a-min : Create a react app in a minute 🕐 using React Scripts
2. 🚀 01-create-react-app : Create a React application using create-react-app
3. 📦 01-react-app-parcel : Create a React application using parcel
4. 🎁 01-react-app-webpack : Set up React application with using Webpack and Babel

1. 🎋 02-component-types : Types of Components : Class & Functional Components

2. 💫 02-jsx-examples : Examples of JSX

3. ⛄ 02-state-and-props : Examples for Component State and Props

4. 🌾 02-hierarchical-components Demo for Parent & Child Component, with state and props.

5. 🎌 02-handling-routes Handling routes using @reach/router

6. 🌾 02-get-derived-state-from-props Example for Component Lifecycle method: getDerivedStateFromProps, constructor, forceUpdate

7. 📋 02-handling-forms Handling forms in react

1. 📦 03-react-application-example Example for creating React Application with Header Footer Navbar, Display Posts by fetching data from

2. ⛄ 03-react-app-example2 Example for Adding New posts using when the form is submitted. and api and Handling forms

3. 💫 03-active-links Example for Active links using Reach router.

4. 🌲 03-higher-order-component Higher Order Component Example

5. 💦 03-pure-component Pure Components Example

6. 📝 03-react-memo React memo example

7. ➡️ 03-refs React's Refs example

8. 🌴 03-context React Context example

1. ➡️ react-hooks React Hooks

1. 🔎 live-search-react Realtime search on typing using react and axios. Includes pagination( Onchange Input ).
2. 📱 mmenu-react-app Mobile menu Sidebar using Burger Menu

1. Clone this repo in git clone https://github.com/imranhsayed/react-workshop
2. cd react-workshop
3. git checkout branch-name
4. 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 mode

1. Pictures
2. MeetUp

1. React Tutorial Series
2. React Hooks Series

1. 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>
)

1. SetUp React App with Webpack and Babel

1. Twitter

• MIT license