Schedule

[nikhilaravi]

I think the schedule is a bit ambitious and maybe we should give them some more time to grasp basic react principles...!

Monday

James' workshop was great but if all the subsequent react projects are going to use webpack then it doesn't really make sense to introduce them to browserify, reactify, watchify etc etc. It might be better to first explain

• what is react and why would you want to use it
• what is jsx
• using CommonJS with React for modularising code and so the need for Webpack for bundling up code to run in the browser

Then go through how to set up a basic project and the folder structure they would need and then finally build a few basic React components. Getting them to clone Jack's react-webpack setup repo would be much faster but I think its really important they understand how to do it themselves!

Tuesday

Love the idea of getting them to make video tutorials!! 📹 If there are 4 groups maybe leave out animations and have something ilke:

• State and Props
• Component Lifecycle
• Virtual DOM
• Testing....

Project

Wow building amazon sounds really fun but I think it might be a bit overwhelming and adding in authentication etc kind of detracts from the focus on learning React and if they have to start worrying about managing state it might get a bit confusing for the first week.

Maybe simplify it to building a shopping cart.. So they have to be able to:

• Show a list of items (from mock data)
• Add an item to the cart
• Remove an item from the cart
• show the number of items in the cart
• show total price of the items in the cart
  etc kind of based on this example but without flux

[besarthoxhaj]

@nikhilaravi thanks for your feedback.

Monday

James tutorial as you mentioned uses browserify. Seems we are not using it anymore so makes sense to go with webpack.

10:00 - 10:30 Introducing React

• What it is?
• Who created it?
• When was created?
• Why would you want to use it?
• Explain briefly the architecture choice and jsx.
• Set learning objectives

10:30 - 13:00 Heads down on some code

• Build the first combo div-h1 component
• Some more explanation of jsx
• Add some className css
• Pass data inside the component and render them
• Create two components and render them
• Pass some more data to the whole app, loops to render lists
• Delete one element of the list, add one
• Explain state, props and how to interact with them

13:00 - 14:00 Lunch break

14:00 - 18:00 Set up webpack

• Introduce webpack by solving common problems
• What if we have hundreds of component? CommonJS
• What happens if we want to use some babel?
• What happens if we get board of compiling every time a change has been made?
• Create multiple components and perform some AJAX calls

Tuesday

10:00 - 10:30 Explain what we left behind

Dig into state and props in order to answer the following questions:

• What is kind of object is state?
• Why we need to call setState?
• What kind of object is props?
• Why you can not change it?*

Dig into the Component Lifecycle in order to answer the following questions:

• What are the different cycles?
• Make some examples with console.log() and nested components

Dig into Virtual DOM in order to answer the following questions:

• ...

Dig into testing in order to answer the following questions:

• How to unit test a component?
• How to run integration tests?

Project

Building Amazon. We were discussing this yesterday and we agree can be a bit overwhelming. However the student will have until Thursday 24, which means almost two weeks.
It's worth mentioning that most of the project coming into the space require some sort of authentication, content creation by the user and payments.
I expect people to fail by taking the wrong path, file structure, database schemas, wrong tests etc.
All stuff you want to do wrong when you are in class instead on a real project.

Learning objectives

• Understand how react works
• Understand and possibly implement redux
• Being able to test react properly
• Define a good strategy to implement AJAX call inside react
• Routing inside react applications

[besarthoxhaj]

I think the workshop will be only on Monday as Tuesday the groups will work autonomously on the research topics.

Should we schedule our talks on something like this:

Monday morning
we can be all there @nikhilaravi @izaakrogan @jrans helping people and explaining the basics.

Monday afternoon
@jrans can introduce webpack and then all together can continue building a sort of TODO app with some AJAX call.

[nikhilaravi]

@besarthoxhaj okay sure I can be at FAC on Monday!

[jrans]

@nikhilaravi @besarthoxhaj agreed that you either need to choose browserify or webpack from the off and stick with it. My preference is webpack but harmless either way!

[jrans]

@nikhilaravi @besarthoxhaj @izaakrogan I'm not here tomorrow. Will have to speak with Ines but hopefully be able to put in some time at some stages during the week.

[jrans]

https://github.com/jrans/week8-project this may be of some use. Week 8 project of last course. I think amazon may be a big ask. I think a stronger focus on the react philosophy and making sure they really understand by the end of two weeks should be the main goal.

[jrans]

The repo @nikhilaravi was mentioning https://github.com/jrans/React-Webpack-Set-Up Though I think it should be gone through step by step with a real understanding of what's going on and without hot loading to begin with!