{"id":10339,"date":"2026-08-10T10:17:57","date_gmt":"2026-08-10T10:17:57","guid":{"rendered":"https:\/\/nokobox.com\/index.php\/item\/linkedin-build-a-javascript-ai-app-with-react-and-the-openai-api-2023-9\/"},"modified":"2026-08-10T10:17:57","modified_gmt":"2026-08-10T10:17:57","slug":"linkedin-build-a-javascript-ai-app-with-react-and-the-openai-api-2023-9","status":"publish","type":"digital_item","link":"https:\/\/nokobox.com\/index.php\/item\/linkedin-build-a-javascript-ai-app-with-react-and-the-openai-api-2023-9\/","title":{"rendered":"LinkedIn \u2013 Build a JavaScript AI App with React and the OpenAI API 2023-9"},"content":{"rendered":"<div class=\"w-post-elm post_content\">\n<h2 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Description<\/span><\/h2>\n<p dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Build a JavaScript AI App with React and the OpenAI API. This course shows you how to build an interactive weather app using React and the OpenAI API. Instructor Morten Rand-Hendriksen teaches you how to integrate the OpenAI AI API to analyze weather data, provide actionable recommendations, and explain the information in plain language. This project-based course covers topics such as user authentication, storing tokens in a ServiceWorker, configuring the API, and managing requests. You\u2019ll first learn the basics and how to use GitHub Codespaces, then learn how to build a React app with Vite and connect to the OpenWeatherMap API. The main part of the course is dedicated to the OpenAI API, including testing the API in a Playground, generating security keys, and using a REST client. You\u2019ll also learn how to use AI as a human-machine translator, create custom functions, and handle non-deterministic responses. Finally, you\u2019ll learn how to integrate AI queries into your weather app, process the responses, and create a better user experience with intelligent data visualization. The course covers advanced techniques like Prompt engineering, complex calls to the OpenAI API, and UX enhancements with standalone Loaders.<\/span><\/p>\n<h3 dir=\"ltr\" style=\"text-align: left\" data-sourcepos=\"21:1-21:25\"><span style=\"vertical-align: inherit\">What you will learn:<\/span><\/h3>\n<ul dir=\"ltr\" style=\"text-align: left\" data-sourcepos=\"23:1-38:0\">\n<li data-sourcepos=\"23:1-23:67\"><span style=\"vertical-align: inherit\">How to build a JavaScript AI app with React and the OpenAI API<\/span><\/li>\n<li data-sourcepos=\"24:1-24:52\"><span style=\"vertical-align: inherit\">How to integrate OpenAI\u2019s AI API into a web application<\/span><\/li>\n<li data-sourcepos=\"25:1-25:45\"><span style=\"vertical-align: inherit\">How to use React to build user interfaces<\/span><\/li>\n<li data-sourcepos=\"26:1-26:56\"><span style=\"vertical-align: inherit\">How to authenticate users and store tokens in ServiceWorker<\/span><\/li>\n<li data-sourcepos=\"27:1-27:34\"><span style=\"vertical-align: inherit\">How to configure a task-based API<\/span><\/li>\n<li data-sourcepos=\"28:1-28:39\"><span style=\"vertical-align: inherit\">How to send and receive requests to the API<\/span><\/li>\n<li data-sourcepos=\"29:1-29:58\"><span style=\"vertical-align: inherit\">How to use artificial intelligence as a human-to-machine translator<\/span><\/li>\n<li data-sourcepos=\"30:1-30:41\"><span style=\"vertical-align: inherit\">How to create a location string from a prompt<\/span><\/li>\n<li data-sourcepos=\"31:1-31:42\"><span style=\"vertical-align: inherit\">Understanding the concept of Function calling in the OpenAI API<\/span><\/li>\n<li data-sourcepos=\"32:1-32:45\"><span style=\"vertical-align: inherit\">How to sequence API calls in an application<\/span><\/li>\n<li data-sourcepos=\"33:1-33:33\"><span style=\"vertical-align: inherit\">How to parse the response from the API<\/span><\/li>\n<li data-sourcepos=\"34:1-34:53\"><span style=\"vertical-align: inherit\">How to update the user interface with AI data<\/span><\/li>\n<li data-sourcepos=\"35:1-35:44\"><span style=\"vertical-align: inherit\">Prompt engineering principles for developers<\/span><\/li>\n<li data-sourcepos=\"36:1-36:37\"><span style=\"vertical-align: inherit\">How to create rich AI outputs<\/span><\/li>\n<li data-sourcepos=\"37:1-38:0\"><span style=\"vertical-align: inherit\">How to deliver good UX with independent loaders<\/span><\/li>\n<\/ul>\n<h3 dir=\"ltr\" style=\"text-align: left\" data-sourcepos=\"39:1-39:32\"><span style=\"vertical-align: inherit\">Who is this course suitable for?<\/span><\/h3>\n<ul dir=\"ltr\" style=\"text-align: left\" data-sourcepos=\"41:1-44:0\">\n<li data-sourcepos=\"41:1-41:95\"><span style=\"vertical-align: inherit\">JavaScript developers who want to harness the power of AI in their web applications.<\/span><\/li>\n<li data-sourcepos=\"42:1-42:68\"><span style=\"vertical-align: inherit\">React developers interested in integrating AI APIs.<\/span><\/li>\n<li data-sourcepos=\"43:1-44:0\"><span style=\"vertical-align: inherit\">Anyone who wants to learn how to work with the OpenAI API and build intelligent applications.<\/span><\/li>\n<\/ul>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Course details: Build a JavaScript AI App with React and the OpenAI API<\/span><\/h3>\n<ul dir=\"ltr\" style=\"text-align: left\">\n<li><span style=\"vertical-align: inherit\">Publisher: <\/span><a href=\"https:\/\/href.li\/?https:\/\/www.linkedin.com\/learning\/build-a-javascript-ai-app-with-react-and-the-openai-api\" target=\"_blank\" rel=\"noopener\"><span style=\"vertical-align: inherit\">LinkedIn<\/span><\/a><\/li>\n<li><span style=\"vertical-align: inherit\">Instructor: <\/span><a href=\"https:\/\/downloadlynet.ir\/tag\/morten-rand-hendriksen\/\"><span style=\"vertical-align: inherit\">Morten Rand-Hendriksen<\/span><\/a><\/li>\n<li><span style=\"vertical-align: inherit\">Training level: Advanced<\/span><\/li>\n<li><span style=\"vertical-align: inherit\">Training duration: 1 hour and 59 minutes<\/span><\/li>\n<\/ul>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Course headings<\/span><\/h3>\n<p dir=\"ltr\" style=\"text-align: left\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-984246 size-full\" src=\"https:\/\/downloadly.ir\/wp-content\/uploads\/2025\/05\/Build-a-JavaScript-AI-App-with-React-and-the-OpenAI-API.png\" alt=\"Build a JavaScript AI App with React and the OpenAI API\" width=\"434\" height=\"589\"><\/p>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Images from the Build a JavaScript AI App with React and the OpenAI API course<\/span><\/h3>\n<p dir=\"ltr\" style=\"text-align: left\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-984245 size-full\" src=\"https:\/\/downloadly.ir\/wp-content\/uploads\/2025\/05\/Build-a-JavaScript-AI-App-with-React-and-the-OpenAI-API-1.png\" alt=\"Build a JavaScript AI App with React and the OpenAI API\" width=\"999\" height=\"190\"><\/p>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Sample course video<\/span><\/h3>\n<div style=\"width: 640px;\" class=\"wp-video\"><span class=\"mejs-offscreen\">Video Player<\/span><\/p>\n<div id=\"mep_0\" class=\"mejs-container mejs-container-keyboard-inactive wp-video-shortcode mejs-video\" tabindex=\"0\" role=\"application\" aria-label=\"Video Player\" style=\"width: 640px; height: 360px; min-width: 217px;\">\n<div class=\"mejs-inner\">\n<div class=\"mejs-mediaelement\"><mediaelementwrapper id=\"video-164984-1\"><video class=\"wp-video-shortcode\" id=\"video-164984-1_html5\" width=\"640\" height=\"360\" preload=\"metadata\" src=\"https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Build_a_JavaScript_AI_App_with_React_and_the_OpenAI_API_Downloadly.ir.mp4?_=1\" style=\"width: 640px; height: 360px;\"><source type=\"video\/mp4\" src=\"https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Build_a_JavaScript_AI_App_with_React_and_the_OpenAI_API_Downloadly.ir.mp4?_=1\"><a href=\"https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Build_a_JavaScript_AI_App_with_React_and_the_OpenAI_API_Downloadly.ir.mp4?nocache=1786137793105\">https:\/\/dl.downloadly.ir\/Files\/Elearning\/Sample\/Build_a_JavaScript_AI_App_with_React_and_the_OpenAI_API_Downloadly.ir.mp4<\/a><\/video><\/mediaelementwrapper><\/div>\n<div class=\"mejs-layers\">\n<div class=\"mejs-poster mejs-layer\" style=\"display: none; width: 100%; height: 100%;\"><\/div>\n<div class=\"mejs-overlay mejs-layer\" style=\"display: none; width: 100%; height: 100%;\">\n<div class=\"mejs-overlay-loading\"><span class=\"mejs-overlay-loading-bg-img\"><\/span><\/div>\n<\/div>\n<div class=\"mejs-overlay mejs-layer\" style=\"display: none; width: 100%; height: 100%;\">\n<div class=\"mejs-overlay-error\"><\/div>\n<\/div>\n<div class=\"mejs-overlay mejs-layer mejs-overlay-play\" style=\"width: 100%; height: 100%;\">\n<div class=\"mejs-overlay-button\" role=\"button\" tabindex=\"0\" aria-label=\"Play\" aria-pressed=\"false\"><\/div>\n<\/div>\n<\/div>\n<div class=\"mejs-controls\">\n<div class=\"mejs-button mejs-playpause-button mejs-play\"><button type=\"button\" aria-controls=\"mep_0\" title=\"Play\" aria-label=\"Play\" tabindex=\"0\"><\/button><\/div>\n<div class=\"mejs-time mejs-currenttime-container\" role=\"timer\" aria-live=\"off\"><span class=\"mejs-currenttime\">00:00<\/span><\/div>\n<div class=\"mejs-time-rail\"><span class=\"mejs-time-total mejs-time-slider\" role=\"slider\" tabindex=\"0\" aria-label=\"Time Slider\" aria-valuemin=\"0\" aria-valuemax=\"0\" aria-valuenow=\"0\" aria-valuetext=\"00:00\"><span class=\"mejs-time-buffering\" style=\"display: none;\"><\/span><span class=\"mejs-time-loaded\"><\/span><span class=\"mejs-time-current\"><\/span><span class=\"mejs-time-hovered no-hover\"><\/span><span class=\"mejs-time-handle\"><span class=\"mejs-time-handle-content\"><\/span><\/span><span class=\"mejs-time-float\"><span class=\"mejs-time-float-current\">00:00<\/span><span class=\"mejs-time-float-corner\"><\/span><\/span><\/span><\/div>\n<div class=\"mejs-time mejs-duration-container\"><span class=\"mejs-duration\">00:00<\/span><\/div>\n<div class=\"mejs-button mejs-volume-button mejs-mute\"><button type=\"button\" aria-controls=\"mep_0\" title=\"Mute\" aria-label=\"Mute\" tabindex=\"0\"><\/button><a href=\"javascript:void(0);\" class=\"mejs-volume-slider\" aria-label=\"Volume Slider\" aria-valuemin=\"0\" aria-valuemax=\"100\" role=\"slider\" aria-orientation=\"vertical\"><span class=\"mejs-offscreen\">Use Up\/Down Arrow keys to increase or decrease volume.<\/span><\/p>\n<div class=\"mejs-volume-total\">\n<div class=\"mejs-volume-current\" style=\"bottom: 0px; height: 100%;\"><\/div>\n<div class=\"mejs-volume-handle\" style=\"bottom: 100%; margin-bottom: -3px;\"><\/div>\n<\/div>\n<p><\/a><\/div>\n<div class=\"mejs-button mejs-fullscreen-button\"><button type=\"button\" aria-controls=\"mep_0\" title=\"Fullscreen\" aria-label=\"Fullscreen\" tabindex=\"0\"><\/button><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div dir=\"ltr\" style=\"text-align: left\">\n<h3><span style=\"vertical-align: inherit\">Installation Guide<\/span><\/h3>\n<p><span style=\"vertical-align: inherit\">After Extract, view with your favorite player.<\/span><\/p>\n<p><span style=\"vertical-align: inherit\">Subtitles: English<\/span><\/p>\n<p><span style=\"vertical-align: inherit\">Quality: 720p<\/span><\/p>\n<\/div>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">Download link<\/span><\/h3>\n<p dir=\"ltr\" style=\"text-align: left\"><a href=\"https:\/\/dl3.downloadly.ir\/Files\/Elearning\/LinkedIn_Build_a_JavaScript_AI_App_with_React_and_the_OpenAI_API_2023-9_Downloadly.ir.rar?nocache=1786137791\"><span style=\"vertical-align: inherit\">Download file \u2013 301 MB<\/span><\/a><\/p>\n<p dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">File(s) password: www.downloadly.ir<\/span><\/p>\n<h3 dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">File size<\/span><\/h3>\n<p dir=\"ltr\" style=\"text-align: left\"><span style=\"vertical-align: inherit\">301 MB<\/span><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Description Build a JavaScript AI App with React and the OpenAI API. This course shows you how to build an interactive weather app using React and the OpenAI AP<\/p>\n","protected":false},"author":1,"template":"","dgi_category":[10458],"dgi_tag":[87558,87559,87560,87561,87562,29615],"class_list":["post-10339","digital_item","type-digital_item","status-publish","has-post-thumbnail","hentry","dgi_category-video-tutorials","dgi_tag-course-build-a-javascript-ai-app-with-react-and-the-openai-api","dgi_tag-download-build-a-javascript-ai-app-with-react-and-the-openai-api","dgi_tag-download-course-build-a-javascript-ai-app-with-react-and-the-openai-api","dgi_tag-free-build-a-javascript-ai-app-with-react-and-the-openai-api","dgi_tag-free-download-build-a-javascript-ai-app-with-react-and-the-openai-api","dgi_tag-morten-rand-hendriksen"],"_links":{"self":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/digital_item\/10339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/digital_item"}],"about":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/types\/digital_item"}],"author":[{"embeddable":true,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/digital_item\/10339\/revisions"}],"wp:attachment":[{"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/media?parent=10339"}],"wp:term":[{"taxonomy":"dgi_category","embeddable":true,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/dgi_category?post=10339"},{"taxonomy":"dgi_tag","embeddable":true,"href":"https:\/\/nokobox.com\/index.php\/wp-json\/wp\/v2\/dgi_tag?post=10339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}