• DOM = Document Object Model (manipulate content of html document -> interacting with the webpage) ...document (html) is just the webpage ...objects are elements (e.g. ,
  , etc.. these are all objects) ...model = tree kind structure, how
• nodes: all tags are objects, all objects are also nodes. Also elements of the object like attributes or the plain text are nodes. Nodes can be manipulated as well.
• virtual DOM

What is React and why using it?

• javascript library created by Facebook
• its fast and scalable
• very popular
• better readible (is this even true?)

arrow functions
classes
let
const

• JSX = javascript extension format
• JSX syntax is not runnable in the webbrowser, since its not proper javascritp, it needs to be compiled (a JSX compiler will transform it into regular javascript!)

JSX elements / expression

# regular
<h1>Hello World!</h1>   # looks like html but is found inside a js-file!

# with attributes**
<h1 class="mytitle">Hello World!</h1>   # added class-attribute 

# nested
<a href="https://www.example.com"><h1>Click me!</h1></a>

# nested multiline -> musst be wrapped in parenthesis
const theExample = (
  <a href="https://www.example.com">
    <h1>
      Click me!
    </h1>
  </a>
);

• a JSX expression must have exactly one outermost element. If this seems unreasonable just put a <div></div> tag around it!

Rendering JSX expressions ReactDOM is a Javascript library which contains several React-specific methods, all of which deal with the DOM in some way or another.

• ReactDOM.render(arg1, arg2): arg1 is a JSX Expression. arg2 is the place where the compiled JSX Expression should be rendered. Example:

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('some_id'));

ReactDOM.render() only updates DOM elements that have changed (very efficient)!

• class in html -> className in JSX!!
• why? because JSX gets rendered to JS and in JS class is a reserved word!

• in JSX you have to add a slash to selfclosing tags!

# ok in html
<br>
# in JSX:
<br/>

• curly braces say: "Even though I am located in between JSX tags, treat me like ordinary JavaScript and not like JSX."
• javascript injection to JSX!

• When injecting JavaScript into JSX, that JavaScript is part of the same environment as the rest of the JS in the file.
• access variables while inside of a JSX expression, even if those variables were declared on the outside.

• You create an event listener by giving a JSX element a special attribute. Here's an example

# JSX element with click functionality 
<img onClick={myFunc} />

Syntax is always on + EventName. Here are some of the attributes you can use as event (documentation with all possible Events). Note that in HTML, event listener names are written in all lowercase, such as onclick or onmouseover. In JSX, event listener names are written in camelCase, such as onClick or onMouseOver.

onClick
onDubleClick
onMouseOver
onMouseMove

• if statements break in JSX. Other options:
  • if works if the if and else are not injected in JSX (when JSX code is written outside of it-else)
  • ternary operator
  • &&

The Problem: DOM manipulation is the heart of the modern, interactive web. Unfortunately, it is also a lot slower than most JavaScript operations. This slowness is made worse by the fact that most JavaScript frameworks update the DOM much more than they have to.

As an example, let's say that you have a list that contains ten items. You check off the first item. Most JavaScript frameworks would rebuild the entire list. That's ten times more work than necessary! Only one item changed, but the remaining nine get rebuilt exactly how they were before. Rebuilding a list is no big deal to a web browser, but modern websites can use huge amounts of DOM manipulation. Inefficient updating has become a serious problem. To address this problem, the people at React popularized something called the virtual DOM.

In React, for every DOM object, there is a corresponding "virtual DOM object." A virtual DOM object is a representation of a DOM object, like a lightweight copy. A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing's power to directly change what's on the screen. Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.

How it helps When you render a JSX element, every single virtual DOM object gets updated. This sounds incredibly inefficient, but the cost is insignificant because the virtual DOM can update so quickly. Once the virtual DOM has updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update. By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called "diffing".

Once React knows which virtual DOM objects have changed, then React updates those objects, and only those objects, on the real DOM. In our example from earlier, React would be smart enough to rebuild your one checked-off list-item, and leave the rest of your list alone. This makes a big difference! React can update only the necessary parts of the DOM. React's reputation for performance comes largely from this innovation.

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

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

creating first single page react app

# node / npm / npx have to be installed
node --version
npm --version
npx --version

# create app 
npx create-react-app <appname>

• function makeDoggy has an input parameter e. But when calling it through the eventproperty "onClick" there is no parameter passed. Is the img king of "inherited" or something?

import React from 'react';
import ReactDOM from 'react-dom';

function makeDoggy(e) {
  // Call this extremely useful function on an <img>.
  // The <img> will become a picture of a doggy.
  e.target.setAttribute('src', 'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-puppy.jpeg');
  e.target.setAttribute('alt', 'doggy');
}

const kitty = (
    <img 
        onClick={makeDoggy} 
        src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-kitty.jpg" 
        alt="kitty"/>
);

ReactDOM.render(kitty, document.getElementById('app'));