{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-products/prep/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["img"]},"type":"markdown"},"seo":{"title":"React sample client","description":"Hamilton's Developer Portal is used to help reference and understand the APIs of Hamilton products.","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"react-sample-client"},"children":["React sample client"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"textmodule","id":"51665779339"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The React sample client serves as a basic example of developing with the API to authenticate users and run methods. Use it to demonstrate how to develop with the API using the React front-end library."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The sample client is served in two parts: the React front end, and an Express back-end application to handle necessary server-side functions."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This project covers the following topics:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Connecting to available APIs"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["User authentication"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Displaying the labware catalog"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Connecting to available instruments"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Running and simulating protocols"]}]}]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"textmodule","id":"51556541067"},"children":[{"$$mdtype":"Tag","name":"section","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{"className":"note"},"children":["This sample client is for demonstration purposes only and not intended for production."]}]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/prep-react-sample-1.6217a96f983c587b30e7aefc4fc38f8043214acc9cfaf079fffbce694478b4f4.8b356899.png","alt":"menu","withLightbox":false,"width":"40%"},"children":[]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/prep-react-sample-2.2bad4df3cdcb14325e3cd9452d14311f01689abbe1ac070d358ae11bfb38b8de.8b356899.png","alt":"protocol-run","withLightbox":false,"width":"40%"},"children":[]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/prep-react-sample-3.6bfcfc07b730cd3ea25df38875d51eba96075047ce83d47103217fdca68e4e00.8b356899.png","alt":"labware-view","withLightbox":false,"width":"40%"},"children":[]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/prep-react-sample-4.31642b1378418826d85441ed933e2ce7a4ca7d8fffbedc6b7ace8c200f02bcba.8b356899.png","alt":"instrument-view","withLightbox":false,"width":"40%"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"prerequisites"},"children":["Prerequisites"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Microlab Prep 3.2.1"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Node v14.16.0 or newer"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"download"},"children":["Download"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"textmodule","id":"51556545419"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The source code is a downloadable ZIP package. Further installation steps and environment setup instructions are provided in the source code's ",{"$$mdtype":"Tag","name":"span","attributes":{"className":"file"},"children":["README.md"]}," file."]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{"className":"file"},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"../static/prep-examples/DemoReactNativeClient.zip","target":"_blank"},"children":["DemoReactNativeClient.zip"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"additional-resources"},"children":["Additional resources"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"textmodule","id":"51556676619"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information about the sample client, download the project's ZIP package and refer to the ",{"$$mdtype":"Tag","name":"span","attributes":{"className":"file"},"children":["README.md"]}," file in the project's folder."]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["React 18: ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://react.dev/blog/2022/03/29/react-v18","target":"_blank"},"children":["https://react.dev/blog/2022/03/29/react-v18"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Node installation: ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://nodejs.org/en/download","target":"_blank"},"children":["https://nodejs.org/en/download"]}]}]}]}]},"headings":[{"value":"React sample client","id":"react-sample-client","depth":1},{"value":"Prerequisites","id":"prerequisites","depth":2},{"value":"Download","id":"download","depth":2},{"value":"Additional resources","id":"additional-resources","depth":2}],"frontmatter":{"seo":{"title":"React sample client"}},"lastModified":"2026-07-30T19:22:04.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/pages/prep_example_react_sample_client_prep","userData":{"isAuthenticated":false,"teams":["anonymous"]}}