- There are both class components and function components in React. By the way the codecademy course describes them, class components are outdated. From what I understand, a thing called hooks and function components are what is used now.
- When you import some thing, like this for example: \
```
import React from 'react'
it means you are saving the ‘react’ library to a variable named ‘React’.
* I think all libraries are spelled in lower case, 'react-dom' is an example.
* Component class variable names must start wit ha capital letter: \
class MyComponentClass
* ‘react’ and ‘react-dom’ are two separate libraries to import. ‘react’ contains tools afor creating elements and components. And ‘react-dom’ is contains tools for working with the DOM, such as: \
ReactDOM.render()
* Component classes are like a factory that creates components.
* There is a HTML element named ‘<cite>’. I think its for citing.
* render() functions _must_ have at least a return statement.
* In JS, the Math.floor() function will return the largest integer less than or equal to the given number.
* if statements can be used in JSX render() functions, make sure to place them _before _the return statement.
* **getter method**, these methods are called before the render() function. They do not require any parenthesis () after them when called as _this.food_. At declaration, getter methods are preceded by the word **get. **Eg.
get food() { return 'ice cream'; }
* Event **handlers **are functions that gets called in response to an event.
* Elements created in one file are not visible in another file. Unless you import it. Eg: \
import { NavBar } from './NavBar';
* Also, if you want to use a element from another file, you need to **export **it from that file. export and import used together. Any top-level elements can be exported (var, let, const, function or class).
* You can export multiple things from the same file.
* When importing an element that has been exported, you need to wrap it in curly braces {} . Eg.
import { faveManifestos, alsoRan } from './Manifestos';`
* **props** are part of components. It holds information about that component. I presume it is short for ‘properties’
* According to Codecademy, the most common use of **props **is passing information from one component to another.
* They can be passed by using import and export, as mentioned earlier.
* There is a convention for naming event handlers. If it is a click type of event, name it ‘onClick’. Or you the event was to wait for a key press, call it ‘onKeyPress’. Eg: \
render() { return ; } ```
- defaultProps provides a default property to a component if the prop is not provided. \ It is entered after the class has been defined. Outside of the body.
- Dynamic information is information that can change.
- There are two ways for a component to get dynamic information. props and state. Beside these to elements, all other values in a component should always stay the same.
- constructor methods, they do something. I don’t know what yet. XD
- .bind is some keyword added to variable declarations in constructor methods. Codecademy says this about them: \
“just know that in React, whenever you define an event handler that uses this, you need to add this.methodName = this.methodName.bind(this) to your constructor function.”
- I still don’t really understand them. They’re something got to do with changing the state of a component. I will continue and revisit this topic again.
- this.setState will automatically call render.