React – Winerva Blog

React uses a custom JavaScript Syntax Extension (JSX) to describe HTML elements and TypeScript for static typing, both of which require a transpiler to convert the code to JavaScript.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Weather Compoent</title>
        <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">

            function App() {
                const WeatherComponent = (props) => {

                    const [count, setCount] = React.useState(0);
                    React.useEffect(() => {
                        setCount(1);
                    }, []);

                    return (
                        <h1 onClick={()=>setCount(count+1)}>
                            The weather is {props.weather},
                            and the counter show {count}
                        </h1>
                    )
                }

                return (<WeatherComponent weather="sunny" />);
            }

            const container = document.getElementById("root");
            const root = ReactDOM.createRoot(container);
            root.render(<App />);
        </script>
    </body>
</html>

To Use Function Way to describe REACT Component

import React from "react";

export default function App() {

    const getElement = (weather: string): JSX.Element => {
        const element = <h1>The weather is {weather}</h1>;
        return element;
    }
    return getElement("sunny");
}

import React, { useState, useEffect } from "react";

export default function App() {
    
    interface WeaterProps {
        weather: string;
    }

    const WeatherComponent = (props: WeaterProps): JSX.Element => {

        const [count, setCount] = useState(0);

        useEffect(() => {
            setCount(1);
        }, []);

        return (
            <h1 onClick={() => setCount(count + 1)}>
                The weather is {props.weather}, and the counter shows {count}
            </h1>
        )
    }

    return (<WeatherComponent weather="sunny" />);
}

To Use Class Way to describe REACT Component

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  interface WeatherProps {
    weather: string;
  };

  type WeatherState = {
    count: number;
  };

  class WeatherComponent extends React.Component<WeatherProps, WeatherState> {
    constructor(props: WeatherProps) {
      super(props);
      this.state = {
        count: 0
      };
    }

    componentDidMount(): void {
      this.setState({count: 1});
    }

    clickHandler(): void {
      this.setState( {count: this.state.count + 1});
    }

    render() {
      return (
        <h1 onClick={() => this.clickHandler()}>
          The weather is {this.props.weather}, and the counter show {" "} {this.state.count}
        </h1>
      )
    }
  }


  return (<WeatherComponent weather="sunny" />);

}

export default App;

useContext and Context Providers

use createContext to initialize the ThemeContent
creat the parent component and name it ContextComponent. This is the wrapper that holds the context provider and all child components
we create a local theme variable in the ContextCompoent. the child compoent button to change the theme value between dark and light.
We create Headline component to use useContext hook to get the theme value provide by ThemeContext.
The context provider wraps the child components, and we can access the shared data with the useContext hook

import React, { useState, createContext, useContext } from "react";

export default function App() {

    const ThemeContext = createContext("dark");

    const ContextComponent = (): JSX.Element => {

        const [theme, setTheme] = useState("dark");

        return (
            <div>
                <ThemeContext.Provider value={theme}>
                    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
                        Toogle theme
                    </button>
                    <Headline /> //will get the theme change value (inside context.provider)
                </ThemeContext.Provider>
            </div>
        )
    }

    const Headline = (): JSX.Element => {

        const theme = useContext(ThemeContext);
        return (<h1 className={theme}>Current theme: {theme}</h1>)
    }

    return (<><ContextComponent /><Headline /></>); //This Headline not get the theme value, because outside the context.provider 
}