ECE366 - Lesson 7
Intro to Javascript and React
Instructor: Professor Hong
## 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
## New pom.xml Dependency
- Building upon last week's JPA example
```
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
```
- Thymeleaf templates allow you to create basic web applications
## Web Controller
web/UserController
```
package com.chrishong.rps.web;
import com.chrishong.rps.business.UserService;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
@RequestMapping("/users")
public class UserController {
private final UserService userService;
public UserController(UserService userService) {
this.userService = userService;
}
@RequestMapping(method = RequestMethod.GET)
public String getUsers(Model model){
model.addAttribute("users", this.userService.getUsers());
return "rps-users";
}
}
```
## Webservice API
webservice/WebserviceController
```
package com.chrishong.rps.webservice;
import com.chrishong.rps.business.UserService;
import com.chrishong.rps.data.User;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
@RequestMapping("/api")
public class WebserviceController {
private final UserService userService;
public WebserviceController(UserService userService) {
this.userService = userService;
}
@GetMapping("/users")
public List getUsers(){
System.out.println("getUsers");
return this.userService.getUsers();
}
}
```
## Index.html
resources/static/index.html
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RPS</title>
</head>
<body>
<h1>Welcome to RPS</h1>
<p><a href="/users">Users</a></p>
</body>
</html>
```
## rps-users.html
resources/templates/rps-users.html
```
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>RPS: Users</title>
</head>
<body>
<h1>RPS Users</h1>
<table>
<tr>
<td>User ID</td>
<td>User Name</td>
<td>Password</td>
<td>Total Wins</td>
</tr>
<tr th:each="user: ${users}">
<td th:text="${user.userId}">UserId</td>
<td th:text="${user.userName}">UserName</td>
<td th:text="${user.password}">Password</td>
<td th:text="${user.totalGames}">TotalGames</td>
</tr>
</table>
</body>
</html>
```
## Running the Site
```
localhost:8080
localhost:8080/users
localhost:8080/api/users
```
You can read more here: [https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html](https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html)
## What is React?
- Javascript library
- Created at Facebook
- Open-sourced in 2013
- Docs: [https://reactjs.org/docs/getting-started.html](https://reactjs.org/docs/getting-started.html)
## 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
## React in Index.html
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<title>React ⚛️</title>
</head>
<body>
<h1>Getting Started with React</h1>
</body>
</html>
```
## React in Index.html
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<title>React ⚛️</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
ReactDOM.render(
React.createElement("h1", null, "Getting Started!"),
document.getElementById("root")
);
</script>
</body>
</html>
```
## ReactDOM.render
ReactDOM.render() - 2 arguments
- what to create: React.createElement("h1", null, "TEXT")
- where to put it: document.getElementById("root")
## Variable Names
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<title>React ⚛️</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
let heading = React.createElement(
"h1",
{ style: { color: "blue" } },
"Heyyyy Everyone!"
);
ReactDOM.render(
heading,
document.getElementById("root")
);
</script>
</body>
</html>
```
## JSX, Babel
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<title>React ⚛️</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<ul>
<li>🤖</li>
<li>🤠</li>
<li>🌝</li>
</ul>,
document.getElementById("root")
);
</script>
</body>
</html>
```
- Javascript XML
- Can access variables with ```{``` variable ```}```
## More JSX syntax
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<title>React ⚛️</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let robot = "🤖";
let cowboy = "🤠";
let moon = "🌝";
let name = "React";
ReactDOM.render(
<ul>
<li>{robot}</li>
<li>{cowboy}</li>
<li>{moon}</li>
<li>{name.toUpperCase()}</li>
<li>{name.length}</li>
</ul>,
document.getElementById("root")
);
</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
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script
src="https://unpkg.com/react@17/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></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>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
</script>
</body>
</html>
```
## Create React App
- Install nodejs - [https://nodejs.org/](https://nodejs.org/)
```
sudo apt update
sudo apt install nodejs
```
- ```node -v``` - to check node version
- ```npm -v``` - check npm version
- ```npx create-react-app rps```
- ```npm start```
## Important Parts
- package.json - dependencies - react, react-dom, react-scripts
- src/index.js - entry point of the application, main JS file
- renders App
- React.StrictMode - additional checks
- public/index.html - similar to index.html w/ all your JSX injected
```
npm install
npm start
```
## Javascript Destructuring
Allows you to get specific elements from an argument/props
```
function App({ myVariable }) {
return (
{myVariable
);
}
```
- Also Array destructuring allows you to get certain elements from an array
## Changing States with useState
App.js
```
import "./App.css";
import { useState } from "react";
function App() {
const [emotion, setEmotion] = useState("happy");
return (
<div className="App">
<h1>Current emotion is {emotion}</h1>
<button onClick={() => setEmotion("sad")}>
Sad
</button>
<button
onClick={() => setEmotion("excited")}
>
Excited
</button>
</div>
);
}
export default App;
```
## Side Effects with useEffect
```
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
## Fetching Data from Service
fetch is built into the browser to make an HTTP request to get data
```
import "./App.css";
import { useState, useEffect } from "react";
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetch(
`http://localhost:8080/api/users`
)
.then((response) => response.json())
.then(setData);
}, []);
if (data)
return (
<pre>{JSON.stringify(data, null, 2)}</pre>
);
return <h1>Data</h1>;
}
export default App;
```
## Update CORS in Spring Boot server
WebserviceController.java
```
@CrossOrigin
@GetMapping("/users")
```