Reactjs workshop
What I will teach in 6 hours of react github.com/ghndr/react-cart-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
Related Checklists
