The Virtual DOM is an in-memory tree representation of the browser's Document Object Model. React's philosophy is to interact with the Virtual DOM instead of the regular DOM for developer ease and performance.

By trading off the additional memory requirements of the Virtual DOM, React is able to optimize for efficient subtree comparisons, resulting in fewer, simpler updates to the less efficient DOM.

By trading off the additional memory requirements of the Virtual DOM, React is able to optimize for efficient subtree comparisons, resulting in fewer, simpler updates to the less efficient DOM.

The result of these tradeoffs is improved performance.

Thinking about how the UI should look at any given moment, rather than how to change it over time, eliminates a whole class of bugs.

Eventually every virtual DOM note is constructed using the React.createElement function.

1. type : either an html element "h1", _or_ a reference to a function or class that is a React Component 'Component'
2. props : These are static properties and any html attributes
3. children: An array of Virtual DOM Nodes or a string of content

    ReactDOM.render(
        component, //The react component to rendertarget // the browser DOM node to render it to
    );

    ReactDOM.render(
        <App />,
        document.getElementById('root')
    );

    ReactDOM.render(
        <React.StrictMode>
            <App />
        </React.StrictMode>,
  document.getElementById('root')
);

Using JSX

JSX is a special format to let you construct virtual DOM nodes using familiar HTML-like syntax. You can put the JSX directly into your .js files, however you must run the JSX through a pre-compiler like Babel in order for the browser to understand it.

Using Bable, the JSX code is compiled to a series of recursively nested createElement calls, rather than <elt> JSX syntax.

1. Create the index.js file
1. Create the card object array.
2. Tie the element to the index.html DOM node. i.e.: const rootDiv = document.queryElement('root');
3. Using ReactDOM.render, pass the cards to the component that will display the cards.

    const rootDiv = document.getElementById("root");

    const cards = [
        {
            name: "Martok",
            imgUrl: "http://guide.fleetops.net/images/avatars/martok.png",
            content: "Ferocious Klingon"
        },
        {   name: "Mijural",
            imgUrl: "http://guide.fleetops.net/images/avatars/mijural.png",
            content: "Shrike Class Romulan"
        }
    ]

    ReactDOM.render(
        <StarTrekCardDeck cards={cards} />,
        rootDiv
    )

2. Create the component that will render the cards
1. Remember, each card can be represented by another component.
2. Taking the cards from the props, map through them, calling the individual card component with the values needed

    const StarTrekCardDeck = (props) => {
        return (
            <div>
                //Here we are mapping the cards into <StarTrekCard> components
                {props.cards.map(card =>
                    <StarTrekCard
                        imgUrl={card.imgUrl}
                        content={card.content}
                        key={card.name} />
                )}
            </div>
        );
    }

3. Create the individual card component
1. In this component we return the JSX for the layout of each individual card.

    const StarTrekCard = (props) => {
        return (
            <div className="card">
                <div className="card-image">
                    <figure className="image">
                        <img src={props.imgUrl} />
                    </figure>
                <div className="card-content">
                    <div className="content">
                        {props.content}
                    </div>
                </div>
            </div>
        );
    }

npx create-react-app my-app-name

1. public
2. src

public folder:

1. favicon.ico
2. robots.txt
3. logo192.png
4. logo512.png
5. manifest.json

src folder:

1. App.css
2. App.test.js
3. logo.svg
4. serviceWorker.js
5. setupTests.js

Any files that reference the deleted files.

Also, index.html can be replace with a boilerplate HTML file.

Add a div with an id of 'root' you will use in your ReactDOM.render() call;

npx create-react-app my-app-name --template @appacademy/simple

You need to import React, extend the class using React.Component, use the render() {} function, and export default Hello;

    import React from 'react'

    class Hello extends React.Component {
        constructor() {
            super();
            this.state = {
                name: this.pickRandomName();
            }
        }
        pickRandomName() {
            const randomNum = Math.floor(Math.random() * 3);
            const names = ['LeBron', 'Messi', 'Serena']
            return names[randomNum];
        }
        changeName = () > {
            this.setState({
                name: this.pickRandomName()
            });
        }
        render() {
            return (
                <>
                    <h1j>Hello {this.state.name}!</h1>
                    <button onClick={this.changeName}>Change name</button>
                </>
            )
        }
    }

    export default Hello;

    class  extends React.Component(
        constructor() {
            super();
            this.state = {
                name: '',
                email: '',
                password: ''
            }
        }
    

Any instance method except for render()

    handleEmail = (e) > {
        this.setState({
            email: e.target.value
        });
    }

Place this right before your export:

    Books.defaultProps = {
        books: [
            {title: "Don Quixote", author: "Miguel De Cervantes"},
            {title: "Pedro Paramo", author: "Juan Rulfo"}|
        ]
    };

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <input type="text" value={this.state.value}/>
                <button>Submit!</button>
            </form>
        )
    }

    handleSubmit = e > {
        e.preventDefault();
        const inputVal = this.state.value;
    }

Yes!

this.props.submitForm(inputVal)

1. The fat-arrow function will bind this:

       changeEmail = e =>{
           this.setState({
               email: e.target.value
           });
   
   

2. We can also use bind in the constructor:

       constructor() {
           super();
           this.state = { email: ''};
           this.changeEmail = this.changeEmail.bind(this);
       }
   

The SyntheticEvent object mimics the characteristics of the event passed to the callback in an event handler but adding more data to it.

Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, except the events work identically across all browsers.

stopPropagation() and preventDefault()

class Simpleform extends React.Component { constructor() { super(); this.state = { response: '' } } handleResponse = e => { this.setState({ response: e.target.value }); } handleSubmit = e => { e.preventDefault(); this.props.submitForm(this.state.response); } render() { return ( <form onSubmit={this.handleSubmit}> <input onChange={this.handleResponse} type="text" value={this.state.response} /> <button>Submit</button> </form> ); } }

    onChange = (e) => {
        const { name, value } = e.target;
        this.setState( { [name]: value });
    }

    render() {
        return(
            <form onSubmit={this.onSubmit}>
                <input
                    onChange={this.onChange}
                    name='email'
                    type="text"
                    value{this.state.email}
                />
                <input
                    onChange={this.onChange}
                    name='password'
                    type='text'
                    value={this.state.password}
                />
                <button>Submit</button>
            </form>
        );
    }

The textarea element in React uses a value attribute instead of inner content. It is handled the same way you would handle an input element. It will be a self-closing tag;

Normal html:

    <textarea>This is the text that goes in the text area.</textarea>

However, in React, the text goes in a value attribute, and the element is self-closing

    <textarea value={this.state.text} onChange={this.onChange} />

    <select name='timezone' onChange={this.onChange} value={this.state.timezone}>
        <option>PST</option>
        <option>CST</option>
        <option>EST</option>
    </select>

1. in your onSubmit function, take your input and call your validation function
2. If you have validation errors, set your state with the errors object
3. If no validation errors, continue to submit the form.

    validate(spiritAnimal) {
        const validationErrors = [];

        if (!spiritAnimal) {
            validationErrors.push('Please provide a spirit animal');
        }
        return validationErrors;
    }
    onSubmit = e => {
        e.preventDefault();
        const { spiritAnimal } = this.state;
        const validationErrors = this.validate(spiritAnimal);

        if (validationErrors.length > 0) {
            this.setState( {validationErrors});
        } else {
            this.props.submitForm(spiritAnimal);
            this.setState({spiritAnimal: ''});
        }
    }

1. Mounting
2. Updating
3. Unmounting

1. The constructor method is called on the component
2. The render method is called on the component
3. DOM gets updated.
4. The componentDidMount method is called.

1. The render method is called.
2. The DOM gets updated.
3. The componentDidUpdate method is called

Just before a React component gets removed from the virtual DOM.

No! Use componentDidMount instead.

Use the componentDidMount() lifecycle event.

    componentDidMount() {
        fetch(url)
           .then(response => response.json())
           .then(data => this.setState( { movieInfo: data} ));
    }

1. npm install --save react-router-dom@^5.1.2
2. import { BrowserRouter } from 'react-router-dom';

Only ONE

Use a div tag to surround your components to be controlled by the Router, including the Route tag

    import { BrowserRouter } from 'react-router-dom';

    const App = () => {
        return (
            <BrowserRouter>
                <div> //Note that BrowserRouter can only have a single child Component!
                    //Include components here you want to be controlled by the Router, including
                    //the <Route> tag
                </div>
            </ BrowserRouter>
        );
    };

1. path: A pattern to match the URL in the browser. You can include placeholders by prefixing them with a : character.

    <Route path='/users/:userId' />
    <Route path='/users/:userId/stores/:storyId'/>

2. component: Typically you pass a single component to this attribute. When the path is matched, this component will be rendered and passed props containing history location and match properties.
   
   Example: When someone visits /users/1 this will render the Component UserProfile:

       <Route path='/users/:userId' component={UserProfile} />
   

3. render: An alternative to component this will cause a component to render, you can pass this an arrow function that renders multiple components. Usually we use this so we can pass custom props to the component. Using the component tag doesn't let us do this.

We can do it but we need to pass the regular props from <Route> as well by using the spread operator: {...props}.

    <Route
        path='/users/:userId'
        render={props => <UserProfile {...props} token={token} }/>

npm install react-router-dom then include it by require Router from 'react-router-dom';

Link renders an anchor tag <a href=""></a> that when clicked, changes the window.location.href to the url

Clicking on the a href link triggers BrowserRouter to parse the url and look for matching <Route> components.

    <Link to="/">App</Link>
    <Link to="/users">Users</Link>
    <Link to="/users/1">Andrew's Profile</Link>

They're identical except that <NavLink> has a optional activeClassName and activeStyle props that will set a css class or css styles

    <NavLink to="/">App</NavLink>
    <NavLink activeClassName="red" to="/users">Users</NavLink>
    <NavLink activeClassName="blue" to="/hello">Hello</NavLink>
    <NavLink activeClassName="green" to="/users/1">Andrew's Profile</NavLink>
    <NavLink to="/" onClick={handleClick}>App with click handler</NavLink>