├── .gitignore ├── Handling-forms.gif ├── README.md ├── README.md~ ├── React-Chrome-Extension.gif ├── live-search-demo.gif └── mmenu.gif /.gitignore: -------------------------------------------------------------------------------- 1 | .idea/ 2 | *.log 3 | npm-debug.log 4 | yarn-error.log 5 | .DS_Store 6 | build/ 7 | node_modules/ 8 | dist/ 9 | .cache 10 | -------------------------------------------------------------------------------- /Handling-forms.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imranhsayed/react-workshop/e5d3ae75623758972ee085ef52fb12f077316bb4/Handling-forms.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Workshop 2 | 3 | :fire: This is a workshop for learning how to build React Application 4 | 5 | ******* PLEASE STAR MY REPO TO SUPPORT MY WORK 🙏 ****** 6 | 7 | Please follow me 🙏 on [twitter](https://twitter.com/imranhsayed) and [github](https://github.com/imranhsayed) to stay updated with new content 8 | 9 | ## :video_camera: [App Demo](https://github.com/imranhsayed/react-workshop/tree/03-react-app-example2) 10 | ![](Handling-forms.gif) 11 | 12 | ## :video_camera: React Developer Tools (Chrome Extension) Demo 13 | ![](React-Chrome-Extension.gif) 14 | 15 | ## :video_camera: [Live Search Demo](https://github.com/imranhsayed/react-workshop/tree/live-search-react) 16 | ![](live-search-demo.gif) 17 | 18 | ## :video_camera: [Mmenu Navigation]() 19 | ![](mmenu.gif) 20 | 21 | ## Before you Start 22 | I've branched the repo for individual topics. 23 | 24 | To see all branches run: `git branch --all`. 25 | 26 | To checkout to individual branch run: `git checkout `. Then check its README.md . 27 | From there on you should be good. 28 | 29 | 30 | ## Branch Info 31 | 32 | ### Day 1: 33 | 1. :snowflake: [01-add-react-in-a-min](https://github.com/imranhsayed/react-workshop/tree/01-add-react-in-a-min) : Create a react app in a minute :clock1: using React Scripts 34 | 2. :rocket: [01-create-react-app](https://github.com/imranhsayed/react-workshop/tree/01-create-react-app) : Create a React application using create-react-app 35 | 3. :package: [01-react-app-parcel](https://github.com/imranhsayed/react-workshop/tree/01-react-app-parcel) : Create a React application using parcel 36 | 4. :gift: [01-react-app-webpack](https://github.com/imranhsayed/react-workshop/tree/01-react-app-webpack) : Set up React application with using Webpack and Babel 37 | 38 | ### Day 2: 39 | 5. :tanabata_tree: [02-component-types](https://github.com/imranhsayed/react-workshop/tree/02-component-types) : Types of Components : Class & Functional Components 40 | 6. :dizzy: [02-jsx-examples](https://github.com/imranhsayed/react-workshop/tree/02-jsx-examples) : Examples of JSX 41 | 7. :snowman: [02-state-and-props](https://github.com/imranhsayed/react-workshop/tree/02-state-and-props) : Examples for Component State and Props 42 | 8. :ear_of_rice: [02-hierarchical-components](https://github.com/imranhsayed/react-workshop/tree/02-hierarchical-components) Demo for Parent & Child Component, with state and props. 43 | 9. :crossed_flags: [02-handling-routes](https://github.com/imranhsayed/react-workshop/tree/02-handling-routes) Handling routes using @reach/router 44 | 10. :ear_of_rice: [02-get-derived-state-from-props](https://github.com/imranhsayed/react-workshop/tree/02-get-derived-state-from-props) Example for Component Lifecycle method: getDerivedStateFromProps, constructor, forceUpdate 45 | 46 | 11. :clipboard: [02-handling-forms](https://github.com/imranhsayed/react-workshop/tree/02-handle-forms) Handling forms in react 47 | 48 | ### Day 3: 49 | 12. :package: [03-react-application-example](https://github.com/imranhsayed/react-workshop/tree/03-react-application-example) Example for creating React Application with Header Footer Navbar, Display Posts by fetching data from 50 | 13. :snowman: [03-react-app-example2](https://github.com/imranhsayed/react-workshop/tree/03-react-app-example2) Example for Adding New posts using when the form is submitted. and api and Handling forms 51 | 14. :dizzy: [03-active-links](https://github.com/imranhsayed/react-workshop/tree/03-active-links) Example for [Active links](https://reach.tech/router/example/active-links) using Reach router. 52 | 53 | 15. :evergreen_tree: [03-higher-order-component](https://github.com/imranhsayed/react-workshop/tree/03-higher-order-component) Higher Order Component Example 54 | 16. :sweat_drops: [03-pure-component](https://github.com/imranhsayed/react-workshop/tree/03-pure-components) Pure Components Example 55 | 17. :memo: [03-react-memo](https://github.com/imranhsayed/react-workshop/tree/03-react-memo) React memo example 56 | 18. :arrow_right: [03-refs](https://github.com/imranhsayed/react-workshop/tree/03-refs) React's Refs example 57 | 19. :palm_tree: [03-context](https://github.com/imranhsayed/react-workshop/tree/03-context) React Context example 58 | 59 | ### React Hooks 60 | 20. :arrow_right: [react-hooks](https://github.com/imranhsayed/react-hooks) React Hooks 61 | 62 | ### Miscellaneous: 63 | 21. :mag_right: [live-search-react](https://github.com/imranhsayed/react-workshop/tree/live-search-react) Realtime search on typing using react and axios. Includes pagination( Onchange Input ). 64 | 22. :iphone: [mmenu-react-app](https://github.com/imranhsayed/react-workshop/tree/mmenu-react-app) Mobile menu Sidebar using Burger Menu 65 | 66 | ## Installation 67 | 68 | 1. Clone this repo in `git clone https://github.com/imranhsayed/react-workshop` 69 | 2. `cd react-workshop` 70 | 3. `git checkout branch-name` 71 | 4. `npm install` 72 | 73 | You can see the branches and their details listed above. 74 | 75 | ## Instructions 76 | 77 | Please follow the README for individual repositories 78 | 79 | ## Common Commands 80 | 81 | - `dev` Runs webpack dev server for development ( in watch mode ) 82 | - `prod` Runs webpack in production mode 83 | 84 | ## Workshop Gallery :sunrise_over_mountains: 85 | 1. [Pictures](https://twitter.com/imranhsayed/status/1125435733106237441) 86 | 2. [MeetUp](https://www.meetup.com/PuneJS/events/260908693/) 87 | 88 | ## Tutorial Videos :movie_camera: 89 | 1. [React Tutorial Series](https://youtu.be/M-Aw4p0pWwg) 90 | 2. [React Hooks Series](https://youtu.be/2p0N29Hn-Vk) 91 | 92 | ## FAQs 93 | 94 | 1. How to pass a parameter in a event handler? 95 | 96 | ```ruby 97 | const handleRemoveProductClick = ( event, productId ) => { 98 | console.warn( 'Clicked productId', productId ); 99 | }; 100 | return( 101 | 102 | ) 103 | ``` 104 | 105 | ## Useful Blogs 106 | 107 | 1. [SetUp React App with Webpack and Babel](https://codeytek.com/set-up-react-app-with-webpack-and-babel-react-babel-webpack-install-node-application/) 108 | 109 | ## Social Links 110 | 111 | 1. [Twitter](https://twitter.com/imranhsayed) 112 | 113 | ## License 114 | 115 | [![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org) 116 | 117 | - **[MIT license](http://opensource.org/licenses/mit-license.php)** 118 | -------------------------------------------------------------------------------- /README.md~: -------------------------------------------------------------------------------- 1 | # React Workshop 2 | 3 | :fire: This is a workshop for learning how to build React Application. 4 | 5 | ## :video_camera: [App Demo](https://github.com/imranhsayed/react-workshop/tree/03-react-app-example2) 6 | ![](Handling-forms.gif) 7 | 8 | ## :video_camera: React Developer Tools (Chrome Extension) Demo 9 | ![](React-Chrome-Extension.gif) 10 | 11 | ## :video_camera: [Live Search Demo](https://github.com/imranhsayed/react-workshop/tree/live-search-react) 12 | ![](live-search-demo.gif) 13 | 14 | ## :video_camera: [Mmenu Navigation]() 15 | ![](mmenu.gif) 16 | 17 | ## Before you Start 18 | I've branched the repo for individual topics. 19 | 20 | To see all branches run: `git branch --all`. 21 | 22 | To checkout to individual branch run: `git checkout `. Then check its README.md . 23 | From there on you should be good. 24 | 25 | 26 | ## Branch Info 27 | 28 | ### Day 1: 29 | 1. :snowflake: [01-add-react-in-a-min](https://github.com/imranhsayed/react-workshop/tree/01-add-react-in-a-min) : Create a react app in a minute :clock1: using React Scripts 30 | 2. :rocket: [01-create-react-app](https://github.com/imranhsayed/react-workshop/tree/01-create-react-app) : Create a React application using create-react-app 31 | 3. :package: [01-react-app-parcel](https://github.com/imranhsayed/react-workshop/tree/01-react-app-parcel) : Create a React application using parcel 32 | 4. :gift: [01-react-app-webpack](https://github.com/imranhsayed/react-workshop/tree/01-react-app-webpack) : Set up React application with using Webpack and Babel 33 | 34 | ### Day 2: 35 | 5. :tanabata_tree: [02-component-types](https://github.com/imranhsayed/react-workshop/tree/02-component-types) : Types of Components : Class & Functional Components 36 | 6. :dizzy: [02-jsx-examples](https://github.com/imranhsayed/react-workshop/tree/02-jsx-examples) : Examples of JSX 37 | 7. :snowman: [02-state-and-props](https://github.com/imranhsayed/react-workshop/tree/02-state-and-props) : Examples for Component State and Props 38 | 8. :ear_of_rice: [02-hierarchical-components](https://github.com/imranhsayed/react-workshop/tree/02-hierarchical-components) Demo for Parent & Child Component, with state and props. 39 | 9. :crossed_flags: [02-handling-routes](https://github.com/imranhsayed/react-workshop/tree/02-handling-routes) Handling routes using @reach/router 40 | 10. :ear_of_rice: [02-get-derived-state-from-props](https://github.com/imranhsayed/react-workshop/tree/02-get-derived-state-from-props) Example for Component Lifecycle method: getDerivedStateFromProps, constructor, forceUpdate 41 | 42 | 11. :clipboard: [02-handling-forms](https://github.com/imranhsayed/react-workshop/tree/02-handle-forms) Handling forms in react 43 | 44 | ### Day 3: 45 | 12. :package: [03-react-application-example](https://github.com/imranhsayed/react-workshop/tree/03-react-application-example) Example for creating React Application with Header Footer Navbar, Display Posts by fetching data from 46 | 13. :snowman: [03-react-app-example2](https://github.com/imranhsayed/react-workshop/tree/03-react-app-example2) Example for Adding New posts using when the form is submitted. and api and Handling forms 47 | 14. :dizzy: [03-active-links](https://github.com/imranhsayed/react-workshop/tree/03-active-links) Example for [Active links](https://reach.tech/router/example/active-links) using Reach router. 48 | 49 | 15. :evergreen_tree: [03-higher-order-component](https://github.com/imranhsayed/react-workshop/tree/03-higher-order-component) Higher Order Component Example 50 | 16. :sweat_drops: [03-pure-component](https://github.com/imranhsayed/react-workshop/tree/03-pure-components) Pure Components Example 51 | 17. :memo: [03-react-memo](https://github.com/imranhsayed/react-workshop/tree/03-react-memo) React memo example 52 | 18. :arrow_right: [03-refs](https://github.com/imranhsayed/react-workshop/tree/03-refs) React's Refs example 53 | 19. :palm_tree: [03-context](https://github.com/imranhsayed/react-workshop/tree/03-context) React Context example 54 | 55 | ### React Hooks 56 | 20. :arrow_right: [react-hooks](https://github.com/imranhsayed/react-hooks) React Hooks 57 | 58 | ### Miscellaneous: 59 | 21. :mag_right: [live-search-react](https://github.com/imranhsayed/react-workshop/tree/live-search-react) Realtime search on typing using react and axios. Includes pagination( Onchange Input ). 60 | 22. :iphone: [mmenu-react-app](https://github.com/imranhsayed/react-workshop/tree/mmenu-react-app) Mobile menu Sidebar using Burger Menu 61 | 62 | ## Installation 63 | 64 | 1. Clone this repo in `git clone https://github.com/imranhsayed/react-workshop` 65 | 2. `cd react-workshop` 66 | 3. `git checkout branch-name` 67 | 4. `npm install` 68 | 69 | You can see the branches and their details listed above. 70 | 71 | ## Instructions 72 | 73 | Please follow the README for individual repositories 74 | 75 | ## Common Commands 76 | 77 | - `dev` Runs webpack dev server for development ( in watch mode ) 78 | - `prod` Runs webpack in production mode 79 | 80 | ## Workshop Gallery :sunrise_over_mountains: 81 | 1. [Pictures](https://twitter.com/imranhsayed/status/1125435733106237441) 82 | 2. [MeetUp](https://www.meetup.com/PuneJS/events/260908693/) 83 | 84 | ## Tutorial Videos :movie_camera: 85 | 1. [React Tutorial Series](https://youtu.be/M-Aw4p0pWwg) 86 | 2. [React Hooks Series](https://youtu.be/2p0N29Hn-Vk) 87 | 88 | ## FAQs 89 | 90 | 1. How to pass a parameter in a event handler? 91 | 92 | ```ruby 93 | const handleRemoveProductClick = ( event, productId ) => { 94 | console.warn( 'Clicked productId', productId ); 95 | }; 96 | return( 97 | 98 | ) 99 | ``` 100 | 101 | ## Useful Blogs 102 | 103 | 1. [SetUp React App with Webpack and Babel](https://codeytek.com/set-up-react-app-with-webpack-and-babel-react-babel-webpack-install-node-application/) 104 | 105 | ## Social Links 106 | 107 | 1. [Twitter](https://twitter.com/imranhsayed) 108 | 109 | ## License 110 | 111 | [![License](http://img.shields.io/:license-mit-blue.svg?style=flat-square)](http://badges.mit-license.org) 112 | 113 | - **[MIT license](http://opensource.org/licenses/mit-license.php)** 114 | 115 | -------------------------------------------------------------------------------- /React-Chrome-Extension.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imranhsayed/react-workshop/e5d3ae75623758972ee085ef52fb12f077316bb4/React-Chrome-Extension.gif -------------------------------------------------------------------------------- /live-search-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imranhsayed/react-workshop/e5d3ae75623758972ee085ef52fb12f077316bb4/live-search-demo.gif -------------------------------------------------------------------------------- /mmenu.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/imranhsayed/react-workshop/e5d3ae75623758972ee085ef52fb12f077316bb4/mmenu.gif --------------------------------------------------------------------------------