WebDev.ipynb

# React and Next.js Introduction
- React is a JS library for building interactive user interfaces. React is declarative, not imperative
- Next.js is a React framework that gives us building blocks to create web apps
     - by framework, we mean Next.js handles the tooling and config needed for React

# How Browsers Interpret Code
- When a user visits a web page, the server returns an HTML file to the browser.
- The browser then reads the HTML and constructs the **Document Object Model** (DOM)

# Document Object Model (DOM)
- The DOM is an object representation of the HTML elements. It acts as a bridge between the code and the user interface,
    and has a tree-like structure with parent and child relationships.
- You can use DOM methods and JavaScript to listen to user events and manipulate the DOM (https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
    by selecting, adding, updating, and deleting specific elements in the UI.
- DOM manipulation allows you to not only target specific elements, but also change their style and content.

    * Example DOM manipulation:
        -<script type="text/javascript">
           const app = document.getElementById('app');
           const header = document.createElement('h1');
           const text = 'Develop. Preview. Ship.';
           const headerContent = document.createTextNode(text);
           header.appendChild(headerContent);
           app.appendChild(header);
         </script>
    * This is imperative and quite verbose *


# HTML Basics
- getElementById() method returns an Element object representing the element whose id properly matches the specified string
    * I.e., <div id='app'></div> --> const app = document.getElementById('app')
- createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized
    * HTMLUnknownElement represents an invalid HTML element
    * I.e., const header = document.creatElement('h1')
- createTextNode() creates a new text node. This method can be used to escape HTML characters
    * I.e., const text = 'Develop'; --> const headerContent = document.createTextNode(text) --> header.appendChild(headerContent)


# React Basics
- createRoot() creates a root to display React components (content) inside a browser DOM node.
    * I.e., const root = createRoot(app)
- root.render() renders your React code to the DOM


# JSX
- JSX is a syntax extension for JavaScript that allows you to describe your UI in a familiar HTML-like syntax.
- Browsers don't understand JSC immediately, so you'll need a JS compiler, like Babel.
    * I.e., <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
- There are three JSX rules to follow: "https://react.dev/learn/writing-markup-with-jsx#the-rules-of-jsx"
    1. Return a single root element
    2. Close all the tags
    3. camelCase most of the things!


# React Core Concepts
- Components
- Props
- State


## Components
- User interfaces can be broken down into smaller building blocks called **components**
- Components allow you to build self-contained, reusable snippets of code.
    * Think of components as LEGO bricks, you can take these individual bricks and combine them together to form
        larger structures. If you need to update a piece of the UI, you can update the specific component or brick.

### Creating Components
- In React, components are **functions** that return UI elements.
    * Inside the return statement of the function, you can write JSX
    * React components should be capitalized to distinguish them from plain HTML and JS, and use angle brackets <>
- To render a component to the DOM, pass it as the first argument in the root.render() method:

    * Example Component:
        function Header() {
          return (<h1>Develop.</h1>);
        }
        const root = ReactDOM.createRoot(app);
        root.render(<Header />);

### Nesting Components
- You can **nest** React components inside each other like you would regular HTML elements
- You can keep nesting React components to form component trees.
- Top-level component gets passed to the root.render() method

    * Example Nesting of Components:
        function Header() {
            return (<h1>Develop.</h1>)
        }
        function HomePage() {
            return (
                <div>
                    {/* Nesting the Header component */}
                    <Header />
                </div>
            );
        }
        const root = ReactDOM.createRoot(app);
        root.render(<HomePage />)


## Props (Properties)
- Regular HTML elements have attributes that you can use to pass pieces of information that change the behavior of those elements.
    * For example, changing the src attribute of an <img> element changes the image that is shown.
    * Or, changing the href attribute of an <a> tag changes the destination of the link.
- In the same way, you can pass pieces of information as properties to React components. These are called **props**.
    * I.e.,
        function Header(props) {
          console.log(props); // { title: "React" }
          return <h1>Develop. Preview. Ship.</h1>;
        }

### Using Props
- Since props is an object, we can use object destructuring to explicitly name the values of props inside the function
    parameters:
        * I.e.,
            function Header({ title }) {                            function Header(props) {
              console.log(title); // "React"               -->          console.log(props)
              return <h1>Develop. Preview. Ship.</h1>;                  return <h1>title</h1>
            }                                                       }

### Using Variables in JSX
- To use a prop, add curly braces {}.
    * I.e.,
        function Header({ title }) {
          console.log(title);
          return <h1>{title}</h1>;
        }