# 1 - Hello React

## Notes for Instructors

* Components - talk about the conceptual idea of components, not just React components
  * E.g. bootstrap components
* Why React?
  * Updating the DOM is potentially buggy, verbose, slow
  * In complex web apps (like Facebook), updating the DOM is common
  * React solves a lot of those problems
* Thinking in React exercise - useful to print out the screenshot, so they can draw on it
* Rendering in React section
  * Build towards component usage from vanilla DOM
  * This hopefully reduces the "magic" that React is
  * Although don't spend too much time on it - the trainee's don't know about other frameworks, and so don't really care about other approaches
  * Also useful to identify why the React api is improved over the vanilla DOM apis
* JSX section
  * Open the [Babel REPL](https://babeljs.io/repl/) - demonstrate that there isn't any magic in JSX
  * Just React.createElement calls with syntax sugar
* Do not ask students to install Create-React-App
  * Instead use `npx create-react-app my-app` it automatically installs the latest version of Create React App.
  * CRA can consume a lot of resources (especially on older laptops) so emphasize stopping/starting
  * This is the first time that students will have encountered a file watcher/daemon background process
    * So take some time to demonstrate how to start and stop the app
    * Recommend that students with slower computers stop the app when they are not using it
* Installing `stop-runaway-react-effects`
  * A package to prevent accidental infinite `useEffect` loops
  * It **must** be imported before the `react` import so that `useEffect` can be monkey-patched
  * [Package docs](https://github.com/kentcdodds/stop-runaway-react-effects)
* Making an argument for props section - Relate to a situation in real life, something like: imagine what our boss might ask for with this small application. What could our boss ask for which would mean we would have to make changes to the code?
* Exercises
  * Written to be quite step-by-step deliberately
    * Some students were distracted by the wording and not getting to the useful part of the exercise
    * This is a tricky balance though - now some students will be distracted by the wordy-ness of the exercises. Feedback welcome
  * Exercises in lessons 2 & 3 depend on the completing the exercises in lesson 1
    * So ensure students have completed most of them before moving on
    * We may want to introduce a way of "catching them up" - have tagged "checkpoints" on a git repo?
* Interactive examples
  * All of the examples should have an associated CodeSandbox with identical code
  * This is so that you can change the example to help demonstrate if necessary
    * I have found this very useful in the past, especially when answering questions like "what happens if you do X?"
    * You can type up exactly what they're asking about and demo it
  * Props section
    * Makes a common analogy of "props as arguments" to a function
    * students often get tripped on up on the `props` argument to a functional component
    * They tend to forget to add it to the function signature
    * Or they think that each prop is given as a separate argument
  * The first class may be a little short. But not short enough to start getting into state
    * If you have extra time, PropTypes/defaultProps might be worth covering
    * There is a Further Reading section at the very end of lesson 2 about this

## Homework Suggestion

{% hint style="info" %}
Remember copy the Homework to the [Trello ](https://trello.com/b/wl6LgDXD/homework-overview)at the end of the class
{% endhint %}

1. If unfinished, complete the in-class exercises on your `pokedex` app
2. (Delivery) Fork and clone [cyf-hotel-react](https://github.com/Migracode-Barcelona/cyf-hotel-react) project and complete all of the lesson 1

## Practice Day (Saturday) <a href="#practice-day-saturday" id="practice-day-saturday"></a>

Live coding session with students to go over [cyf-hotel-react](https://github.com/Migracode-Barcelona/cyf-hotel-react) project lession 1 steps and Q\&A session to clear their doubts.

## Feedback

{% hint style="info" %}
We can always improve thanks to your feedback, you can use this document to send your ideas or suggestions on every week. \
This [document ](https://docs.google.com/document/d/1AzqbpWri4cyeqqf8TVHIovfdRYWOdONsYU01LVvdPvI)will help us to improve Syllabus and this guide
{% endhint %}