Giter Club home page Giter Club logo

demo-frontend's Introduction

Requirements

Node.js is required for this.

Getting started

  1. npx create-react-app my-app
  2. cd my-app
  3. npm install axios
  4. npm install react-router-dom

Possible Errors

Backend needs flask_cors in order to serve data to another site. Since this React app has a different protocol / hostname / port combination than the backend, an error will be thrown by the browser unless the backend has a certain header in its responses.

$ pip install -U flask-cors

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

Creating the Router

Rather than creating different files for different pages, React is used for single-page web apps. They have the functionality of multiple pages, but routing is done in the browser rather than on the server.

Creating the Navbar

React's component structure allows modularity - rather than having to write out a navbar in multiple pages, we can write one and import it where needed.

Creating the list of Games

Use axios to send a GET request. Render the response in the browser.

Creating the Add Game button

Use axios to send a POST request.

demo-frontend's People

Contributors

avespaisnotamotorcycle avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.