ReactJS

What is an event handler?

an event handler is a function that gets called in response to an event

diffing

comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed

Pros of React:

- React is fast. Apps made in React can handle complex updates and still feel quick and responsive. - React is modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React's modularity can be a beautiful solution to JavaScript's maintainability problems. - React is scalable. Large programs that display a lot of changing data are where React performs best. - React is flexible. You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out React's potential. There's room to explore. - React is popular. While this reason has admittedly little to do with React's quality, the truth is that understanding React will make you more employable.

In JSX, you can't use the word class!

- You have to use className instead - this is because JSX gets translated into JavaScript, and class is a reserved word in JavaScript

In summary, here's what happens when you try to update the DOM in React:

1. The entire virtual DOM gets updated. 2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed. 3. The changed objects, and the changed objects only, get updated on the real DOM. 4. Changes on the real DOM cause the screen to change.

Not all lists need to have keys. A list needs keys if either of the following are true:

1. The list-items have memory from one render to the next. For instance, when a to-do list renders, each item must "remember" whether it was checked off. The items shouldn't get amnesia when they render. 2. A list's order might be shuffled. For instance, a list of search results might be shuffled from one render to the next.

Most HTML elements use two tags: an opening tag (<div>), and a closing tag (</div>). However, some HTML elements such as <img> and <input> use only one tag. The tag that belongs to a single-tag element isn't an opening tag nor a closing tag; it's a self-closing tag.

In JSX, you have to include the slash. If you write a self-closing tag in JSX and forget the slash, you will raise an error: Fine in JSX: <br />

Any code in between the tags of a JSX element will be read as JSX, not as regular JavaScript! JSX doesn't add numbers - it reads them as text, just like HTML. How do you get it to evaluate?

Placing the javascript to be evaluated btwn curly brackets {}

Here's a rule that you need to know: you can not inject an if statement into a JSX expression.

The reason why has to do with the way that JSX is compiled

How might you use a conditional statement inside of a render function?

if statement is located inside of the render function, but before the return statement. This is pretty much the only way that you will ever see an if statement used in a render function

getDefaultProps

if the prop is not defined, you can use this function as to set a default

React component

is a small, reusable chunk of code that is responsible for one job, which often involves rendering HTML. Here's another fact about components: every component must come from a component class A component class is like a factory that creates components. If you have a component class, then you can use that class to produce as many components as you want.

how do you know what should be its own component?

te single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.

ReactDOM

the name of a JavaScript library. This library contains several React-specific methods, all of which deal with the DOM in some way or another.