Let's learn about using LangChain in JavaScript by using OpenAI's API while building a chatbot application that interacts with the OpenAI API to generate responses to user prompts. In this tutorial we will be using Next.js (with React.js) for the frontend (UI) and backend (API). The finished project can be found on GitHub . For the project setup…
Organizing large React applications into folders and files is a topic that often sparks strong opinions. I found it challenging to write about this, as there isn't a definitive "correct" approach. However, I frequently get asked how I structure my React projects, from small to large, and I'm happy to share my approach. After implementing React…
After using the MacBook Pro 2015 for several years, I upgraded to a MacBook Pro 2021 a while ago. The years with my previous Mac were fantastic, and now, with the newer MacBook Pro, I continue to work efficiently on my freelance web development projects. My goal is to keep this MacOS setup for web development up-to-date for you. Here comes…
A React Router tutorial which teaches you how to use Search Params with React Router 7 . The code for this React Router v7 tutorial can be found over here . Search Params (also called Query Params ) are a powerful feature, because they enable you to capture state in a URL. By having state in a URL, you can share it with other people. For example…
A React Router tutorial which teaches you how to use Descendant Routes with React Router 7 . The code for this React Router v7 tutorial can be found over here . The previous tutorial of Nested Routes has shown you how to replace a part of a component depending on the URL with the help of the Outlet component. This way, in the last example, we…
A React Router tutorial which teaches you how to use Nested Routes with React Router 7 . The code for this React Router v7 tutorial can be found over here . Nested Routes are a powerful feature. While most people think React Router only routes a user from page to page, it also allows one to exchange specific fragments of the view based on the…
A React Router tutorial which teaches you how to use Lazy Loading with React Router 7 . The code for this React Router v7 tutorial can be found over here . Lazy Loading on route level with React Router is a powerful feature. Usually a client-side rendered React applications comes as one bundle from a web server. However, when enabling lazy…
A React Router tutorial which teaches you how to use Authentication in React Router 7 . The code for this React Router v7 tutorial can be found over here . We will start off with a minimal React project that uses React Router to navigate a user from one page to another page. In the following function component , we have matching Link and Route…
A quick React Router 7 example which should get you up and running. The code for this React Router v7 tutorial can be found over here . The example features the matching between Routes and Links, a so-called Layout Route for encapsulating components within the same layout (see Layout component), a so-called Index Route loaded with the Home…
A React Router tutorial which teaches you how to perform a Redirect in React Router 7 . The code for this React Router v7 tutorial can be found over here . We will start off with a minimal React project that uses React Router to navigate a user from one page to another page: In this function component we have matching Link and Route components…
