Week 6

Today we'll begin to rebuild our movies page with React!

ES6 (JS) Classes

JavaScript has a notion of classes similar to other object-oriented languages.

However, quirks abound, because even things that look like keywords such as class and extends are really just "syntactic sugar" on top of classic JavaScript. Internally, JavaScript classes are translated into plain functions in JS.

Here are the main things you should know when writing JS classes:

1. Functions inside of a class declaration are called "methods", and they do NOT use the function keyword. Just omit it.
2. Use the new-style "arrow function" syntax wherever possible, so that the keyword this is more likely to feel more intuitive inside the function.
3. Use the special function constructor to initialize instances of your object upon creation.

Important Ideas This Week

• React was originally an attempt to bring object-oriented programming to the web
• It has only recently given up on the object-oriented paradigm, preferring a functional approach instead
• Lots and lots of object-oriented React code still exists.
• You should already be comfortable with ES6 "arrow functions" and "object destructuring" syntax (see links below)

React Main Ideas

• A React "application" is a collection of React components.
• A React component can be a single function or a class.
• Each React component has its own state.
• React components that are classes must define a render() method to visually draw the component. This method must return a single top-level element (that may contain as many child elements as you want).
• A React component that is a function must return a single top-level element (that may contain as many child elements as you want).

Cheat Sheet for JSX

• JSX is a React-specific language. It is a JavaScript/HTML hybrid.
• You can embed short JS expressions inside of JSX markup by using curly braces { }
• You can not mix entire ES6 statements (such as loops) inside of JSX but you can use short expressions
• JSX does NOT support class="..." on an element. Use className="..." instead!
• JSX will automatically puts quotes around attribute values: src={image_url}
• You can use either JSX or React.createElement(...) to generate React elements.
• React will automatically re-render a component whenever its underlying state changes

References

React-Specific:

• React DeveloperTools for Chrome.

• React documentation.

• "Create React App" documentation.

• ES6 Arrow Functions

• ES6 Destructuring Syntax

• Use Arrow Functions Instead of Class Methods In React