Skip to content

Commit 53899f9

Browse files
tkhang1999tkhang1999
authored
Merge pull request #42 from tkhang1999/react-18
upgrade from react v16 to react v18
2 parents 60cf245 + 16fd3a9 commit 53899f9

21 files changed

Lines changed: 152 additions & 161 deletions

‎package.json‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,12 @@
44
"private": true,
55
"homepage": "https://tkhang1999.github.io/about-me/",
66
"dependencies": {
7-
"@testing-library/jest-dom": "^5.14.1",
8-
"@testing-library/react": "^11.2.7",
9-
"@testing-library/user-event": "^12.8.3",
10-
"react": "^16.14.0",
11-
"react-dom": "^16.14.0",
12-
"react-reveal": "^1.2.2",
7+
"react": "^18.3.1",
8+
"react-awesome-reveal": "^4.2.14",
9+
"react-dom": "^18.3.1",
1310
"react-scripts": "^5.0.1",
1411
"react-toggle": "^4.1.2",
15-
"web-vitals": "^1.1.2"
12+
"web-vitals": "^4.2.4"
1613
},
1714
"scripts": {
1815
"start": "react-scripts start",
@@ -44,23 +41,24 @@
4441
]
4542
},
4643
"devDependencies": {
44+
"@babel/preset-env": "^7.26.0",
45+
"@babel/preset-react": "^7.25.9",
4746
"@babel/plugin-proposal-private-property-in-object": "7.21.11",
48-
"enzyme": "^3.11.0",
49-
"enzyme-adapter-react-16": "^1.15.6",
50-
"gh-pages": "^5.0.0",
51-
"prettier": "2.4.1",
52-
"react-test-renderer": "^16.14.0",
53-
"cheerio": "=1.0.0-rc.3"
47+
"@testing-library/dom": "^10.4.0",
48+
"@testing-library/react": "^16.0.1",
49+
"@testing-library/user-event": "^14.5.2",
50+
"babel-jest": "^29.7.0",
51+
"gh-pages": "^6.2.0",
52+
"jest": "^29.7.0",
53+
"jest-environment-jsdom": "^29.7.0",
54+
"prettier": "3.4.1",
55+
"react-test-renderer": "^18.3.1"
5456
},
5557
"jest": {
5658
"moduleNameMapper": {
5759
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/fileMock.js",
5860
"\\.(css|less)$": "<rootDir>/src/tests/styleMock.js"
5961
},
60-
"setupFilesAfterEnv": [
61-
"<rootDir>/src/tests/setup-jest.js",
62-
"<rootDir>/src/tests/setupTests.js"
63-
],
6462
"testEnvironment": "jsdom"
6563
}
6664
}

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />

‎src/components/About.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import aboutImg from "../images/about.png";
22

33
const About = () => {
44
return (
5-
<section className="about section" id="about">
5+
<section className="about section" id="about" data-testid="about">
66
<h2 className="section-title">About</h2>
77

88
<div className="about__container bd-container bd-grid">

‎src/components/Footer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const Footer = () => {
22
return (
3-
<footer className="footer">
3+
<footer className="footer" data-testid="footer">
44
<p className="footer__title">Khang Le</p>
55
<div className="footer__social">
66
<a href="mailto:tkhang1999@gmail.com" className="footer__icon">

‎src/components/Home.js‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
1-
import Slide from "react-reveal/Slide";
2-
1+
import { Slide } from "react-awesome-reveal";
32
import homeImg from "../images/home.png";
43

54
const Home = () => {
65
return (
7-
<section className="home bd-container bd-grid" id="home">
6+
<section className="home bd-container bd-grid" id="home" data-testid="home">
87
<div>
98
<div className="home__data">
10-
<div className="home__intro">
11-
<Slide top>
12-
<h1 className="home__title">
13-
Hi, I'm <span className="home__title-color">Khang</span>
14-
</h1>
15-
<p className="home__content">A Computer Science Enthusiast</p>
16-
</Slide>
17-
</div>
18-
<Slide top>
9+
<Slide direction="down" cascade triggerOnce>
10+
<div className="home__intro">
11+
<Slide direction="down" cascade triggerOnce>
12+
<h1 className="home__title">
13+
Hi, I'm <span className="home__title-color">Khang</span>
14+
</h1>
15+
<p className="home__content">A Computer Science Enthusiast</p>
16+
</Slide>
17+
</div>
1918
<a href="mailto:tkhang1999@gmail.com" className="home__button">
2019
Contact
2120
</a>
2221
</Slide>
2322
</div>
24-
<Slide top cascade>
25-
<div className="home__social">
23+
<div className="home__social">
24+
<Slide direction="down" cascade triggerOnce>
2625
<a
2726
href="https://www.linkedin.com/in/tan-khang-le/"
2827
className="home__social-icon"
@@ -35,8 +34,8 @@ const Home = () => {
3534
>
3635
<i className="bx bxl-github"></i>
3736
</a>
38-
</div>
39-
</Slide>
37+
</Slide>
38+
</div>
4039
</div>
4140

4241
<div className="home__img">

‎src/components/NavBar.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,21 @@ const NavBar = (props) => {
44
const menuClassName = props.isMenuOpen ? "nav__menu show" : "nav__menu";
55

66
return (
7-
<nav className="nav bd-container bd-grid">
7+
<nav className="nav bd-container bd-grid" data-testid="nav-bar">
88
<div>
99
<a href="." className="nav__logo">
1010
Khang Le
1111
</a>
1212
</div>
1313

14-
<div className={menuClassName} id="nav-menu">
14+
<div className={menuClassName} data-testid="nav-list">
1515
<NavList />
1616
</div>
1717

1818
<div
1919
className="nav__toggle"
2020
id="nav-toggle"
21+
data-testid="nav-toggle"
2122
onClick={() => props.setIsMenuOpen(!props.isMenuOpen)}
2223
>
2324
<i className="bx bx-menu"></i>

‎src/components/Projects.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const Projects = () => {
22
return (
3-
<section className="projects section" id="projects">
3+
<section className="projects section" id="projects" data-testid="projects">
44
<h2 className="section-title">Projects</h2>
55
<div className="project__list">
66
<div className="project__container bd-container">

‎src/components/Skills.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const Skills = () => {
22
return (
3-
<section className="skills section" id="skills">
3+
<section className="skills section" id="skills" data-testid="skills">
44
<h2 className="section-title">Skills</h2>
55

66
<div className="skills__container bd-container bd-grid">

‎src/components/Work.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import ackcioImg from "../images/ackcio.png";
66

77
const Work = () => {
88
return (
9-
<section className="work section" id="work">
9+
<section className="work section" id="work" data-testid="work">
1010
<h2 className="section-title">Work Experience</h2>
1111
<div className="work__list bd-container">
1212
<div className="work__container">

‎src/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ ReactDOM.render(
88
<React.StrictMode>
99
<App />
1010
</React.StrictMode>,
11-
document.getElementById("root")
11+
document.getElementById("root"),
1212
);
1313

1414
// If you want to start measuring performance in your app, pass a function

0 commit comments

Comments
 (0)