React lesson 1 #132

rarmatei · 2017-09-25T22:39:00Z

If this lesson were a person, it would wear a large T-shirt. It's so large mainly because it contains a lot of code examples.

The aim of this first lesson is to get them interested in React and learn the basics. I wanted to avoid spending too much time just on explaining theoretical concepts, and instead learn them as we build a game. And then strengthen them during future lessons.

All of the topics I'm covering here are in line with @kabaros Lesson 1 Plan for React.

I'm 100% confident we'll be able to get through all the React concepts in this lesson, and even if we don't have time to finish the whole game, I can have them finish it as homework. After the Node/DB module, it should be a lot easier for them to connect the puzzle pieces with React, as it's a lot less new APIs/concepts and more capitalising on previous JavaScript/HTML knowledge. I really hope that will be the case.

These are the only two files they'll be creating during the workshop (will be slightly different, but mostly the same):
https://github.com/rarmatei/CYF-ReactGame/blob/master/src/App.js
https://github.com/rarmatei/CYF-ReactGame/blob/master/src/components/button.js

It doesn't seem to be a lot of code. Maybe manageable for an intro class + what's left for homework?

I still have to arrange it a bit, and make it look nicer.

djgrant · 2017-09-26T10:18:38Z

A couple of pre-review thoughts:

Should we have a prerequisite task to install prettier? This will make it much easier for both us and the students to read each other's code. And save some time pointing out syntax errors.
Can we add an "Edit on Code Sandbox" button for all our examples? This will allow students to see the result immediately and go play around. See https://codesandbox.io/s/github/rarmatei/CYF-ReactGame -> Share.

djgrant

@rarmatei This is a great lesson. I really like the way it flows and your explanations and really understandable. I've left a few comments for you to consider but they're all pretty minor things.

The game itself felt a bit to complicated to me on first sight. Do you think there are any ways it could be made simpler or broken into smaller/simpler parts.

djgrant · 2017-09-26T10:20:17Z

react/lesson1.md

-[React](https://facebook.github.io/react/) is a library by Facebook.
+[React](https://facebook.github.io/react/) is a library by Facebook for building user interfaces. 
+
+Today, the focus is on component based architectures, and React provides a thin layer on top of JavaScript and HTML to allow you to build custom components that can encapsulate behavior and style and can be re-used throughout your application and even exported for others to use.


Can you break this into smaller sentences or bullets?

A definition of 'encapsulation' would be useful.

djgrant · 2017-09-26T10:22:57Z

react/lesson1.md


 ## Why React?
-ToDo
+
+Besides providing the tools to build powerful and well encapsulated components, React also takes care of updating the view to match our data.


Are students familiar with the term "view" in this context. If we can keep the set of vocabulary we use small that will help. Perhaps "rendered component" would be better.

Or "display" or even "HTML code" since that's what's happening.

Totally agree. I'll try to pay attention to the terms I'm using in the class as well.

djgrant · 2017-09-26T10:23:14Z

react/lesson1.md

+<p id="content"> </p>
+```
+
+As we've learned, we can dinamically insert content into our HTML using JavaScript:


dynamically

I'll just run the whole thing through an type-checker 😛

djgrant · 2017-09-26T10:24:15Z

react/lesson1.md

+
+So everytime our `post` variable changes, we have to manually call the above to update our HTML, so the user can actually see the new post.
+
+However, with React, you can just setup your template once:


Again, let's stick with react terms, so "component" rather than "template".

Hmm, at this stage they should be very familiar with the concept of template from handlebars, while we've only briefly mentioned components when discussing how they should break down their website. I don't mind going with "component" though.

djgrant · 2017-09-26T10:26:46Z

react/lesson1.md


-# JSX
- Uses [JSX](https://facebook.github.io/react/docs/introducing-jsx.html)
+Components in React can be defined by just declaring a function that return some JSX.


A short explanation of what JSX would be good here e.g. JSX is HTML-like code that you can include in JavaScript files.

I might rename JSX here to HTML. JSX is explained a bit later?

djgrant · 2017-09-26T10:34:56Z

react/lesson1.md

+
+# JSX: Map Arrays to Components
+
+Because works so well with JavaScript, we can even it in for loops and build JS arrays that contain JSX elements.


Not sure exactly how this sentence is intended to read

Haha, me neither. I think it should've read: "Because JSX works so well with JavaScript, we can even use it in for loops and build JavaScript arrays that contain JSX elements."

djgrant · 2017-09-26T10:36:06Z

react/lesson1.md


+A component's internal state represents all the information that a components "knows" about itself. 
+State can only exist on `class` components. That is why they're also called `statefull` components.


djgrant · 2017-09-26T10:38:47Z

react/lesson1.md

+
+```javascript
+
+difficultyChange = (event) => {


I got a bit confused about what this function would be used for until much later on. Could it be named to something that conveys how the UI will change, for example changeNumberOfButtons?

And this.state.difficulty be changed to this.state.numberOfButtons (or buttonCount or whatever).

That makes sense, it's a lot more obvious

djgrant · 2017-09-26T10:40:58Z

react/lesson1.md

+
+Props are the inputs sent from the parent to child component via its attributes. So for our `GameButton` we could send it a prop that would specify what text it should display on the button:
+
+`<GameButton btnText="First button" />`


I have a preference for not removing vowels from variable names. btn is obvious but I wouldn't want students to get the idea that fewer characters = better code.

yeh for the sake of clarity here - text should be fine

agree, it's already button, no need for the prefix

djgrant · 2017-09-26T10:43:07Z

react/lesson1.md


+function GameButton(props) {


Would it be too much at this stage to show how you would refactor this to use a ternary operator?

const GameButton = props => <button className={props.selected ? 'neutral' : 'selected'}>Awesome button!</button>;

I can show that during the class, makes sense. Wanted to as explicit as possible here, though.

scott-ad-riley

Looks good to me - a few comments in places but I feel like the level of detail is perfect.

This sets up the next set of lessons on ComponentLifecycle, async-ness of setState etc. pretty well.

scott-ad-riley · 2017-09-26T11:38:54Z

react/lesson1.md

+
+With these features in mind, it suddenly becomes a lot easier to build Single Page Applications (SPA). 
+
+SPAs are web pages fit in a single web page, providing a similar experience to desktop applications. All the content a page requires is usually downloaded at once (HTML, JavaScript and CSS), in the first initial request, or loaded dinamically as the user is clicking around the page. There are no reloads as you click from one section to the next.


dinamically > dynamically

Could also be worth a mention of ajax in here as they've covered that before and it's pretty relevant to building an SPA.

Very true, I'll add a mention in there.

scott-ad-riley · 2017-09-26T11:43:36Z

react/lesson1.md

+
+The above is the exact same component we defined using the function. 
+
+Child or `presentational` components are essentially smaller customisable to the data that they receive but usually do not have the data in themselves. These are often referred to as `dumb` components - because they do not process the data in themselves:


the word process feels strange here - I feel like they do process it because it comes in as props and comes out as rendered html. It could be more accurate to say they do not modify, touch or create the data (it's a tricky one to reword). A common word is they are not "responsible" for the data - though this could be a concept they've not really come across before.

Hmm, how about:

Child or presentational components are concerned with how things look. They contain very little logic. They are like a function: take some inputs, and return an element (and that's how they're usually written as well, as a function). They don't hold or remember any data: the element that they return is based only on the inputs they received, nothing else.

Yeh - that's great 👍

scott-ad-riley · 2017-09-26T11:45:18Z

react/lesson1.md

+
+You might have noticed something weird: we were returning some HTML-like code in our components.
+
+That is called JSX, and it's a compromise to allows us to use the HTML we are so familiar inside our JavaScript components. 


I'd also argue against the word compromise here 😄

Maybe a "technique"? even "language" works imo

scott-ad-riley · 2017-09-26T11:46:50Z

react/lesson1.md

+
+- event handlers are capitalized
+
+HTML: `<button onclick="myFunction()"/>` 


And you'd almost always pull the function off of either this or this.props.

scott-ad-riley · 2017-09-26T11:53:00Z

react/lesson1.md

+return (
+  <p> Hello! </p>
+  <p> This is my blog. </p>
+);


I don't know if it's worth mentioning that react 16 will allow you to do this? (if only briefly)

React 16 launch/rc post:facebook/react#10294

I might remove this whole section on JSX "gotchas" all-together. Adds a lot of new things for the students to remember, and I don't know if it's necessary to focus on them: most things they will just discover when working with it, and maybe it's going to stick better that way.

yep, sounds good.

scott-ad-riley · 2017-09-26T12:11:17Z

react/lesson1.md

-            />
-        )
+```javascript
+  difficultyChange = (event) => {


Sidenote: this is not currently in ES6 - create-react-app will give us babel-plugin-transform-class-properties out of the box.

Not sure if it's worth mentioning - downside is that the alternatives are more complicated to understand (either .bind(this) in render or in the constructor)

scott-ad-riley · 2017-09-26T12:12:16Z

react/lesson1.md

+
+Props are the inputs sent from the parent to child component via its attributes. So for our `GameButton` we could send it a prop that would specify what text it should display on the button:
+
+`<GameButton btnText="First button" />`


yeh for the sake of clarity here - text should be fine

scott-ad-riley · 2017-09-26T12:13:48Z

react/lesson1.md

+}
+```
+
+Now try changing the `selected` attribute on your `GameButton`. It should change color depending on whether it's true or false.


I haven't seen where you have mentioned why we need to use className over class.

(Apologies if i've missed it - but it's likely to be a question that comes up)

I mentioned it in the JSX section gotchas. Thanks for checking, though!

scott-ad-riley · 2017-09-26T12:16:43Z

react/lesson1.md

+    ? this.state.endTime - this.state.startTime
+    : "Not yet started.."
+}
+```


can this ultimately get moved to a function outside of render? displayScore or something.

It can. Although I mainly wanted to show an example of using a ternary operator in JSX. Don't mind moving it out though if you think it's better?

I think we've already got a ternary above this, I find multi-line ternaries are quite hard to read when compared against a function with an if/else

I've gotten used to ternaries, especially when on multiple lines, sometimes I find them much easier to read. But the students are definitely more used to a simple if/else, so I'll move it out, as you suggested.

scott-ad-riley · 2017-09-26T12:20:20Z

react/lesson1.md

+  // When the user manages to click on the selected button, display the time passed start and end
+  gameButtonClick = (event) => {
+    const className = event.target.className;
+    if(className.includes('selected')) {


This feels like an antipattern - We shouldn't be looking at the state of the DOM to determine whether a clicked element has been selected.

I haven't pulled the repo down locally and ran the app so I can't offer a nice alternative right now but it feels like a closure/bound function that returns this above function, and has the number of the clicked button would be nicer.

You are totally right! Although I might leave as it is, going into how the closure works in this case would be a bit too much I think?

Yeh - this could be better of as a bit of a refactor to avoid both a closure and this - i'll pull the repo tomorrow and take a look.

add react lesson 1

442c37c

rarmatei requested review from kabaros, djgrant and scott-ad-riley September 25, 2017 22:39

kkarimi requested a review from Amwam September 26, 2017 09:04

djgrant reviewed Sep 26, 2017

View reviewed changes

scott-ad-riley reviewed Sep 26, 2017

View reviewed changes

PR feedback

eb834d5

rarmatei merged commit b30b549 into CodeYourFuture:scotland Sep 27, 2017


		So everytime our `post` variable changes, we have to manually call the above to update our HTML, so the user can actually see the new post.

		However, with React, you can just setup your template once:


		# JSX: Map Arrays to Components

		Because works so well with JavaScript, we can even it in for loops and build JS arrays that contain JSX elements.


		A component's internal state represents all the information that a components "knows" about itself.
		State can only exist on `class` components. That is why they're also called `statefull` components.


		Props are the inputs sent from the parent to child component via its attributes. So for our `GameButton` we could send it a prop that would specify what text it should display on the button:

		`<GameButton btnText="First button" />`


		With these features in mind, it suddenly becomes a lot easier to build Single Page Applications (SPA).

		SPAs are web pages fit in a single web page, providing a similar experience to desktop applications. All the content a page requires is usually downloaded at once (HTML, JavaScript and CSS), in the first initial request, or loaded dinamically as the user is clicking around the page. There are no reloads as you click from one section to the next.


		The above is the exact same component we defined using the function.

		Child or `presentational` components are essentially smaller customisable to the data that they receive but usually do not have the data in themselves. These are often referred to as `dumb` components - because they do not process the data in themselves:


		You might have noticed something weird: we were returning some HTML-like code in our components.

		That is called JSX, and it's a compromise to allows us to use the HTML we are so familiar inside our JavaScript components.


		- event handlers are capitalized

		HTML: `<button onclick="myFunction()"/>`

React lesson 1 #132

React lesson 1 #132

Conversation

rarmatei commented Sep 25, 2017 • edited Loading

djgrant commented Sep 26, 2017 • edited Loading

djgrant left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

scott-ad-riley left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

scott-ad-riley Sep 26, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rarmatei Sep 26, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rarmatei commented Sep 25, 2017 •

edited

Loading

djgrant commented Sep 26, 2017 •

edited

Loading

scott-ad-riley Sep 26, 2017 •

edited

Loading

rarmatei Sep 26, 2017 •

edited

Loading