Awesome Open Source
Awesome Open Source

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:

  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

Day 3:

  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

React Hooks

  1. ➡️ react-hooks React Hooks

Miscellaneous:

  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

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

License


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,711) 
react (5,295) 
webpack (1,144) 
reactjs (1,055) 
babel (348) 
components (286) 
react-components (202) 
state-management (188) 
forms (167) 
jsx (154) 
state (115) 
context (33) 
props (26) 
higher-order-component (21) 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising 📦 10
All Projects
Application Programming Interfaces 📦 124
Applications 📦 192
Artificial Intelligence 📦 78
Blockchain 📦 73
Build Tools 📦 113
Cloud Computing 📦 80
Code Quality 📦 28
Collaboration 📦 32
Command Line Interface 📦 49
Community 📦 83
Companies 📦 60
Compilers 📦 63
Computer Science 📦 80
Configuration Management 📦 42
Content Management 📦 175
Control Flow 📦 213
Data Formats 📦 78
Data Processing 📦 276
Data Storage 📦 135
Economics 📦 64
Frameworks 📦 215
Games 📦 129
Graphics 📦 110
Hardware 📦 152
Integrated Development Environments 📦 49
Learning Resources 📦 166
Legal 📦 29
Libraries 📦 129
Lists Of Projects 📦 22
Machine Learning 📦 347
Mapping 📦 64
Marketing 📦 15
Mathematics 📦 55
Media 📦 239
Messaging 📦 98
Networking 📦 315
Operating Systems 📦 89
Operations 📦 121
Package Managers 📦 55
Programming Languages 📦 245
Runtime Environments 📦 100
Science 📦 42
Security 📦 396
Social Media 📦 27
Software Architecture 📦 72
Software Development 📦 72
Software Performance 📦 58
Software Quality 📦 133
Text Editors 📦 49
Text Processing 📦 136
User Interface 📦 330
User Interface Components 📦 514
Version Control 📦 30
Virtualization 📦 71
Web Browsers 📦 42
Web Servers 📦 26
Web User Interface 📦 210