typescript init

Author: avoltis

package.json

@@ -45,7 +45,12 @@
     ]
   },
   "devDependencies": {
+    "@types/jest": "^29.0.0",
+    "@types/node": "^18.7.14",
+    "@types/react": "^18.0.18",
+    "@types/react-dom": "^18.0.6",
     "gh-pages": "^4.0.0",
+    "typescript": "^4.8.2",
     "web-vitals": "^2.1.4"
   }
 }

src/App.test.js renamed to src/App.test.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import App from "./App";
 
 test("renders learn react link", () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();
 });

src/App.js renamed to src/App.tsx

@@ -15,7 +15,7 @@ function App() {
   const existingTheme = localStorage.getItem("theme");
   const [theme, setTheme] = useState(existingTheme || themeOptions.dark);
 
-  const setThemeValue = (data) => {
+  const setThemeValue = (data: string) => {
     localStorage.setItem("theme", data);
     setTheme(data);
   };

src/components/Education.js renamed to src/components/Education.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import PropTypes from "prop-types";
+import { education } from "../types";
 
-export default function Education({ education }) {
+export default function Education({ education }: screenProps) {
   return (
     <div className="card">
       <div className="card-content">
@@ -41,10 +40,6 @@ export default function Education({ education }) {
   );
 }
 
-Education.propTypes = {
-  education: PropTypes.arrayOf(PropTypes.object),
-};
-
-Education.defaultProps = {
-  education: [],
+type screenProps = {
+  education: education[];
 };

src/components/Navbar.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import "../../node_modules/bulma-switch/dist/css/bulma-switch.min.css";
-import { themeOptions } from "../config.js";
+import { themeOptions } from "../config.tsx";
 import { useTheme } from "../context/theme";
 
 export default function Navbar({ social: { email, github }, resume }) {

src/config.js renamed to src/config.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+// import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/index.js

@@ -1,4 +1,6 @@
-const reportWebVitals = (onPerfEntry) => {
+import { ReportHandler } from "web-vitals";
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
     import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);

src/index.tsx

@@ -1,6 +1,4 @@
-import React from "react";
 import { useQuery, gql } from "@apollo/client";
-import PropTypes from "prop-types";
 import Navbar from "../components/Navbar";
 import Header from "../components/Header";
 import Section from "../components/Section";
@@ -12,7 +10,7 @@ import Footer from "../components/Footer";
 
 import portfolio from "../portfolio.json";
 
-const Home = ({ stylesLoaded }) => {
+const Home = ({ stylesLoaded }: screenProps) => {
   //   const { loading, error, data } = useQuery(portfolioQuery);
 
   let portfolioData = portfolio; //getting the json locally to have faster 1st load time on website (free website :p)
@@ -43,7 +41,7 @@ const Home = ({ stylesLoaded }) => {
   } = portfolioData;
 
   return (
-    <React.Fragment>
+    <>
       <Navbar resume={resume} social={social} />
       <Header
         name={firstName + " " + lastName}
@@ -56,18 +54,10 @@ const Home = ({ stylesLoaded }) => {
       <Education education={education} />
       <Hobbies hobbies={hobbies} />
       <Footer social={social} />
-    </React.Fragment>
+    </>
   );
 };
 
-Home.propTypes = {
-  stylesLoaded: PropTypes.bool,
-};
-
-Home.defaultProps = {
-  stylesLoaded: false,
-};
-
 const portfolioQuery = gql`
   query portfolioQuery {
     getPortfolio {
@@ -120,4 +110,8 @@ const portfolioQuery = gql`
   }
 `;
 
+type screenProps = {
+  stylesLoaded: boolean;
+};
+
 export const HomeScreen = Home;