refactor: upgrade React 16 to 19 with function components

package.json

@@ -4,15 +4,14 @@
   "private": true,
   "dependencies": {
     "bootstrap": "^4.5.3",
-    "react": "^16.0.0",
-    "react-ace": "^10.1.0",
-    "react-dom": "^16.0.0",
-    "react-fontawesome": "^1.7.1",
+    "react": "^19.2.4",
+    "react-ace": "^14.0.1",
+    "react-dom": "^19.2.4",
     "react-icons": "^4.1.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-spinners": "^0.10.6",
-    "reactstrap": "^8.8.0",
+    "react-spinners": "^0.15.0",
+    "reactstrap": "^9.2.3",
     "reconnecting-websocket": "^4.4.0"
   },
   "scripts": {

src/App.jsx

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import './App.css';
 
 import Home from "./page/Home";
@@ -8,132 +8,125 @@ import Documentation from "./page/Documentation";
 import Principles from "./page/Principles";
 import Contribute from "./page/Contribute";
 import Faq from "./page/Faq";
-import {Container, Navbar, Nav, NavItem, NavLink, Row} from 'reactstrap';
-import {Route} from "react-router";
-import {Link} from "react-router-dom";
+import { Container, Navbar, Nav, NavItem, NavLink, Row } from 'reactstrap';
+import { Route } from "react-router";
+import { Link } from "react-router-dom";
 
 import ReconnectingWebSocket from 'reconnecting-websocket';
 import Blog from "./page/Blog";
 import Internships from "./page/Internships";
 
 const SocketAddress = 'wss://evaluator.flix.dev/ws';
 
-class App extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            connected: false
-        };
+function App() {
+    const [connected, setConnected] = useState(false);
+    const websocketRef = useRef(null);
 
+    useEffect(() => {
         console.log("Connecting to: " + SocketAddress);
 
         let options = {
             connectionTimeout: 2500
         };
 
-        this.websocket = new ReconnectingWebSocket(SocketAddress, [], options);
+        const ws = new ReconnectingWebSocket(SocketAddress, [], options);
 
-        this.websocket.addEventListener("open", event => {
+        ws.addEventListener("open", () => {
             console.log("Connected to: " + SocketAddress);
-            this.setState({connected: true});
+            setConnected(true);
         });
-        this.websocket.addEventListener("close", event => {
+        ws.addEventListener("close", event => {
             console.log("Disconnected from: " + SocketAddress);
             console.log(event);
-            this.setState({connected: false});
+            setConnected(false);
         });
-        this.websocket.addEventListener("error", event => {
+        ws.addEventListener("error", event => {
             console.log("Disconnected from: " + SocketAddress);
             console.log(event);
-            this.setState({connected: false});
+            setConnected(false);
         });
-    }
 
-    runProgram = (src, callback) => {
-        if (!this.state.connected) {
+        websocketRef.current = ws;
+
+        return () => {
+            ws.close();
+        };
+    }, []);
+
+    const runProgram = useCallback((src, callback) => {
+        if (!connected) {
             console.log("Not connected yet");
             return;
         }
 
-        this.websocket.onmessage = event => {
+        websocketRef.current.onmessage = event => {
             console.log("Received reply from: " + SocketAddress);
             const data = JSON.parse(event.data);
 
             console.log(data);
             callback(data);
         };
 
-        let data = {
-            src: src
-        };
-
-        this.websocket.send(JSON.stringify(data));
-    };
-
-    getHome() {
-        return <Home flix={{connected: this.state.connected, run: this.runProgram.bind(this)}}/>
-    }
-
-    render() {
-        return (
-            <Container className="page">
-                <Navbar dark color="info" expand="md" className="menu shadow-sm mb-4">
-                    <Nav className="mr-lg-auto" navbar>
-                        <NavItem className="pl-1 pr-1">
-                            <NavLink tag={Link} to="/">Home</NavLink>
-                        </NavItem>
-
-                        <NavItem className="pl-1 pr-1">
-                            <NavLink tag={Link} to="/get-started/">Get Started</NavLink>
-                        </NavItem>
-
-                        <NavItem className="pl-1 pr-1">
-                            <NavLink tag={Link} to="/vscode/">VSCode</NavLink>
-                        </NavItem>
-
-                        <NavItem className="pl-1 pr-1">
-                            <NavLink tag={Link}
-                                     to="/principles/">Principles</NavLink>
-                        </NavItem>
-
-                        <NavItem className="pl-1 pr-1">
-                            <NavLink tag={Link} to="/documentation/">Documentation</NavLink>
-                        </NavItem>
-
-                        <NavItem className="pl-1 pr-1">
-                            <NavLink tag={Link} to="/faq/">FAQ</NavLink>
-                        </NavItem>
-
-                        <NavItem className="pl-1 pr-1">
-                            <NavLink tag={Link} to="/blog/">Blog</NavLink>
-                        </NavItem>
-
-                        <NavItem className="pl-1 pr-1">
-                            <NavLink tag={Link} to="/contribute/">Contribute</NavLink>
-                        </NavItem>
-
-                        <NavItem className="pl-1 pr-1">
-                            <NavLink tag={Link} to="/internships/">Internships</NavLink>
-                        </NavItem>
-                    </Nav>
-                </Navbar>
-
-                <Route path="/" exact render={() => this.getHome()}/>
-                <Route path="/get-started/" component={GetStarted}/>
-                <Route path="/vscode/" component={VSCode}/>
-                <Route path="/principles/" component={Principles}/>
-                <Route path="/documentation/" component={Documentation}/>
-                <Route path="/faq/" component={Faq}/>
-                <Route path="/blog/" component={Blog}/>
-                <Route path="/contribute/" component={Contribute}/>
-                <Route path="/internships/" component={Internships}/>
-
-                <Row/>
-
-            </Container>
-        );
-    }
+        websocketRef.current.send(JSON.stringify({ src }));
+    }, [connected]);
+
+    return (
+        <Container className="page">
+            <Navbar dark color="info" expand="md" className="menu shadow-sm mb-4">
+                <Nav className="mr-lg-auto" navbar>
+                    <NavItem className="pl-1 pr-1">
+                        <NavLink tag={Link} to="/">Home</NavLink>
+                    </NavItem>
+
+                    <NavItem className="pl-1 pr-1">
+                        <NavLink tag={Link} to="/get-started/">Get Started</NavLink>
+                    </NavItem>
+
+                    <NavItem className="pl-1 pr-1">
+                        <NavLink tag={Link} to="/vscode/">VSCode</NavLink>
+                    </NavItem>
+
+                    <NavItem className="pl-1 pr-1">
+                        <NavLink tag={Link}
+                                 to="/principles/">Principles</NavLink>
+                    </NavItem>
+
+                    <NavItem className="pl-1 pr-1">
+                        <NavLink tag={Link} to="/documentation/">Documentation</NavLink>
+                    </NavItem>
+
+                    <NavItem className="pl-1 pr-1">
+                        <NavLink tag={Link} to="/faq/">FAQ</NavLink>
+                    </NavItem>
+
+                    <NavItem className="pl-1 pr-1">
+                        <NavLink tag={Link} to="/blog/">Blog</NavLink>
+                    </NavItem>
+
+                    <NavItem className="pl-1 pr-1">
+                        <NavLink tag={Link} to="/contribute/">Contribute</NavLink>
+                    </NavItem>
+
+                    <NavItem className="pl-1 pr-1">
+                        <NavLink tag={Link} to="/internships/">Internships</NavLink>
+                    </NavItem>
+                </Nav>
+            </Navbar>
+
+            <Route path="/" exact render={() => <Home flix={{ connected, run: runProgram }} />} />
+            <Route path="/get-started/" component={GetStarted} />
+            <Route path="/vscode/" component={VSCode} />
+            <Route path="/principles/" component={Principles} />
+            <Route path="/documentation/" component={Documentation} />
+            <Route path="/faq/" component={Faq} />
+            <Route path="/blog/" component={Blog} />
+            <Route path="/contribute/" component={Contribute} />
+            <Route path="/internships/" component={Internships} />
+
+            <Row />
+
+        </Container>
+    );
 }
 
 export default App;

src/index.jsx

@@ -1,12 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import { createRoot } from 'react-dom/client';
 import App from './App';
-import {BrowserRouter} from "react-router-dom";
+import { BrowserRouter } from 'react-router-dom';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
     <BrowserRouter basename="/">
-        <App/>
-    </BrowserRouter>,
-    document.getElementById('root')
+        <App />
+    </BrowserRouter>
 );

src/page/Blog.jsx

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import { useEffect } from 'react';
 import {Col, Container, Row} from "reactstrap";
 import {Route, Switch} from "react-router";
 import ProgrammingLanguageDefense from "./blog/ProgrammingLanguageDefense";
@@ -7,16 +7,14 @@ import Naming from "./blog/Naming";
 import Redundancies from "./blog/Redundancies";
 import PolymorphicEffects from "./blog/PolymorphicEffects";
 
-class Blog extends Component {
-
-    componentDidMount() {
+function Blog() {
+    useEffect(() => {
         if (!document.title) {
             document.title = "Flix | Blog";
         }
-    }
+    }, []);
 
-    render() {
-        return (
+    return (
             <Container>
                 <Switch>
                     <Route exact path="/blog/">
@@ -56,8 +54,7 @@ class Blog extends Component {
 
                 </Switch>
             </Container>
-        );
-    }
+    );
 }
 
 export default Blog;

src/page/Contribute.jsx

@@ -1,14 +1,12 @@
-import React, {Component} from 'react';
+import { useEffect } from 'react';
 import {Card, CardBody, CardTitle, Col, Container, Row} from "reactstrap";
 
-class Contribute extends Component {
-
-    componentDidMount() {
+function Contribute() {
+    useEffect(() => {
         document.title = "Flix | Contribute";
-    }
+    }, []);
 
-    render() {
-        return (
+    return (
             <Container>
                 <Row className="mb-3">
                     <Col>
@@ -86,8 +84,7 @@ class Contribute extends Component {
                     </Col>
                 </Row>
             </Container>
-        );
-    }
+    );
 }
 
 export default Contribute;

src/page/Documentation.jsx

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import { useEffect } from 'react';
 import {Card, CardSubtitle, CardText, CardTitle, Col, Container, Row} from "reactstrap";
 import {Link} from "react-router-dom";
 
@@ -11,14 +11,12 @@ import {FaTwitter} from 'react-icons/fa';
 import {GoGraph} from 'react-icons/go';
 import {MdSchool} from 'react-icons/md';
 
-class Documentation extends Component {
-
-    componentDidMount() {
+function Documentation() {
+    useEffect(() => {
         document.title = "Flix | Documentation";
-    }
+    }, []);
 
-    render() {
-        return (
+    return (
             <Container>
                 <Row className="mb-3">
                     <Col>
@@ -151,8 +149,7 @@ class Documentation extends Component {
                     </Col>
                 </Row>
             </Container>
-        );
-    }
+    );
 }
 
 export default Documentation;