React

React

Use generated client code in your React app

  • Extract the downloaded archive to <react_project_folder>/src/gen/typescript-axios-client
  • Install axios:

{% c-block language="bash" %}
npm install --save axios
{% c-block-end %}

  • Use the generated client code from a component like this:

{% c-block language="typescript" %}
import React, { useState, useEffect } from "react";
import { NoteApi, Note } from "../gen/typescript-axios-client";

const Notes = () => {

  const [notes, setNotes] = useState<Note[]>([]);

  useEffect(() => {
    loadNotes();
  }, []);

  const loadNotes = async () => {
    const noteApi = new NoteApi({
      /* accessToken: <pass_access_token_here> */
    });
    const response = await noteApi.listNotes();
    const notes = response.data;
    setNotes(notes);
  };

  return (
    <>
      {notes.map((note) => (
        <span key={note.id}>{note.text}</span>
      ))}
    </>
  );
};
{% c-block-end %}

That's it! 🎉

A complete example for using generated client code in a React app including authentication is available here: https://github.com/stackprint/example-notes-react