{"id":734,"date":"2024-06-07T16:26:31","date_gmt":"2024-06-07T16:26:31","guid":{"rendered":"https:\/\/www.bleuio.com\/blog\/?p=734"},"modified":"2024-06-07T16:28:28","modified_gmt":"2024-06-07T16:28:28","slug":"building-a-ble-application-with-reactjs-and-bleuio","status":"publish","type":"post","link":"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/","title":{"rendered":"Building a BLE Application with ReactJS and BleuIO"},"content":{"rendered":"\n<p>In this tutorial, we&#8217;ll explore how to <strong><a href=\"https:\/\/www.bleuio.com\/\">create a Bluetooth Low Energy (BLE) application<\/a><\/strong> using ReactJS and the BleuIO BLE USB dongle. BleuIO is a versatile BLE device that makes developing BLE applications fast and easy with its user-friendly AT commands.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>Bluetooth Low Energy (BLE) technology is widely used for short-range communication, particularly in IoT applications. BleuIO, with its easy-to-use AT commands, simplifies the process of integrating BLE functionality into your applications. In this tutorial, we&#8217;ll demonstrate how to create a BLE application using ReactJS. Specifically, we will show you how to scan for nearby BLE devices for three seconds and display the results on the screen, highlighting the capabilities of BleuIO.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>Before we start, make sure you have the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/www.bleuio.com\/\">A BleuIO USB dongle<\/a><\/strong><\/li>\n\n\n\n<li>A computer with a Chromium-based browser (like Chrome or Edge)<\/li>\n\n\n\n<li>Node.js and npm installed<\/li>\n\n\n\n<li>Basic knowledge of ReactJS<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Setting Up the Project<\/h2>\n\n\n\n<p>First, let&#8217;s create a new React project. If you haven&#8217;t already installed <code>create-react-app<\/code>, you can do so with the following command:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>npx create-react-app ble-react-app<br>cd ble-react-app<br>npm start<br><\/code><\/pre>\n\n\n\n<p>This will create a new React application and start the development server.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating the Serial Port Component<\/h2>\n\n\n\n<p>We&#8217;ll create a component to handle the serial port communication with the BleuIO dongle. Create a new file called <strong><code>SerialPortComponent.js<\/code> <\/strong>in the <code><strong>src<\/strong><\/code> directory and add the following code:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>import React, { useState, useEffect } from 'react';<br><br>const SerialPortComponent = () => {<br>  const [port, setPort] = useState(null);<br>  const [output, setOutput] = useState('');<br>  const [reader, setReader] = useState(null);<br>  const [writer, setWriter] = useState(null);<br><br>  const connectToSerialPort = async () => {<br>    try {<br>      \/\/ Request a port and open a connection.<br>      const selectedPort = await navigator.serial.requestPort();<br>      await selectedPort.open({ baudRate: 9600 });<br>      setPort(selectedPort);<br><br>      const textDecoder = new TextDecoderStream();<br>      const readableStreamClosed = selectedPort.readable.pipeTo(<br>        textDecoder.writable<br>      );<br>      const reader = textDecoder.readable.getReader();<br>      setReader(reader);<br><br>      const textEncoder = new TextEncoderStream();<br>      const writableStreamClosed = textEncoder.readable.pipeTo(<br>        selectedPort.writable<br>      );<br>      const writer = textEncoder.writable.getWriter();<br>      setWriter(writer);<br><br>      \/\/ Read data from the serial port.<br>      readSerialData(reader);<br>    } catch (error) {<br>      console.error('There was an error opening the serial port:', error);<br>    }<br>  };<br><br>  const readSerialData = async (reader) => {<br>    try {<br>      while (true) {<br>        const { value, done } = await reader.read();<br>        if (done) {<br>          \/\/ Allow the serial port to be closed later.<br>          reader.releaseLock();<br>          break;<br>        }<br>        \/\/ Convert the received data to a string and update the state.<br>        setOutput((prevOutput) => prevOutput + value);<br>      }<br>    } catch (error) {<br>      console.error('Error reading from the serial port:', error);<br>    }<br>  };<br><br>  const writeToSerialPort = async () => {<br>    setOutput('');<br>    try {<br>      if (writer) {<br>        \/\/ Send AT+CENTRAL command<br>        await writer.write('AT+CENTRAL\\r');<br>        setOutput((prevOutput) => prevOutput + 'AT+CENTRAL\\r\\n');<br><br>        \/\/ Wait for a short while to ensure the command is processed<br>        await new Promise((resolve) => setTimeout(resolve, 500));<br><br>        \/\/ Send AT+GAPSCAN=3 command<br>        await writer.write('AT+GAPSCAN=3\\r');<br>        setOutput((prevOutput) => prevOutput + 'AT+GAPSCAN=3\\r\\n');<br><br>        \/\/ Wait for scan to complete and read response<br>        await new Promise((resolve) => setTimeout(resolve, 3000));<br><br>        \/\/ Read and process data from the serial port<br>        let scanData = '';<br>        while (true) {<br>          const { value, done } = await reader.read();<br>          if (done) {<br>            break;<br>          }<br>          scanData += value;<br>        }<br>        setOutput((prevOutput) => prevOutput + scanData);<br>      } else {<br>        console.error('Writer not available');<br>      }<br>    } catch (error) {<br>      console.error('Error writing to the serial port:', error);<br>    }<br>  };<br><br>  useEffect(() => {<br>    return () => {<br>      \/\/ Cleanup function to close port when component unmounts<br>      if (port) {<br>        port.close();<br>      }<br>      if (reader) {<br>        reader.releaseLock();<br>      }<br>      if (writer) {<br>        writer.releaseLock();<br>      }<br>    };<br>  }, [port, reader, writer]);<br><br>  return (<br>    &lt;div className=\"mt-5\"><br>      &lt;button<br>        className=\"btn btn-success me-2\"<br>        onClick={connectToSerialPort}<br>        disabled={!!port}<br>      ><br>        Connect to BleuIO<br>      &lt;\/button><br>      &lt;button<br>        className=\"btn btn-warning me-2\"<br>        onClick={writeToSerialPort}<br>        disabled={!writer}<br>      ><br>        Scan for nearby BLE devices for 3 seconds<br>      &lt;\/button><br><br>      {output &amp;&amp; (<br>        &lt;div><br>          &lt;h3>Response from the BleuIO:&lt;\/h3> &lt;pre>{output}&lt;\/pre><br>        &lt;\/div><br>      )}<br>    &lt;\/div><br>  );<br>};<br><br>export default SerialPortComponent;<br><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Explanation of the Code<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Connecting to the Serial Port<\/strong>: The <code>connectToSerialPort<\/code> function requests access to the serial port and opens a connection. It initializes the text encoder and decoder streams for reading and writing data.<\/li>\n\n\n\n<li><strong>Reading Serial Data<\/strong>: The <code>readSerialData<\/code> function reads data from the serial port continuously and updates the output state with the received data.<\/li>\n\n\n\n<li><strong>Writing to the Serial Port<\/strong>: The <code>writeToSerialPort<\/code> function sends AT commands to the serial port. It first sends the <code>AT+CENTRAL<\/code> command to put the device in central mode, then sends the <code>AT+GAPSCAN=3<\/code> command to scan for nearby BLE devices for 3 seconds. It reads and displays the response from the serial port after the scan completes.<\/li>\n\n\n\n<li><strong>Cleanup<\/strong>: The <code>useEffect<\/code> hook ensures that the serial port is properly closed and resources are released when the component is unmounted.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Using the Component in Your App<\/h2>\n\n\n\n<p>Update your <code><strong>App.js<\/strong><\/code> to include the new <code><strong>SerialPortComponent<\/strong><\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>\/\/ src\/App.js<br>import React from 'react';<br>import SerialPortComponent from '.\/SerialPortComponent';<br><br>function App() {<br>  return (<br>    &lt;div className=\"App\"><br>      &lt;header className=\"App-header\"><br>        &lt;h1>BLE Application with React and BleuIO&lt;\/h1><br>        &lt;SerialPortComponent \/><br>      &lt;\/header><br>    &lt;\/div><br>  );<br>}<br><br>export default App;<br><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Running the Application<\/h2>\n\n\n\n<p>Make sure your BleuIO USB dongle is connected to your computer. Start your React application:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>npm start<br><\/code><\/pre>\n\n\n\n<p>Open your browser and navigate to <code><strong>http:\/\/localhost:3000<\/strong><\/code>. You should see the application with two buttons: &#8220;<strong>Connect to BleuIO<\/strong>&#8221; and &#8220;<strong>Scan for nearby BLE devices for 3 seconds<\/strong>&#8220;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"275\" src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/image-1-1024x275.png\" alt=\"\" class=\"wp-image-736\" srcset=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/image-1-1024x275.png 1024w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/image-1-300x81.png 300w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/image-1-768x206.png 768w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/image-1.png 1490w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Connect to BleuIO<\/strong>: Click this button to connect to the BleuIO USB dongle. The browser will prompt you to select the serial port.<\/li>\n\n\n\n<li><strong>Scan for nearby BLE devices for 3 seconds<\/strong>: After connecting, click this button to send the <code>AT+CENTRAL<\/code> and <code>AT+GAPSCAN=3<\/code> commands to the BleuIO dongle. The output area will display the response from the device.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Output<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"952\" src=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/image-2-1024x952.png\" alt=\"\" class=\"wp-image-737\" srcset=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/image-2-1024x952.png 1024w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/image-2-300x279.png 300w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/image-2-768x714.png 768w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/image-2-1536x1427.png 1536w, https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/image-2.png 1556w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In this tutorial, we&#8217;ve demonstrated a basic usage of BleuIO AT commands by creating a BLE application using ReactJS and the BleuIO USB dongle. By leveraging the Web Serial API and the straightforward AT commands provided by BleuIO, you can quickly develop BLE applications that run on any platform. You can expand on this example to develop your own applications using BleuIO&#8217;s comprehensive set of AT commands. Read more about the AT commands in our <a href=\"https:\/\/www.bleuio.com\/getting_started\/docs\/commands\/\">documentation<\/a>.<\/p>\n\n\n\n<p>BleuIO simplifies BLE development and, combined with the popularity and versatility of ReactJS, allows developers to create powerful and cross-platform BLE applications with ease. Whether you&#8217;re building IoT devices, wearable tech, or any BLE-enabled application, BleuIO is a reliable and efficient choice.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we&#8217;ll explore how to create a Bluetooth Low Energy (BLE) application using ReactJS and the BleuIO BLE USB dongle. BleuIO is a versatile BLE device that makes developing BLE applications fast and easy with its user-friendly AT commands. Introduction Bluetooth Low Energy (BLE) technology is widely used for short-range communication, particularly in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":738,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,2],"tags":[],"class_list":["post-734","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bleuio","category-bleuio-tutorial"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Building a BLE Application with ReactJS and BleuIO - BleuIO - Create Bluetooth Low Energy application<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a BLE Application with ReactJS and BleuIO - BleuIO - Create Bluetooth Low Energy application\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we&#8217;ll explore how to create a Bluetooth Low Energy (BLE) application using ReactJS and the BleuIO BLE USB dongle. BleuIO is a versatile BLE device that makes developing BLE applications fast and easy with its user-friendly AT commands. Introduction Bluetooth Low Energy (BLE) technology is widely used for short-range communication, particularly in [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/\" \/>\n<meta property=\"og:site_name\" content=\"BleuIO - Create Bluetooth Low Energy application\" \/>\n<meta property=\"article:published_time\" content=\"2024-06-07T16:26:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-07T16:28:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/ble-reactjs.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"620\" \/>\n\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"BleuIO\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/building-a-ble-application-with-reactjs-and-bleuio\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/building-a-ble-application-with-reactjs-and-bleuio\\\/\"},\"author\":{\"name\":\"BleuIO\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#\\\/schema\\\/person\\\/89bc581382d5964043f96efc54b75b80\"},\"headline\":\"Building a BLE Application with ReactJS and BleuIO\",\"datePublished\":\"2024-06-07T16:26:31+00:00\",\"dateModified\":\"2024-06-07T16:28:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/building-a-ble-application-with-reactjs-and-bleuio\\\/\"},\"wordCount\":585,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/building-a-ble-application-with-reactjs-and-bleuio\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/ble-reactjs.jpg\",\"articleSection\":[\"BleuIO\",\"BleuIO tutorial\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/building-a-ble-application-with-reactjs-and-bleuio\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/building-a-ble-application-with-reactjs-and-bleuio\\\/\",\"url\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/building-a-ble-application-with-reactjs-and-bleuio\\\/\",\"name\":\"Building a BLE Application with ReactJS and BleuIO - BleuIO - Create Bluetooth Low Energy application\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/building-a-ble-application-with-reactjs-and-bleuio\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/building-a-ble-application-with-reactjs-and-bleuio\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/ble-reactjs.jpg\",\"datePublished\":\"2024-06-07T16:26:31+00:00\",\"dateModified\":\"2024-06-07T16:28:28+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#\\\/schema\\\/person\\\/89bc581382d5964043f96efc54b75b80\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/building-a-ble-application-with-reactjs-and-bleuio\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/building-a-ble-application-with-reactjs-and-bleuio\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/building-a-ble-application-with-reactjs-and-bleuio\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/ble-reactjs.jpg\",\"contentUrl\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/ble-reactjs.jpg\",\"width\":620,\"height\":350,\"caption\":\"ble reactjs\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/building-a-ble-application-with-reactjs-and-bleuio\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a BLE Application with ReactJS and BleuIO\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/\",\"name\":\"BleuIO - Create Bluetooth Low Energy application\",\"description\":\"Learn Bluetooth Low Energy programming and build Bluetooth Low Energy Application\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/#\\\/schema\\\/person\\\/89bc581382d5964043f96efc54b75b80\",\"name\":\"BleuIO\",\"sameAs\":[\"https:\\\/\\\/www.bleuio.com\\\/blog\"],\"url\":\"https:\\\/\\\/www.bleuio.com\\\/blog\\\/author\\\/biadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building a BLE Application with ReactJS and BleuIO - BleuIO - Create Bluetooth Low Energy application","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/","og_locale":"en_US","og_type":"article","og_title":"Building a BLE Application with ReactJS and BleuIO - BleuIO - Create Bluetooth Low Energy application","og_description":"In this tutorial, we&#8217;ll explore how to create a Bluetooth Low Energy (BLE) application using ReactJS and the BleuIO BLE USB dongle. BleuIO is a versatile BLE device that makes developing BLE applications fast and easy with its user-friendly AT commands. Introduction Bluetooth Low Energy (BLE) technology is widely used for short-range communication, particularly in [&hellip;]","og_url":"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/","og_site_name":"BleuIO - Create Bluetooth Low Energy application","article_published_time":"2024-06-07T16:26:31+00:00","article_modified_time":"2024-06-07T16:28:28+00:00","og_image":[{"width":620,"height":350,"url":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/ble-reactjs.jpg","type":"image\/jpeg"}],"author":"BleuIO","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/#article","isPartOf":{"@id":"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/"},"author":{"name":"BleuIO","@id":"https:\/\/www.bleuio.com\/blog\/#\/schema\/person\/89bc581382d5964043f96efc54b75b80"},"headline":"Building a BLE Application with ReactJS and BleuIO","datePublished":"2024-06-07T16:26:31+00:00","dateModified":"2024-06-07T16:28:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/"},"wordCount":585,"commentCount":0,"image":{"@id":"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/ble-reactjs.jpg","articleSection":["BleuIO","BleuIO tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/","url":"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/","name":"Building a BLE Application with ReactJS and BleuIO - BleuIO - Create Bluetooth Low Energy application","isPartOf":{"@id":"https:\/\/www.bleuio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/#primaryimage"},"image":{"@id":"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/ble-reactjs.jpg","datePublished":"2024-06-07T16:26:31+00:00","dateModified":"2024-06-07T16:28:28+00:00","author":{"@id":"https:\/\/www.bleuio.com\/blog\/#\/schema\/person\/89bc581382d5964043f96efc54b75b80"},"breadcrumb":{"@id":"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/#primaryimage","url":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/ble-reactjs.jpg","contentUrl":"https:\/\/www.bleuio.com\/blog\/wp-content\/uploads\/2024\/06\/ble-reactjs.jpg","width":620,"height":350,"caption":"ble reactjs"},{"@type":"BreadcrumbList","@id":"https:\/\/www.bleuio.com\/blog\/building-a-ble-application-with-reactjs-and-bleuio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bleuio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a BLE Application with ReactJS and BleuIO"}]},{"@type":"WebSite","@id":"https:\/\/www.bleuio.com\/blog\/#website","url":"https:\/\/www.bleuio.com\/blog\/","name":"BleuIO - Create Bluetooth Low Energy application","description":"Learn Bluetooth Low Energy programming and build Bluetooth Low Energy Application","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bleuio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.bleuio.com\/blog\/#\/schema\/person\/89bc581382d5964043f96efc54b75b80","name":"BleuIO","sameAs":["https:\/\/www.bleuio.com\/blog"],"url":"https:\/\/www.bleuio.com\/blog\/author\/biadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/posts\/734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/comments?post=734"}],"version-history":[{"count":2,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/posts\/734\/revisions"}],"predecessor-version":[{"id":741,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/posts\/734\/revisions\/741"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/media\/738"}],"wp:attachment":[{"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/media?parent=734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/categories?post=734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bleuio.com\/blog\/wp-json\/wp\/v2\/tags?post=734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}