ECE366 - Lesson 6

Intro to Javascript and React

Instructor: Professor Hong

Review & Questions

## Basic HTML

## What is HTML? - HyperText Markup Language (not a programming language) - Standard markup language for website creation - Maintained World Wide Web Consortium (W3C) - Parts - opening tag, content, closing tag

## Intro to React

## What is React? - Javascript library - Created at Facebook - Open-sourced in 2013 - Docs: [https://react.dev/reference/react](https://react.dev/reference/react)

## What is Javascript? - High level, interpreted language - Allows you to implement complex features on web pages - Used with HTML and CSS (for styling) - Logging: ```console.log();```

## Setup/Installation - Add React Developer Tools from Chrome Extensions and add to chrome - Inspect Element -> Components - Can also install on Firefox

## ReactDOM.createRoot ReactDOM.createRoot() - 1 argument - a DOM element that will serve as the root container for the React application

## More JSX syntax
						```html
						<!DOCTYPE html>
						<html>
							<head>
								<meta charset="UTF-8" />
								<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
								<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
								<script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
								<title>React ⚛️</title>
							</head>
							<body>
								<div id="root"></div>
								
								<script type="text/babel">
									let robot = "🤖";
									let cowboy = "🤠";
									let moon = "🌝";
									let name = "React";
						
									const root = ReactDOM.createRoot(document.getElementById("root"));
									root.render(
										<ul>
											<li>{robot}</li>
											<li>{cowboy}</li>
											<li>{moon}</li>
											<li>{name.toUpperCase()}</li>
											<li>{name.length}</li>
										</ul>
									);
								</script>
							</body>
						</html>
						```

## React Components - A function that returns JSX and can be rendered in DOM - Should use capital letter for component/function name - Multiple React components should be wrapped into 1 component - Can be used to display dynamic data

## Component Properties - Add props argument to component functions - A container where you can put any properties in the component

## Example with React Components and Image
						```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js" crossorigin></script>
        <title>RPS</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
            function Header(props) {
                return (
                    <header>
                        <h1>{props.name}'s RPS</h1>
                    </header>
                );
            }

function Main(props) {
                return (
                    <section>
                        <img height={200} src="./rps.png" alt="Rock Paper Scissors" />
                        <ul>
                            {props.users.map((user) => (
                                <li key={user.id}>{user.title}</li>
                            ))}
                        </ul>
                    </section>
                );
            }

function Footer(props) {
                return (
                    <footer>
                        <p>Copyright {props.year}</p>
                    </footer>
                );
            }

const users = ["Alpha", "Beta", "Gamma"];
            const userObjects = users.map((user, i) => ({
                id: i,
                title: user,
            }));

function App() {
                return (
                    <React.Fragment>
                        <Header name="Cooperps" />
                        <Main adjective="amazing" users={userObjects} />
                        <Footer year={new Date().getFullYear()} />
                    </React.Fragment>
                );
            }

const root = ReactDOM.createRoot(document.getElementById("root"));
            root.render(<App />);
        </script>
    </body>
</html>
						```

## React

## Side Effects with useEffect
						```javascript
						import "./App.css";
						import { useState, useEffect } from "react";
						
						function App() {
							const [emotion, setEmotion] = useState("happy");
							const [secondary, setSecondary] =
							useState("tired");
							useEffect(() => {
							console.log(`It's ${emotion} around here!`);
							}, [emotion]);
						
							useEffect(() => {
							console.log(`It's ${secondary} around here!`);
							}, [secondary]);
							return (
							<div className="App">
								<h1>Current emotion is {emotion}</h1>
								<button onClick={() => setEmotion("sad")}>
								Sad
								</button>
								<button
								onClick={() => setEmotion("excited")}
								>
								Excited
								</button>
								<h2>
								Current secondary emotion is {secondary}.
								</h2>
								<button
								onClick={() => setSecondary("grateful")}
								>
								Grateful
								</button>
							</div>
							);
						}
						
						export default App;
						
						```
						- dependencyArray is the 2nd argument for useEffect
						- No argument makes it called everytime
						- Empty array makes it called once