Reactjs workshop

[15m] Ice breaking

[03m] Libraries vs frameworks

[05m] React and Angular comparison, maybe bring in VueJS (pros and cons)

[01m] Organizations that use react

[20m] Setting up the development environment

[05m] Installing create-react-app globally

[07m] creating a project with create-react-app

[05m] breaking down the existing folders and files (package.json, node_modules, public...)

[03m] Running the project

 [05m] Types and behaviour of tags in react (self closing, paired tags, children..)

[03m] Modifying the src/App.js and view the changes.

[03m] breaking down the src/index.js

[05m] What is a component (breaking down LinkedIn's feed components)

[05m] Breaking down the component ( imports, render()...)

[05m] What is the state and how do we use it ?

[05m] Adding some state to src/Apps.js and explaining what the `this` keyword refers to

[02m] Declaring a variable and using it inside the jsx

[03m] Talking about `let` and  ES6/7..

 Introducing `<React.Fragment></React.Fragment>`

[02m] Presenting the project that we are going to build in 6 hours (a shopping list)

[03m] They will then break down the project into components.

Start the project

[02m] Setting a folder/file structure

[06m] Creating all the component folders and files

[10m] Installing and importing bootstrap 4

[25m] Coding the first component Appbar.jsx

Prepare the basic Component code

Grab some navbar code from the bootstrap docs.

the Ctrl+D trick to replace all every class with className

 **************************** DAY TWO ***********************************

[25m] Coding the the next component (ProductList.jsx)

Introducing `<React.Fragment></React.Fragment>`

Introducing Arrow functions

Introducing the `.map()` function

[15m] Coding the next component (Product.jsx, still no props yet, a static component to display foreach element in the products array in ProductList.jsx)

 [15m] Introducing Styling in react, (scoped styling, global styling, in js styling, no js styling)

[03m] Fix the proudctList.jsx styling (add `display: flex` make the parent div compatible with bootstrap)

Introducing Styling in react, (scoped styling, global styling, in js styling, no js styling)

 [05m] Introducing props

[02m] Pass the ProductList Array via props to each Product

[05m] Introducing the `key` prop

[10m] Accessing the props from `this.props.product` and using them to fill our product.

[03m] Adding state to src/App.jsx for the cart

Creating the `handleAddToCart` method (make it replace the current cart items)

Iterating through the cart and displaying the content on the App.js temporarily

Passing the `handleAddToCart` method down to the Product.jsx child

Fixing the `handleAddToCart` by making it append items instead of replacing them

Passing down the cart.length to the Appbar to visualise the number of cart items through the badge

In

Introducing props