React JS guide

Class based implementation (APP.JSX)

import React from 'react'
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            //Implementation of any states 
        }
    }
    render() {
        return (
            <div className='App'></div>
        )
    }
}

Functional based implementation (APP.JSX)

import React from 'react'

function App() {
    //Implementation of any states
    const [state, setState] = React.useState("state");
    return (
        <div className='App'></div>
    )
}
export default App;

Component Lifecycle Methods

• Constructor
• Render
• ComponentDidMount
• ComponentDidUpdate
• ComponentWillUnmount

Benefits of Class Components

1. Easier Code Organisation
2. Use of 'state', enabling seamless handling of user input
3. Understands lifecycle events and easier handle data when app starts

Rules of Class Components

1. Must be a javascript class
2. Must extend React.Component
3. Must define a render methods that returns some amount of JSX

Rules of state

1. Only usable with class components
2. Confusing props with state
3. State is a JS object that contains data relevant to a component
4. Updating state on a component causes the component to instantly re-render
5. Must be initialised when a component is created
6. State can only be update using setState

Steps for setting up Google OAUTH

• Create new project at console.developers.google.com/
• Set up an OAuth confirmation screen
• Generate an OAuth Client Id
• Install Google's API library and initialise it with the OAuth Client ID
• Ensure the lib gets called whenever user clicks on 'Login with Google' button

Index.html (Use gapi in browser console to check if CDN added)

//Add this
<script src="https://apis.google.com/js/api.js"></script>

Create a GoogleAuth Component

import React from 'react';
class GoogleAuth extends React.Component {
    componentDidMount() {
        window.gapi.load('client:auth2', () => {
            window.gapi.client.innit({
                clientId: "<clientid>.apps.googleusercontent.com",
                scope: 'email',
                plugin_name: 'Stream'
            });
        });
    }
    render() {
        return (
            <button className='ui primary button'>Google Auth</button>
        )
    }
}
export default GoogleAuth;