Forem: Kelvin Sowah

How to Use Axios for HTTP Requests

Kelvin Sowah — Thu, 12 Jan 2023 00:10:37 +0000

Hello readers, and welcome to another blog post where I attempt to explain a technical concept used in the software development world. I make an effort to accomplish this by giving clear examples and demystifying a few ideas. This blog will primarily discuss Axios, my go-to HTTP request tool.

What is Axios?
Simply put, Axios is a well-known JavaScript library that enables HTTP requests to GraphQL or RESTful APIs. Axios performs the same function as the fetch API. Promises are used in the background of Axios. Please click here to get more information about Promises.

Requirements For Using Axios
You must first have Node.js installed on your PC before using Axios. Please click on this link if you don't have Node.js installed . You can access the official Node.js website by clicking this link, which lists the instructions for installing Node.

Axios must then be added to your project. Simply enter the following command in your terminal to achieve this (always ensure you are in the right directory):

npm install axios

The following command will function for you if you're using yarn:

yarn add axios

Using Axios
I like using Axios over the fetch API mostly because it offers a very clear and accurate syntax. Here is a case study to help you understand my point.

making a get request with the fetch API below

making a get request with the Axios

In the above example, I'm using a GET request to get an object containing a name and age from the jsonkeeper api. With the help of the fetch api in the first image and Axios in the second, this can be accomplished. To utilize Axios, we first call the axios function, and then we call any of the Axios library's functions that correspond to the various HTTP verbs. In the example above, we are obviously sending a GET request using the get() method. The code on line 3 in the second image will yield a Promise because Axios uses Promises.

You immediately observed that the second image has one less then() method than the first. This is because, in contrast to the fetch api, Axios gives the data you want. The Axios library has a drawback in that it delivers an object that contains a key of data that corresponds to the data you were expecting. To obtain the object of name and age, we called res.data on line 4 of the second image.

You might be asking why the quantity of code doesn't differ significantly. That is accurate for GET requests, but you can start to appreciate the advantages of using Axios in the example that makes a POST request in the next section.

The difference in code density is very noticeable, and the code is also more accurate. Axios post() method requires a second argument during a POST request, and it must be an object. In this instance, we are passing an object, the constant student.

The remainder, stringifying our object and creating the headers, is then handled by Axios. These actions must be carried out manually when using the fetch api.

Hopefully this blog post have helped you better grasp how to use Axios to fetch data and persuaded you that it is a better option to the fetch api. Thank you for reading, and please give Axios a shot.

Thank You for reading. If you find this blog to be helpful, please like, share, and leave your thoughts in the comment section as well.
You can also follow me on Twitter for more.

Useful High Order Functions in JavaScript

Kelvin Sowah — Fri, 23 Dec 2022 23:56:23 +0000

In JavaScript, high order functions are those that possess one or both of the following characteristics:

accepts as an argument another function.
Returns another function

Thankfully, JavaScript has a lot of high order functions built right into the language. The most practical and widely utilized high order functions will be discussed next.

forEach()
Iterating over an array of elements and running a function on each one is what this built-in method of the language does. ForEach() will get this function as an argument.

In the given example, an array of names was created and saved to the constant names. The fact that this function only operates on arrays is crucial. Then, we used the array's forEach() method, passing a callback function as a parameter. Every entry in the array must be taken and logged to the console by the callback function. The last four lines of code display that.

Another example is shown below, however this time numbers are used, and each number is added by 5.

map()
This method iterates across an array of various elements and accepts a function as an argument, much like forEach(). Then, each element of the array will receive an application of the function. The sole distinction between forEach() and map() is that map() builds a fresh array. Although it might not appear important, the map() method is widely used in React, a JavaScript library for generating user interfaces.

Once again, we created a new array of numbers. We made a new variable to hold the new array that map() returns because it returns a new array. The two variables were then recorded.The new array produced by the map() method is displayed in the console.

find()
The name of this function, however, does a great job of describing what it does. It basically identifies the first member in an array that satisfies the condition stated in the function (also known as a callback function), which it will take as an argument, in case you couldn't guess what it does. That element will be returned by the find() method.

The same variable is used in the code above, but this time we iterate through the array using the find() method. We included a condition in the callback function's code block. In other words, if the number is less than 20, send it back to me. The condition is to return the first integer for which the condition evaluates to true.

If you need to find a specific item in an array, this function may be useful.

filter()
The filter() method is the next one on the list, and its role is to return a new array containing all the elements that satisfy the function's argument-passing condition. The find() method and this one share some commonalities.

Once again, using the same array of numbers, we applied the filter() function to it, which will yield a new array with the elements for which the test was successful. The result is a completely new array that only contains the elements that met our criterion after we have logged our new constant filteredNumbers.
Bonus: React also frequently employs this strategy.

reduce()
Although it is not as frequently used as the earlier functions, I believe this one has its uses. If the elements are all of the type number, you can use it to add them all together. An example would probably be more effective than my explanation.

We start out by declaring a variable that holds an array as usual. After that, we use the array's reduce() method and pass a callback function to it. Reduce() requires at least two arguments in the callback function, as opposed to the previous methods, which require at least one. The add, the first argument, serves as a container for the collected value of each iteration. The add begins out with a value of zero if nothing is specified.

Each unique integer in the array is represented by the callback function's second argument (number). Each element is added to the accumulator within the code block. Let me walk you through how the reduce() function works.

The add has a value of 25 on the initial iteration (0 + 25).

The add's starting value is 0.
The array's first element, represented by 25, is added to the add, which now contains the value of 25.

The accumulator has a value of 45 (25 + 20) after the second iteration.

The add's current value, which comes from the first iteration, is 25.
The array's second element is 20.
The add is currently 45.

Up until there are no more elements in the array to iterate, this operation is repeated. Then reduce() returns the add's most recent value.

If you're interested in learning more about other high order functions that JavaScript includes by default, visit here.

Thank You for reading. If you find this blog to be helpful, please like, share, and leave your thoughts in the comment section as well.
You can also follow me on Twitter for more.

Useful VS Code Extensions

Kelvin Sowah — Wed, 21 Dec 2022 20:46:23 +0000

Any software engineer, developer, or programmer's code editor is one of their most essential tools. Numerous code editors are available, including Sublime Text, Atom, Notepad++, and Visual Studio Code. The fact that the majority of code editors, including the one listed above, are free and supported by major corporations like Microsoft and others is one of their many excellent advantages. This indicates that the code editors will be properly updated and maintained.

In this blog, we'll concentrate on Visual Studio Code (VS Code), which is both one of the most popular code editors and a personal favorite of mine, per a recent survey conducted by the StackOverflow team. Code editors in general, but particularly VS Code, can increase programmers' productivity and relieve a ton of stress and aggravation. Please click here to go to VS Code's official website if you're interested in utilizing it. You can choose to download a version that is compatible with the operating system of your computer, if that choice is available.

Let's now discuss a few features and extensions that you can add to VS Code to increase your productivity.

Emmet
VS Code has a ton of cool features right out of the box. Emmet is one of those characteristics. While Emmet is a plugin that can be used with various code editors, VS Code already has it installed, so there is no need to manually install it. Emmet offers abbreviations that translate into whole HTML code. HTML is typically written using repeated syntax. See the excellent use case for emmet below.

div>(header>ul>li*2>a)+footer>p

The code shown above expands to:

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

As you can see, emmet can help you avoid doing repetitive tasks. Please click here to find out more about emmet acronyms.

You must select the extensions tab (red arrow) in the activity bar in order to add extensions to Visual Studio Code. The illustration below may be of use.

If the activity bar is not visible, please check that Show Activity Bar is selected under View → Appearance. You can enter the name of the extension you wish to add or install in the search box (green arrow) that appears when you access the extensions tab. You can use each extension's functionality according to the instructions provided with it.

Bracket Pair Colorizer
The brackets and parenthesis in your code now have colors thanks to this plugin. This can make it much easier to determine which brackets are pairs when you have brackets and parentheses nested inside of other brackets and parentheses. Here is a fantastic illustration of how this extension functions.

Code Spell Checker
This plugin functions as a spell checker for your code editor, as the name would imply. The fact that this extension works well with camelCase code is one of its best qualities. Additionally, you may make the spell checker compatible with various file types (Python, Javascript, Java, Go and many others).

By preventing bugs from entering your code, this extension can spare you untold hours of frustration.

ES7 React/Redux/GraphQL/React-Native snippets
Given that it offers incredible shortcuts for developing class or functional components, this plugin is ideal for React and React Native developers. This plugin can be compared to emmet, but for the React environment. An extensive list of the shortcuts offered is provided on the official website for this extension.

As I said, this plugin can save you a ton of time by producing components really quickly.

Live Server
This plugin is one of the most practical and helpful ones I've ever used, in my view. This extension builds a local development server with live page reload functionality for both static and dynamic pages. When you are mostly working with HTML and CSS files, this is really helpful (no framework involved). Once your files are saved, it reflects whatever modifications you've made to them. This kind of capability is often present when using a framework.

If the extension is already installed, all you need to do to use it is right-click the file you want to open and select Open with Live Server.

Prettier — Code formatter
This extension's goal is to assist you in formatting your code to improve readability. Every time you save a file, this extension is activated, and it almost supports all file types.

JavaScript (ES6) code snippets
Excellent Javascript code snippets are offered by this extension. Similar to earlier extensions, this one aims to reduce repetitions by offering shortcuts to some of the most popular Javascript code. The extension is compatible with Typescript, HTML, JSX, and Vue files.

As a developer, I have utilized a few of these extensions. Please feel free to investigate and test out additional extensions since there are many more that are very useful but were not discussed in this blog.

Thank you for reading; I hope my blog is useful to you in your efforts to become a more effective developer.

How To Use LocalStorage

Kelvin Sowah — Tue, 20 Dec 2022 20:25:49 +0000

Welcome again, reader, to another entry in my blog where I attempt to demystify and explain a technical topic. I'm going to concentrate on localStorage this time.

What is LocalStorage?
In the simplest terms, localStorage is a feature of the browser that enables us to save data inside the browser. With one very significant exception, it functions quite similarly to sessionStorage. Even when you exit the browser window, data stored in localStorage will continue to exist in the browser. The information kept in sessionStorage, on the other hand, will be erased when the user closes the browser window.

What kind of data can be kept in localStorage?
Key-value pairs are used to store data in localStorage. I want to make one very crucial point: localStorage can only be used to store strings. An object from an array will be automatically transformed into a string if you attempt to store it. Use the JSON.parse() method if you want to change the string back to its original data type.

How do we communicate with localStorage?
We can interact with localStorage using a number of inbuilt ways. The capabilities of each of these techniques are listed in detail below.

localStorage.setItem()

Two arguments are expected by this method. Both the first and the second are pieces of information you want to store. Since localStorage may only hold strings, both arguments must be strings. I've provided an example below to assist you understand my perspective.

localStorage.setItem("name", "Kelvin Sowah")

The name key and its value are essentially stored in localStorage by the code above.

localStorage.getItem()

This method's objective is to fetch data from localStorage. The key of the value you wish to obtain from localStorage is the only input this function expects.

localStorage.getItem("name")

The value corresponding to the key of name will be returned by the code example above. It will return "Kelvin Sowah" in our case.

localStorage.removeItem()

The method's name implies that you can use it to delete a single set of key-value pairs from localStorage. One parameter, which might be any of the keys in localStorage, is required by the method.

localStorage.removeItem("name")

Now, there shouldn't be any data with the key name in our localStorage.

localStorage.clear()

In contrast to the previous method, this one completely clears the localStorage.

I appreciate you reading my brief but enlightening blog. Hopefully, you now have a clearer idea of what localStorage is and know how to use it.

How To Use Async/Await

Kelvin Sowah — Mon, 19 Dec 2022 21:59:05 +0000

Welcome again readers to another blog post where I attempt to demystify and explain a technical topic. What async/await is and how to utilize it will be the main topics of this blog.

I believe it would be wise to take a step back and briefly explore how JavaScript operates before I explain what async/await is. As you may be aware, JavaScript executes your code synchronously, which means that it can only execute one line of code at a time and must wait for that line of code to finish before executing the next. This might cause some issues.

Synchronous JavaScript code has the potential to stall execution once it has begun doing something when it is run. To put it another way, long-running JavaScript functions can cause the user interface (UI) or server to become unusable until the function returns. This obviously has the potential to ruin the user experience.

For instance, if your code runs synchronously and your web page or application requests a list of posts from a server, it may cease working until you can retrieve the articles. Depending on your connection, this may take some time, during which time your user is unable to engage with your application.

Due to the utilization of Web APIs, we are able to run asynchronous JavaScript code to address this problem. The fetch api is one of the most used Web APIs for asynchronous programs. By returning a Promise, the fetch api enables you to execute asynchronous function. A Promise, put simply, is an object that signifies the success or failure of an asynchronous operation.

Here is a code sample that uses the fetch api:

A request is sent to the jsonkeeper api in the code above. an array of an object containing my name and age will be returned. In line 2 of the code, an HTTP request is made using the fetch api, which will eventually return a promise. Following the code in the first then() function (line 3) if the promise is successful, we will go on to the second then() method (line 4). Any time a promise is rejected or unsuccessful, our code will immediately move to the catch() method (line 7), where it will log the error to the console in this example. Although using the catch() method is not required, I strongly advise it because it enables you to give feedback to your user on the occurrence of an error.

I should eventually explain what async/await is after going down that rabbit hole—trust me, it goes much deeper. In essence, the new JavaScript feature Async/Await allows you to create asynchronous code in a synchronous manner. The code example I presented before, refactored to use async/await, is shown below.

Now let's go through the code:

In order to use async/await, you must first inform the JavaScript engine that this function will run some asynchronous code. The async keyword is added before our function to achieve this (line 1).

You must include a try/catch block in the async function code block if you intend to handle errors if the promise is rejected or unsuccessful (this is a must!). If the promises are fulfilled, the code in the try block will be executed; otherwise, we will leave the try block, enter the catch block, and run any relevant code there.

The try block currently contains the most crucial code. There are various constants in there. The promise provided by our HTTP request is contained in the first constant response (line 3), but in order for this to function, we must first add the await keyword before our retrieve function. When you want a promise in return, you need to include the await keyword. Using the data constant, we carry out the identical procedure once more (line 4). Our data constant, which in this case is an array of one object, includes the information we require at this point in the code execution.

We can use our data however we'd like now that it's been saved in a constant.

If you compare the two samples of code, you'll see that the async/await code is longer, especially when the try/catch statement is taken into account. However, utilizing async/await enables you to view the code in synchronous mode, which makes it easier for you to keep track of what is occurring in your code and what data is available at any given moment. Although the function I used as an example is extremely simple to comprehend, asynchronous code can become much more complicated than what I shown, and at that point, we can truly appreciate how powerful async/await is.

I appreciate you taking the time to read this post, and I hope it has given you a better knowledge of async/await and how to use it.

Initialize A React Native And Expo CLI Project

Kelvin Sowah — Sat, 17 Dec 2022 19:54:48 +0000

Welcome back, readers, to another blog where I attempt to clarify a technical issue or aid you in your effort to improve as a developer. This post will be focused on using the Expo CLI to launch a React Native project.

What is React Native?
The very popular JavaScript library React, can be used with the React Native JavaScript framework to build native applications. The ability to use JavaScript to develop applications for both iOS and Android is one of the many advantages of React Native. To build an iOS application, you don't need to know Objective-C or Swift, and to make an Android app, you don't need to know Java.

Due to its ability to create a single application that runs on two separate OS platforms, React Native helps speed up development significantly. Additionally, because it makes use of React, you may employ components and benefit from their reusable nature. I strongly advise reading the documentation for React Native, which is excellent in my opinion and offers nice and understandable examples.

Getting Started
Step #1

Make sure the recent version of Node.js is installed on your machine. Run the following command in your terminal to determine what version you are using:

node -v

Click here for information on installing or updating to the most recent version if you don't already have Node.js installed.

Step #2

Once you have Node.js installed run the following command:

npm install -g expo-cli

Your PC will then have the Expo CLI installed globally. If you're using Mac OS, you might need to add sudo after the aforementioned command. Then, in order to access your computer, you must enter the password;
with Windows, this is not essential.

Step #3

By executing the following command after the Expo CLI has been installed successfully, you can launch a brand-new project:

expo init <name of project goes here>

After the project is created, you must start the development server and change directories to the newly created folder. You can do this by executing the following commands:

cd <name of project goes here>
npm start

A new window in your browser will open after you perform these instructions and provide details about your project.

Here is an illustration of how this will function:

expo init quiz-app
cd quiz-app
npm start

You now have a brand-new React Native project, but how can you preview it. I'll address this concern in the part that comes next.

Preview Your Project
You must install the Expo Client App on your smartphone in order to preview your newly created project. You may either do this on the App Store or the Google Play Store, depending on the phone you have.

After installing the Expo Client App, scan the QR Code that appeared when you typed npm start into the terminal. You will first need to wait a few minutes when your project first bundles and loads. A brief notice will appear in the middle of the screen after the page has finished loading. That is essentially how your application is running right now.

In the event that you only own an iPhone or an Android smartphone, you can use simulators to easily operate on both platforms. You must first download Android Studio and Xcode in order to use the simulators.

Due to Apple's restrictions, you will not be able to download Xcode if your operating system is Windows.

Please click here for thorough instructions on setting up the Android simulator.

Please click here for instructions on how to launch the iPhone simulator.

That will sum it all up, thanks for reading, and I wish you well as you work to master React Native and Expo to become a top mobile app developer.

Adding Routes to an Express Server PT(1)

Kelvin Sowah — Tue, 04 Oct 2022 09:51:04 +0000

Welcome back readers to another one of my boring but hopefully informative blogs. This time, we'll discuss adding routes to your Express.js server so that it can accommodate various client requests. If you're interested in reading my earlier article, where I showed how to build a Node.js server using the lightweight Express.js Node.js framework, please click here.

What we learnt in the earlier blog will serve as the basis for today's blog. An illustration of what we produced for the blog described above is shown below.

As you can see, we were able to develop a basic Express.js server with just four lines of code. I go into detail about what each line of code is doing and how we got here in my last blog. But enough with the past; let's go to work on expanding our server's routes.

Before continuing, I'm going to assume that you, the reader, have a basic understanding of HTTP request methods (or verbs). If not, click here and you'll be redirected to some excellent documentation that can provide you a foundational understanding of HTTP request methods.

Here is a picture of our `index.js file along with some more code.

By adding one of the HTTP methods, in this example the GET method, to our app constant, an instance of the express class (line 3), between lines 7 and 9, we created a route. Additionally, our GET method expects two arguments: the route and a callback function, which holds the code to be run when the route is reached by our client.

Additionally, the callback function anticipates two arguments: the request and the response. The request is an object that often includes data that the client sends. The response is also an object that holds information and methods that helps the server return that information to the client.

In this instance, on line 8, two methods are being chained to the response object. The first method status essentially informs the client if the request made to this route was successful or unsuccessful; in this case, we were providing a status code of 200 signifying that it was successful (click here to learn more about status codes). The client might be able to present an alternative UI to the user depending on the status code received, which improves the user experience, even though the status function is not necessary.

The format of the data we are delivering back to our client is specified using the second method in our chain, which is json. In this instance, we are enclosing a message in a JSON object.

finally finished building the first Express server route. How best can we test it? Instead of creating a UI to test, we can use a tool like Postman. With Postman, you can test your server without having to make a client. If you are using VScode as your text editor, then you can use an extension in VScode called Thunder Client. Go to the extensions tab in VScode, search Thunder Client and install. We can easily test our routes with it and having the same development and test environment will save a lot of time. In this blog we will be using the Thunder Client

Below I have an image of the Thunder Client UI.

Enter http://localhost:8000, which is the address where our server is currently active. The input field denoted by the yellow arrow must contain the url.

I have indicated where you can select the HTTP method you want to use with a purple arrow. GET is the default, therefore that will serve our purposes.

To send a request to our server, click the blue arrow-pointing send button.

The data we are getting from our server is indicated by the green arrow. If you recall, we indicated in line 8 of our index.js code that we needed a JSON-format response and an object to be returned with the message "Hello World!" We did indeed receive that information back.

After testing our server, we can say that both it and the first route we built are working properly. I'll demonstrate how to build routes that use the POST and DELETE HTTP methods in a later article.

I appreciate you reading, and I hope this article helped you understand how to add routes to your Express server.

Useful Array Methods In Javascript

Kelvin Sowah — Sun, 21 Aug 2022 00:12:00 +0000

The most popular programming language in use today is Javascript. The most recent Stack Overflow developer survey is shown in the image below.

Initially, Javascript was mostly used to build straightforward dynamic webpages, but in the past decade or so, Javascript has seen significant development. It has developed into a programming language that can also be used to build mobile applications (React Native) and the backend of other applications (using Node.js).

Multiple data types make up Javascript as a programming language. The majority are regarded as primitives. A primitive is a data type or value that is neither an object nor has any methods. There are six primitive data types: symbol, null, boolean, number, and string as per the new ECMAScript 2015.

This blog post will concentrate on the Array object and some of the most widely used Javascript built-in methods.

In case you forgot, arrays are just lists of things. The list may include a variety of data kinds. The index of each item in the list can be used to refer to it. Javascript arrays are zero-based indexed, which means that the array's first element has an index of zero. Here are a few instances of arrays and how we can access any individual element within them.

shift()
The first element in an array can be eliminated using this array method. Returns the value of the element being removed at the same time.

You can see that we created an array and saved it in the array variable on the first line. The shift() method was then used on it. As a result, it returned and deleted the array's first entry. The array's appearance after invoking the shift() method is shown in the last line. Don't worry about the undefined in the code.

unshift()
This method allows you to easily add one or more elements to the start of an array and returns the new length of the array.

Once more, a new array is created and stored to the variable called arr. Then, we applied the unshift() method, passing two arguments that represented the elements we wished to insert at the array's beginning. The length of the array comprising the recently added members is then returned by the method. The array's appearance following use of the unshift() method is displayed in the final line of code.

push()
The only difference between this method and unshift() is that it appends one or more elements to the end of the array. After adding the new element, it also returns the array's length.

As you can see, the push() method extended the array by two elements and returned the updated array length.

pop()
The pop() method removes and returns the last element from an array. The array's length is then updated by this method.

You can probably tell by now that the pop() method and the shift() method are very similar. The only distinction is, the last element is removed by pop().

slice()
Slice() creates a shallow copy of a section of an array into a new array object that is picked at random from start to finish (end not included). The initial array won't be changed. The slice() method requires at least one argument, which is the index at which the slice should start.

The method will create a copy of the array starting at the specified index and continuing to the end of the array if only one argument is supplied to it. The slice() method will return a copy of the array if a second argument is given, starting at the index indicated with the first argument and ending at the index specified with the second argument (not including the element with this index).

Let's go through the above code step by step. Similar to before, a variable was set to an array. The slice() method is then called with just one argument. As you can see, the array copy created by the slice() method spans from index 2 all the way to the end of the array. The original array was returned when I verified the value of the arrTwo variable in the following line of code. This indicates that the original array is unaffected by the slice() method.

In the last line I added two arguments and it returned a copy of the elements within those indexes, but not including the element that has the index that is equal to the second argument passed to the method.

includes()
This method may check whether an array has a specific value, which makes it incredibly useful. If the value is in the array, it will return true, otherwise, if the value is not in the array, it will return false.

As you can see from the example above, if we call the includes() method on an array and feed it an argument, the method will determine whether the array has a value that is equal to the input. I want to draw your attention to the includes() method's case sensitivity. In the last line of code, where it returned false, you can see an illustration of this. Although "david" is present in our array, it still returns false. The cause is that we gave the method "David" as an argument.

There are other additional methods that may be applied to arrays and are included into Javascript. I'll cover methods for iterating over an array in a future blog post.

I appreciate your reading and hope that this article has helped you better comprehend these methods.

Introduction to React Hooks 🪝

Kelvin Sowah — Mon, 15 Aug 2022 22:56:18 +0000

Welcome back, readers, to another blog where I attempt to demystify and clarify a specific web development topic. This blog post will concentrate on defining React Hooks and demonstrating how to use them in your React application.

React is a JavaScript library that makes it simple to construct rich user interfaces and single page applications. You develop your user interface using components that you generate in React. State and props are two of the most essential React component features. A React component's state is an object that controls how the component renders and functions. Only class-based components could hold state prior to the invention of hooks. On the other hand, using props enables us to communicate with our components. The official website is definitely a good place to start if you want to learn more about React.

With the introduction of hooks in version 16.8 of the React library, you may now use state and other React capabilities without the need for classes. In other words, a functional component allows for the addition and modification of state. You can utilize a number of React hooks, but for the sake of this article, I'll concentrate on useState which is one of the most crucial and widely used hooks.

useState Hook
The useState hook enables us to use and control state inside a functional component. The useState hook is used in the basic functional component shown below as an example.

This component is made up of an input tag and a h1 tag. The information you type in the input tag is shown in the h1 tag as you type.

The useState hook from the React library is imported in line one of the code above. However, line 5 of the code is the most crucial one. We start using our imported useState hook here. In essence, the useState hook is a function that takes an initial state. I passed an empty string in our example. A pair of values are returned in an array by the useState hook.

The array's first value is the state as it is at the moment, and its second value is a function that lets you modify or update the state. The two values are extracted from the array and stored in separate constants using array destructuring in the code above.

In contrast to object destructuring, array destructuring allows you to use any name for your constants, but order is crucial. When naming your function, start with set, you'll often use the format shown below, followed by the name of the constant you used to store the current state. as in "setName," "setAge," "setColor," etc.

We make use of the setName method in the onChange event on line 10. The setName function receives the value of the input tag, which updates the state in this case, the name constant.

I would like to draw your attention to the fact that the useState hook can be used many times within one functional component. See image below 👇

Thank you for reading, and I hope this article gave you some insight into React hooks that you can utilize in the future.

Set up an Express Server in Three (3) Easy Steps 🔥

Kelvin Sowah — Fri, 12 Aug 2022 00:40:49 +0000

With my never ending quest to be a well versed Full Stack developer, I buried myself into the world of Node JS. Well if you happened to be a Node JS newbie, Node JS is an open source server environment that uses JavaScript on the server. A common task for a web server can be to open a file on the server (backend) and return the content to the client (frontend). There are other server side languages like Python, Ruby, Java, PHP etc.

I decided to learn Node JS because first of all, its written in JavaScript, which means I can have both my frontend and backend written in one language, JavaScript. More importantly, JavaScript has a massive and growing community, this is extremely useful because it provides a great support system that you can lean on when you run into issues.

This brings me to Express JS which is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Too much talk, lets start coding 👨‍💻.

Before we start, make sure you have Node JS installed. To check, open your terminal or cmd and run the command node --version to check the version of node. If you don't have node installed click here to install.

STEP 1 - Set up Environment:
Now lets setup the environment for our server. First of all, create a folder called my-server. You can do this in the terminal with the command mkdir my-server. Enter into the folder with the command cd my-server. You can use any text editor of your choice but I'll be using Visual Studio Code. You can click here to download it.

We now open our folder in our editor and run npm init in the terminal. we're going to have to answer a series of questions most of which are not important. To skip this step, run npm init -y instead.
After running the command, a package.json file will be created. Below is an image of the file.

The package.json will hold some basic information about your application. It also manages all the dependencies of your application.

STEP 2 - Install Necessary Dependencies
Now let's start to install some dependencies. First of all, we will install Express JS. We can do this by running the command npm i express in the terminal. Make sure you're in the my-server directory on the terminal. After the installation is done, you will see a folder called node_modules, do not edit this folder. It contains all the dependencies of Express JS and the dependencies of those dependencies.

Another package we would want to install is nodemon. This package will watch for any change in our code and automatically restart the server without us having to manually do it all the time. This is hence going to be used in development which means we wouldn't want to have it in production therefore we can install it as a dev dependency by running npm i -D nodemon.

Our package.json file should look like this

Now let me explain the new changes in our package.json file. On line 7 I added a start script which will use nodemon to watch for changes in our index.js file ( we will be creating this file soon ). This means that when I run npm start in the terminal, our nodemon package will be started. Lines 9 - 11 shows all the dependencies we have installed. In this case Express. Then lines 15 - 17 shows all the dev dependencies. In this case nodemon.

STEP 3 - Spin up Express Server
The next thing we want to do is to create an entry point to our application. To do this, create a new file called index.js. I will show you my index.js file and explain what the code is doing.

On line 1, I import express and store it in a constant.

On line 3, I initialize express and store it in another constant.

On line 5, we're saving the port to our server in a constant. The process.env.PORT will check your environmental variables if a port number has been defined, otherwise it will use port 8000.

On line 7, we are using the inbuilt listen method which expects at least one argument which is the port number. We can also pass a callback function as a second argument. In our case we are only logging to the console what port the server is running on.

At this point, if you run npm start in the terminal, you should see nodemon running and a message saying "Server is running on port 8000".

Hurray!! 🥳 you have a working express server. I'll be showing you how to set up routes to your server in later blogs.

Thank you for reading and hopefully I have wet your appetite to learn more and experiment with Node JS and Express JS.