Component-Based Development
Get started using a React framework.
In this tutorial, we will examine:
- What Next.js is and how it is different from just React.
- What server-side rendering is.
- How to Bootstrap a Next.js application.
- The basics of creating routes.
- Using React components.
The source code for this can be found on GitHub.
Assumptions
This tutorial does assume you are familiar with the basics of React such as functional components and the concept of a route. If you are not familiar with these, you may want to read:
And possibly also this:
Tools and Setup
You will need to have Node.js installed as well as a code editor. …
React Tips
React form state management without the useState() Hook.
In this tutorial, we will explore React form state management using React Final Form. React Final Form allows us to manage state without the need for the useEffect() hook.
What is React Final Form?
High performance subscription-based form state management for React
React Final Form is a React wrapper for Final Form, which is that uses the
Observer pattern for state management.
The observer pattern is a software design pattern in which an object, named the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.
Who uses React Final Form?
Among others,
Source Control
Get a local copy of your favorite JavaScript developer’s public code and run it on your local machine.
So you found the public GitHub account of your favorite JavaScript/React developer and want to run some of the examples in their repositories. Or a tutorial mentions “the complete solution can be found here.” Great. Now what?
Cloning is done through the command ‘git clone’ and it is a process of receiving all the code files to the local machine.
What We Will Do
For the this tutorial we will use one of my GitHub accounts with a few repositories, but you can use any GitHub account you desire. …
NPM Packages
Create an account in the NPM registry, write some code for your package and publish
Have you ever wondered where those npm packages you install come from Well, wonder no longer, they come from developers like you!
What We Will Do
In this tutorial, we will create and publish to the NPM registry, an NPM package using the following steps.
- Create an NPM registry account.
- Write some code that will become your NPM package.
- Test this locally.
- Add module.exports to export what will be made available in your package to those who install it.
- Publish your package to the NPM registry.
- Test your NPM package by using npm install.
Our focus will be on the process and not the…
Database Tips
Create, get(as list and rows), modify, add and remove data from an Array
PostgreSQL is an open source relational database that supports some amazing data types. In prior articles, we looked at performing CRUD-like operations on the jsonb data type as well as converting a jsonb array of objects in to a recordset for easy querying.
What We Will Do
In this article, I’d like to focus on another data type, the Array data type. Why? Because Arrays are great for storing, at a minimum, lists. Lists of text, numbers and more.
Array Type
PostgreSQL gives the opportunity to define a column of a table as a variable length single or multidimensional array. …
Database Tips
Using the OFFSET and FETCH clauses in Microsoft’s SQL Server.
A common need when working with large amounts of data is how to fetch the data and display it in a reasonable amount of time.
The solution to this problem is pagination. Pagination can be done on the front-end, back-end, or both.
Note: This article is specific to Microsoft’s SQL Server. For MySQL or PostgreSQL, see this article.
Pagination
Pagination, also known as paging, is the process of dividing a document into discrete pages, … Server-side pagination is appropriate for large data sets providing faster initial page load.
-Wikipedia
Database Tips
Using the LIMIT, OFFSET and FETCH NEXT operators.
A common need when working with large amounts of data is how to fetch the data and display it in a reasonable amount of time.
The solution to this problem is pagination. Pagination can be done on the front-end, back-end, or both.
Note: This technique works well in PostgreSQL and MySQL. For Microsoft SQL Server see this article.
Pagination
Pagination, also known as paging, is the process of dividing a document into discrete pages, … Server-side pagination is appropriate for large data sets providing faster initial page load.
-Wikipedia
React Tips
In a registration form, using useState hooks for each input versus using a user object and a single useState hook.
In this article we will explore two ways of tracking state using a simple registration form.
The user enters their name, email address and a password and we keep track of state in two different ways.
- The first way will be to use the useState hook for each input field.
- The second way will be to use a user object and a single useState hook with the user object.
Both are valid ways but the second may be preferred for larger forms.
Let’s Get Started
You can use an existing React project (I often keep a “SandBox” application for experimenting) or bootstrap a…
React Tips
Use useEffect to fetch data in a functional component and use setInterval to refresh that data as desired.
What We Will Learn
Although React’s useEffect hook allows you to do many things, In this tutorial we will walk through how to use the useEffect hook specifically to fetch data from an API, and refresh that data periodically.
You can use whatever API you prefer but we will be using the fake API https://jsonplaceholder.typicode.com/ to fetch posts.
https://jsonplaceholder.typicode.com/postsUseEffect
By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates.
Something important to notice in the…
gravity well (Rob Tomlin)
Self-Employed Software Developer, Trainer, Consultant. Keeping up to date. I’ve noticed in over 28 years of programming, one’s current skills have a shelf life.
