Setup React App

README.md

@@ -18,22 +18,29 @@ Review the [commit history](https://github.com/cloud-city-crafted/react-typescri
 
 1. [Initialize Project](https://github.com/cloud-city-crafted/react-typescript-webpack-template/pull/1)
 2. [Setup TypeScript](https://github.com/cloud-city-crafted/react-typescript-webpack-template/pull/2)
-3. Setup React
+3. [Setup React](https://github.com/cloud-city-crafted/react-typescript-webpack-template/pull/3)
 4. Setup Jest
 5. Setup Webpack
 
 ## ⚛️ What?
 
 This project template only uses the dependencies and configurations needed to:
 
-- Develop using TypeScript (using `.tsx` files)
+- Create a React Web Application
+- Develop React Components using TypeScript (using `.tsx` files)
+
+The final state is a React app equivalent to the starting point of [Create React App](https://create-react-app.dev/).
 
 ### 🛠 Tooling
+- [React](https://reactjs.org): An open source JavaScript library for building UIs
+  - [react](https://www.npmjs.com/package/react): Core React library
+  - [@types/react](https://www.npmjs.com/package/@types/react): Type definitions for `React`
+  - [react-dom](https://www.npmjs.com/package/react-dom): Renders React to DOM
+  - [@types/react-dom](https://www.npmjs.com/package/@types/react-dom): Type definitions for `ReactDOM`
 - [TypeScript](https://www.typescriptlang.org/): A strongly typed language built on top of JavaScript.
   - [typescript](https://www.npmjs.com/package/typescript): Core TypeScript programming language
   - [ts-node](https://www.npmjs.com/package/ts-node): TypeScript execution engine for Node.js
   - [@types/node](https://www.npmjs.com/package/@types/node): Type definitions for Node.js
-
 ## 🪪 License
 
 This project template is [MIT licensed](https://github.com/cloud-city-crafted/react-typescript-webpack-template/blob/main/LICENSE).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-typescript-webpack-template",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A React + TypeScript + Webpack Project Template",
   "private": true,
   "repository": {
@@ -26,7 +26,13 @@
   "homepage": "https://github.com/cloud-city-crafted/react-typescript-webpack-template#readme",
   "devDependencies": {
     "@types/node": "^17.0.36",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
     "ts-node": "^10.8.0",
     "typescript": "^4.7.2"
+  },
+  "dependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   }
 }

src/app.css

@@ -0,0 +1,40 @@
+/* Modified from the create-react-app TypeScript template */
+/* See: https://github.com/facebook/create-react-app/blob/main/packages/cra-template-typescript/template/src/App.css */
+.app {
+  text-align: center;
+}
+
+.app-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.app-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .app-logo {
+    animation: app-logo-spin infinite 20s linear;
+  }
+}
+
+@keyframes app-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.app-link {
+  color: #61dafb;
+}

src/app.tsx

@@ -0,0 +1,30 @@
+// Modified from the create-react-app TypeScript template
+// See: https://github.com/facebook/create-react-app/blob/main/packages/cra-template-typescript/template/src/App.tsx
+import React from 'react';
+
+import './app.css';
+
+import logo from './icons/logo.svg';
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <div className="app" role="main">
+        <header className="app-header">
+          <img src={logo} className="app-logo" alt="logo" />
+          <p>
+            Edit <code>src/app.tsx</code> and save to reload.
+          </p>
+          <a
+            className="app-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+        </header>
+      </div>
+    );
+  }
+}

src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}

src/icons/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React Template",
+  "name": "React Web App Template",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}