Search⌘ K
AI Features
Home
Courses
Quick Start Full Stack Web Development

App Component: Connecting to the Back-end

Explore how to build a React app component that connects to a Flask back-end. Learn to set up client state, use axios for API calls, handle POST requests, and manage Cross-Origin Request Sharing errors during development.

We'll cover the following...

Set up the default opening state

To start, we’ll create the sign-in page as the default opening state. We do this by setting the gameStatus state property to be logged out. The `SignInScreen takes a callback function that will be called when the user clicks on the “Start a Game” button. That function must take two arguments: a user name and a language. For now, we can just accept it and log it to the console.

Javascript (babel-node)
import React, { Component } from 'react';
import { GlobalStyle } from './fonts';
import { SignInScreen } from './screens';
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            gameStatus: 'logged out'
        };
        this.startGame = this.startGame.bind(this);
    };
    startGame(nameValue, langValue) {        
        console.log(nameValue, langValue);
    };
    render() {
        const { gameStatus } = this.state;
        let screen = <></>;
        if (gameStatus === 'logged out') {
            const startGame = this.startGame;
            screen = <SignInScreen clickStart={ startGame }/>;        
        } else {
            return <div>Status {gameStatus}</div>;
        }
        return <><GlobalStyle/>{screen}</>;
    }
}
export default App;

Installing axios

When we run ...