React module

[kabaros]

This is a Proposed skeleton for the React module.

The need for a review is caused by few differences (and lessons learned from cohort 1):

• This round, the students did Node before React so no need to familiarise them with npm, packages etc...
• The students are already familiar with ES6 syntax
• Lessons learned: We gave React Router as a study subject to encourage the students to learn by their own - that didn't work at all.
• Reviewing the homework and exercises: The model where we have a continuous project that they build and improve during a module worked well. It will be good to have that sense of continuity for their exercises and homework this time around as well.

The module starts on September 30th in Scotland. This is the proposed skeleton of what to cover, and the order. You can have a look at it here https://codeyourfuture.github.io/syllabus-scotland/react/lesson1.html . Please ignore the contents of the lesson themselves - this is a quick dumb from the previous round (London cohort 1) that we should update with more relevant materials.

Please check the contributing guidelines on how to contribute to this module.

React 1

• React
  • Why React?
  • What is an SPA?
  • create-react-app
• Components
  • JSX
  • ES6 classes
  • Thinking in React
• JSX Patterns
  • Mapping Arrays
  • Conditionals
  • Embedding code
• props and state

React 2

• More Props and State
  • Stateful (smart) vs Stateless (dumb) components
• Component life cycle
  • componentDidMount: Making API calls
• Testing React

React 3

• React Router
• More testing

React 4

• React Native Workshop

If we cover OOP with es6 earlier in the JS modules, we can just nod to it in React. Also we could sum up JSX as ‘a way to embed Javascript into react applications’ and just focus on patterns.

The problem with React is that there's so much tooling involved compared to everything else so I'm thinking we could avoid confusion by now diving deep into JSX or React Router, focusing instead on practical application of the tools.

I also wouldn't focus as much on testing React components during the modules. Plenty of good resources out there on how to test React comps and because we've TDDed all the way through the past modules the behaviour should be engrained.

The discussion of stateless and stateful comps could be changed to presentational / containers and that can be the springboard into redux.

[kkarimi]

It needs to be noted that the main feedback we had from last time was that the students really struggled with it, and just about got it, though it mostly became clear in the actual project. Better fundamental JS and maybe Handlebars if it was covered this time around may help students understand this module better but more importantly they need to get engaged with a project to really get the react concepts and think in the SPA terms.

[scott-ad-riley]

I'd agree with the two above - it feels like getting to know the surface api of react (essentially React 1 above) would be the most important part. Touching on things like redux, react-router, SPA architecture are huge subjects that require a very good core understanding of React.

I think with some exercises and problems that force the students to handle state would be good, namely to get them used to the way that setState works and how the one-way data flow affects the way they solve problems in the framework. From that point I think stepping into making API calls and handling async behaviour would be much easier.

@kkarimi When you say handlebars - do you mean get them used to some sort of templating language? I think they've covered it (or something similar) in node already.

[kkarimi]

Yeah templating - they did node after react last time

[AlexJukes]

As a junior developer, and someone who was recently learned React and has been working with it exclusively for the past 3 months, I have some insight into both what I found most helpful for picking up key concepts when learning it from scratch but also what is useful to know when using it to develop professionally.

Personally, I found the Facebook Tic-Tac-Toe tutorial (https://facebook.github.io/react/tutorial/tutorial.html) really useful. It takes a little bit of time (I don't think students would be able to cover it in one session) but gives a great practical insight into both the power of React but also the large amount of tooling required to achieve even simple functionality, as mentioned above. I think having a 'time-travel' aspect of the exercise in was particularly illustrative, and even if not tic tac toe then incorporating a similar functionality into a project would be a good way to highlight the importance and benefits of state management.

Will the course have anything about the Redux framework?

[Amwam]

I think one key thing to focus on is why React is useful/worth learning. I think a lot of the students last time didn't really see the point of learning it, when they already knew how to manipulate the DOM, and hence struggled with its constraints.

Going for the functional/predicability aspect is probably the best way to go, as that can be relatively easy to show the benefits for.

Splitting their code up into components was something I think they struggled with early on, so we should focus on techniques for doing so. This also applies more generally to their code.

Personally I think we should drop react-router, for teaching routing (if we really need to) we could aim to build something simpler, like a function they can call to change state in a parent component, and use a switch statement to render the right component (sorry if that doesn't make much sense). The library is probably a bit to complex right now, and their time would be better spent learning more about React, or even Redux.

@AlexJukes Last time we didn't really teach Redux. We briefly introduced Flux as a concept, but that may have gone over the students heads a little. It should probably be taught at the end, if the students are comfortable enough with React, and want to start building bigger applications. I do think redux gets a bit overused, you can do quite a lot with just React on its own.

Finally, we taught Object Oriented programming in about 5 minutes last time (because of the extends keyword), I don't think that worked.
We should ease the students in a bit more, start with functional components, and Props so they can get used to building things in React, before we introduce Class Components, and state.

[kkarimi]

Notes from a quick discussion tonight with @dmitrigrabov as well:

1. Having a self-contained project which visualises what students are trying to achieve/aim for, which can help with students why they are learning

2. Might be worth considering adding a design perspective - atomic/modular design and how it can be helpful in projects with style guides/story books/sketch approach to web design

3. Flux/Redux might still be worth teaching with cartoons

4. Have stretch goals for each lesson may help to cover extra topics

[extwiii]

If you are planning to teach Flux/Redux, I think it is worth to follow Dan Abramov tutorials that he is showing first vanilla JS then redux way.

https://egghead.io/courses/getting-started-with-redux
https://egghead.io/courses/building-react-applications-with-idiomatic-redux

Also, he explains core concepts of React.js that why we need to use pure function and we shouldn't change state directly etc.