avanderheyden / react-workshop

:hammer_and_pick: :construction: This is a workshop for learning how to build React Applications

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:

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

Day 2:

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

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

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

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

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

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

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

Day 3:

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

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

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

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

16. 💦 03-pure-component Pure Components Example

17. 📝 03-react-memo React memo example

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

19. 🌴 03-context React Context example

React Hooks

20. ➡️ react-hooks React Hooks

Miscellaneous:

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

Installation

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.

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 🌄

1. Pictures
2. MeetUp

Tutorial Videos 🎥

1. React Tutorial Series
2. React Hooks Series

FAQs

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

Useful Blogs

1. SetUp React App with Webpack and Babel

Social Links

1. Twitter

License

• MIT license