DEV Community: sarah

Getting Started with React.js and Next.js – A Beginner's Guide to Creating Pages, Routing, and Dynamic Content

sarah — Fri, 04 Aug 2023 12:20:52 +0000

Next.js is a powerful and popular framework for building server-side rendered React applications. With Next.js you do not need to install any fancy dependency to handle routes, Next.js provides a built-in routing system that makes it easy to navigate between pages.

In this article, we'll explore the basics of creating pages with Next.js and React.js, including routing and dynamic content. If you want to learn how to add Next.js to your project, I wrote an article about Getting started with Next.js you can check out.

Creating Pages with Next.js and React.js

Creating pages in your react app has been made easy with Next.js. When you install Next.js in your project, you will notice a pages directory that next.js has already created for you.

Inside this directory, you will also notice some default files and folders – app directory, index.js, _app.js, and _document.js. “index.js” is your root homepage, while _app.js is your root App. The index.js would have some code in it, edit it as is appropriate to your project. When Next.js sees an index page in your file, it will create a root path for that file.

You can create other pages like “about.js” and “contact.js” inside the pages directory and then add your react code like this:

const MyPage = () => {
  return (
    <div>Hello World!</div>
  )
}

export default MyPage

In the code example above, we have created a myPage component function that returns a div with a content of “Hello World!”.

To check if your code works, test it on http://localhost:3000/

Using Next.js Link Component

Next.js provides a built-in routing system that makes it easy to navigate between pages. To create a link to another page, use the Link component from the next/link module.

The Link component is an amazing feature in next.js, it enables client-side navigation which allows users to navigate between pages without a full page reload. This enhances the user experience by providing faster transitions and preserving the application state.

For example, to create a link to the about page, you would use the following code:

import Link from 'next/link';

function MyPage() {
  return (
    <div>
      <h1>Welcome to my website</h1>
      <Link key=”1” href="/about" passHref>
        <a>About</a>
      </Link>
    </div>
  );
}

export default MyPage;

In the code example above, the link component was first imported from the next/link module. After importing the Link component, you should be able to use it in your code.

The passHref prop in the Link component of Next.js is used to pass the href attribute to the underlying anchor (a) tag. passHref is used for accessibility and seo, when using third-party libraries or working with complex DOM interactions.

Your Link component jsx should always have a KEY (key={data.id}). You can learn more about keys in the article -- rendering lists

Routing file system in Next.js

In Next.js, you can create dynamic pages with dynamic paths that include IDs. You do not need an extra library to help manage your pages. Next.js identifies dynamic files by adding square brackets [ ] around the file name.

Next.js creates dynamic pages with dynamic paths that include IDs by using the getStaticPaths and getStaticProps functions. getStaticPaths and getStaticProps are used to tell Next.js what page and path to generate. For dynamic pages you need both, but for static pages you only need getStaticProps. getStaticPaths is used to specify the exact path (url).

Here's an example of how to create dynamic pages with IDs in Next.js:

Create a page component in the pages directory, and include [id] as the filename to indicate that it is a dynamic page. For example, pages/posts/[id].js, inside the page, add the code below

const Post = ( {data} ) => {

    return (
        <div>
            <Image src={data.image} width={500} height={300} alt={data.title}/>
            <h1>{data.title}</h1>
            <p>{data.description}</p>
        </div>
    )
}

export default Post;

Define the getStaticPaths function in the same component. This function is used to generate all the possible paths for this page at build time. For example:

export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  const paths = posts.map(post => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

In this example, we fetch all the posts from an API and map them to an array of paths with the id parameter included. The fallback property is set to false, which means that any path not included in the paths array will result in a 404 page.

Define the getStaticProps function to fetch the data for the individual post with the given id. This function is called at build time for each path generated by getStaticPaths. For example:

export async function getStaticProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.id}`);
  const post = await res.json();

  return { props: { post } };
}

In this example, we fetch the individual post data using the params.id value from the URL path, and return it as a prop to the component.

Remember to define getStaticPaths or getStaticProps after you have defined your component, not before or inside the component.

That's it! Now you can use this dynamic page component to display individual posts based on their IDs. To test, add the url path plus any letter or number.

When a user navigates to a URL like /post/123, Next.js will automatically generate the static HTML and JSON files for that page at build time, and serve them to the user at runtime.

Conclusion

We've successfully explored the basics of creating pages with Next.js and React.js, including routing and dynamic content.

Hopefully with these tools, you can begin to create powerful and performant web applications with Next.js and React.js that offer a great user experience.

Happy coding!

Getting started with Reactjs and Nextjs

sarah — Thu, 23 Mar 2023 09:31:20 +0000

Everyone is using React these days. We might as well join them 😅. React is a powerful JavaScript library for building scalable user interfaces. It was created by Facebook and released in 2013. React was introduced to JavaScript to address the challenges of building complex user interfaces.

You see, traditional approaches to building UIs heavily relied on manipulating the DOM directly, this would usually result in slow and error-prone apps and websites.

With React, you can build UIs using a component-based architecture, where each component represents a small piece of the UI that can be easily reused and combined with other components. You can also take advantage of a large ecosystem of third-party libraries and tools that allows you to build powerful applications quickly and efficiently.

Using React is even more exciting with the release of the new React documentation. If you want to create a website or app fully with React, they recommend that you use one of the react frameworks – Next.js, Remix, Gatsby, and Expo (for native apps). In this tutorial, we will explore how to create a new React project using the Next.js Framework.

Benefits of Using React with Next.js

React and Next.js can be used together to create high-performance, server-side rendered applications – Next.js is a framework built on top of React that adds additional features and functionality to your React projects.

It allows you to create both static and dynamic pages, making it easy to build powerful and scalable applications. With Next.js, you can take advantage of server-side rendering, making your applications faster and more responsive.

Next.js provides a simplified routing system that makes it easy to navigate between pages. This can help improve the user experience and make it easier for users to find what they're looking for.

Next.js can automatically split code into smaller chunks, making it faster and easier to load. This can improve the performance of your application and reduce the time required to load the pages.

Next.js improves development experience with features like hot reloading, which allows developers to see changes in real-time without having to restart the server.

Let me show you how to get started in just 3 steps!

Setting up your Reactjs and Next.js App

Step 1: Install Node.js and npm

Before starting a new React project with Next.js, you need to have the latest version of Node.js and npm (Node Package Manager) installed on your system. Node.js is a JavaScript runtime that allows you to run JavaScript code outside of a web browser. npm is a package manager that helps you install and manage packages (libraries, frameworks, etc.) for your Node.js projects.

To install Node.js and npm, follow the instructions on the official Node.js website – Nodejs Installation

Step 2: Create a New React Project with Next.js

Once you have Node.js and npm installed, you can create a new React project with Next.js using the create-next-app command-line tool. This tool helps you set up a new React project with all the necessary files and dependencies.

To create a new React project with Next.js, open your terminal or command prompt, cd into the folder you want to save your new react app and run the following command –

_npx create-next-app@latest my-app 
 or
yarn create next-app my-app
 or
pnpm create next-app my-app_

You do not need to create an empty directory. The create-next-app command will create one for you. Replace my-app with the name of your project.
This command will create a new directory with the name of your project and set up a new React project with Next.js inside it. If you forget to write your app name don't worry, Next will prompt you to add your app name. During installation you will get these prompts –

? Would you like to use TypeScript with this project? … No / Yes
? Would you like to use ESLint with this project? … No / Yes
? Would you like to use `src/` directory with this project? … No / Yes
? Would you like to use experimental `app/` directory with this project? › No / Yes
? Would you like to use experimental `app/` directory with this project? … No / Yes

Choose any that applies to you – use your left and right arrow keys to choose between yes and no – and press enter. Installation time is usually based on your machine, be patient 😊.

After installation, your react-next project folder should've been created. cd into your project folder, then type ‘code .’ – this should open vscode automatically.
If your vscode does not open automatically, that means you do not have the shell command code installed on your vscode. To get it installed,

open vscode,
hold cmd - shift - p on your keyboard (this opens the command palette)
type Shell Command: Install ‘code’ command in PATH
press enter.

This would install code in your terminal – the ‘code .’ command should work now.

Step 3: Run the Development Server

After creating a new React project with Next.js, you can start the development server using the following command:

npm run dev

You can run this command directly in your vscode terminal. This command compiles the code and runs the development server.
It will hot reload and fast refresh the code so everytime you hit save, the page will automatically reload. Your server should be running on localhost:3000 in your web browser.

Congratulations, your react-next app is ready! 😁

Let’s explore the project structure

Once the development server is running, you can explore the project structure.

Package.json
The package.json file is a configuration file that contains important metadata about your project, as well as information about its dependencies.

Styles
The style directory contains all the CSS styles for your project.

Public
The public directory contains the static assets (favicons, fonts, images, etc.) for your project.

Pages
The pages directory contains the API directory – for your backend connections, and all the pages for your React project.

See how easy that was! 😌😄

Check out Next.js documentation to learn more on how to use Next.js

Happy coding! ♥️ ♥️ ♥️

Arrays and Object Destructuring in Javascript

sarah — Wed, 15 Mar 2023 16:36:04 +0000

I wrote this article for baddies like me who've used destructuring many times in javascript without really understanding its ins and outs. Destructuring is a cool feature that was introduced in ES6/ES2015, I believe to make our lives as developers easy.

As a JavaScript developer, you're probably familiar with the concept of objects and arrays. Objects and arrays are great for storing and manipulating data in JavaScript. However, sometimes you might find yourself in a situation where you only need a few specific values from an object or array. This is where destructuring comes in handy.

With destructuring, unpacking data from objects and arrays is done with ease, speed and efficiency. Let's dive in!

What is Destructuring Assignment

According to Mozilla, "The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.”

It is simply a way to extract specific data/values from objects or arrays and assign them to variables. It's a shorthand way of assigning values to variables and can help make code more readable and concise.

Benefit of Destructuring Assignment

Destructuring allows you to extract values from objects or arrays in a concise and readable way. Instead of accessing each property or element individually, you can extract all the values you need in a single statement.
With destructuring you get to extract specific values from objects or arrays, making your code more flexible. You can extract only the properties or elements you need, and ignore the rest.
Destructuring allows you to avoid repetition in your code. If you need to access the same property or element multiple times, you can extract it to a variable using destructuring, and then reference the variable instead of repeating the same code.
Destructuring is easy to use with functions particularly when working with functions that take objects or arrays as arguments. By destructuring the arguments, you can easily access the values you need without having to reference the original object or array.
Destructuring allows you to specify default values for properties or elements that may not exist or may be undefined. This can help prevent errors and simplify your code by avoiding the need for additional checks and conditionals.

Why Destructuring

Extracting Data from Arrays

Before ES6/ES2015 extracting data from an array was done this way:

let numbers = [‘1’,’2’,’3’,’4’,’5,’6’];
let secondNumber = numbers[1];
let lastNumber = numbers[numbers - 1] 

console.log(secondNumber); //2
console.log(lastNumber); //6

This becomes repetitive if we have to do this over and over again.

With ES6/ES2015

let numbers = [‘1’,’2’,’3’,’4’,’5’,’6’];
let [firstNumber, secondNumber] = numbers; 

console.log(firstNumber); //1
console.log(secondNumber); //2

It is more concise:

let [firstNumber, secondNumber] = [‘1’,’2’,’3’,’4’,’5’,’6’];

console.log(firstNumber); //1
console.log(secondNumber); //2

Has the same result.

Variables can be declared before they get assigned

let firstNumber, secondNumber, thirdNumber;
let [firstNumber, secondNumber, thirdNumber] = [‘1’,’2’,’3’,’4’,’5’,’6’];

console.log(firstNumber);//’1’
console.log(secondNumber);//’2’
console.log(thirdNumber);//’3’

In the code above you will notice that the variables are set from left to right so – the first variable gets the first item in the array, the second variable gets the second item in the array and so on…

Values can be skipped in arrays

It is possible to skip values in arrays using a comma (,). You can add a comma separator for each value you want to skip in the array. For example:

let [firstNumber,,thirdNumber,,] = [‘1’,’2’,’3’,’4’,’5’,’6’];

console.log(firstNumber);//’1’
console.log(thirdNumber);//’3’

If you want to skip all the items in the array, do this –

let [,,,,,,] = [‘1’,’2’,’3’,’4’,’5’,’6’];

Using the spread syntax to assign the rest of an array

The spread syntax allows an iterable object such as strings or arrays to be expanded into individual elements.

In some cases where we want to assign some of the array to variables and the rest of the items in an array to a particular variable, we would do this –

let [firstNumber, …anotherNumber] = [‘1’,’2’,’3’,’4’,’5’,’6’];

console.log(firstNumber);//’1’
console.log(anotherNumber);//[’2’,’3’,’4’,’5’,’6]

With this you can unpack and assign the remaining part of an array to a variable.

Default Values in Arrays

Sometimes, the array that you're destructuring might not have a value that you're trying to extract. In such cases, you can provide a default value. For example, consider the following:

let [firstNumber = ‘4’,secondNumber = ‘2’] = [‘1’];


console.log(firstNumber);// ’1’
console.log(secondNumber);// ’2’

secondNumber is not defined in the array so it falls back to 2

let numbers2 = [1, 2];

const [x, y, z = 3] = numbers2;

console.log(x); // Output: 1
console.log(y); // Output: 2
console.log(z); // Output: 3

In this example, we're trying to extract three values from the numbers2 array, but it only has two elements. Instead of throwing an error, we can specify a default value for z using the (=) operator.

Swapping values using array destructuring assignment

We can also use array destructuring to swap variable values without needing a temporary variable:

let a = 1;
let b = 2;

[a, b] = [b, a];

console.log(a); // Output: 2
console.log(b); // Output: 1

In this example, we're swapping the values of a and b without needing a temporary variable. We do this by creating a new array with the two values in the opposite order and then using array destructuring to assign the new values to the variables.

Array destructuring is particularly useful when working with arrays that have a fixed number of elements and where you only need to extract a subset of those elements.

Extracting Data from Objects

Before ES6/ES2015 extracting data from an object is done this way:

let person = { name: 'Sarah', age: 29, gender: 'female' };

let name = person.name;
let age = person.age;
let gender = person.gender;

console.log(name);// ‘Sarah’
console.log(age);// ‘29’
console.log(gender);// ‘female’

Look at the example above and notice the repetition I explained earlier in the array example.

With ES6/ES2015 Object Destructuring

const person = { name: 'Sarah', age: 29, gender: 'female' };
const { name, age } = person;

In the example above the name and age properties was extracted and assigned variables with the same name.
This will create two variables name and age with the values 'Sarah' and 29, respectively.

let { name: personName, age: personAge } = person;

You can also use destructuring to assign the extracted values to variables with different names. This will create two variables personName and personAge with the values 'Sarah' and 29, respectively.

One thing to keep in mind is variables in the object on the left hand side should have the same name as a property key in the object person. If the names are different, we'll get undefined.

Values of an object can be assigned to a new variable instead of using the name of the property:

let person = { name: 'Sarah', age: 29, gender: 'female' };
let {name: foo, gender: bar} = person;

console.log(foo);//’Sarah’
console.log(bar);//’female’

Default Values

Default values comes in handy in cases where a variable is undefined in an object it wants to extract data from.

let person = {name: ‘Sarah’, country: ‘Nigeria’, job: ‘Developer’};

let {name = ‘myName’, friend = ‘Sophie’} = person;

console.log(name);//’Sarah’
console.log(friend);//’Annie’

We can also set default values when we assign values to a new variable:

let person = {name: ‘Sarah’, country: ‘Nigeria’, job: ‘Developer’};

let {name:foo = ‘myName’, friend: bar = ‘Sophie’} = person;

console.log(foo);// ‘Sarah’
console.log(bar);// ‘Sophie’

Nested Destructuring

You can use destructuring to extract values from nested objects and arrays. For example, consider the following object:

let person = { name: 'Sarah', age: 29, address: { street: '12, Admiralty St', city: 'Lagos' } };

To extract the street and city properties from the address object and assign them to variables with the same name, you can use the following syntax:

let { address: { street, city } } = person;

This will create two variables street and city with the values '12 Admiralty St' and 'Lagos', respectively.

You can also use destructuring to extract values from nested arrays. For example, consider the following array:

let numbers = [[1, 2], [3, 4]];

To extract the value 3 from the array and assign it to a variable, you can use the following syntax:

let [, [c]] = numbers;

This will create one variable c with the value 3.

Destructuring is a powerful feature in JavaScript. It can make your code more concise and readable, and it's definitely worth learning if you haven't already.

By using nested destructuring, you can extract values from complex data structures with ease.

I hope this helps you! 🖤🖤🖤

MVC - Modern Website Architecture

sarah — Thu, 16 Feb 2023 16:07:35 +0000

What is MVC ?

MVC (Model, View, Controller) is an architectural design pattern used in web development. It aims to process information in a structural way in our web applications. It is used by most of the popular programming frameworks like ruby on rails, express, angular, code-igniter, django and many others. The idea of MVC is to separate functionality, logic, and interface for our applications so that it is easy to work well with other developers.

History Of MVC

The MVC pattern was first introduced in 1979 by computer scientist Trygve Mikkjel Heyerdahl Reenskaug. He wanted to solve the problem of breaking complex user applications into smaller manageable components.

The MVC pattern was primarily used in desktop applications in the 80’s and early 90’s, but in today’s world it is the ideal design choice for organizing your code.

Components Of MVC

M === Model : This is the database schema (MySQL, PostgreSQL, MongoDB => Mongoose). It is responsible for the data logic behind the application.

V === View : This is the client/ui. Essentially what the user sees, it is dynamically shown to the user using templates (EJS, Handlebars, pug).

C === Controller : This is the server. It is like the brain that connects to the model and the view. Server examples includes linux/windows server. PHP, python, ruby.

Advantages Of MVC

MVC structure allows for better organization and easy troubleshooting.
It supports the separation of concerns (SoC) principle; this means that the backend and the frontend code are broken into separate components this way it is easier to manage without breaking anything.
It makes collaboration with other developers easy.

Structure of MVC

The Process

When a user makes a request to a url using a browser, the request first hits the router then sends the request to the controller.

The controller then, based on the request type, either goes to the view or to the model and then the database to get some kind of user data.

The data is then sent to the view, which dynamically converts it to html, and sends it back to the controller.

The controller then sends it back to the user. All these actions happen in seconds.

Model (data)

The model is the brain of the application, it is responsible for getting and manipulating the data. The model processes data to and from either a database, API or a JSON Object.

Models’ are higher-order constructors that take a schema and create an instance of a document for the collection to use. It only communicates with the controller.

Components of the Model

The model mostly houses the database Schema. A Data Model Schema defines how data points are organized and connected.

The schema is the blueprint for your data. It essentially specifies how the data should be received.

Summary

The model is how you interact with your data.It only communicates with the controller.

The controller requests data through the model. The schema is the blueprint.

Schema Code Example

The code example above is what you will ideally see in a file in the model folder. This essentially shows the database schema and indicates the type of data that should be expected.

View (Client)

The view is the client. It displays information to the user. A view usually consists of html and css along with dynamic values sent from the controller.

The controller communicates with the view. Dynamic values are generated using template engines. The template engine is what allows dynamic data because pure html will not output variables or use logic and if statements. Examples of template engines, pug, handlebars, ejs, react etc.

Components of the View

The view houses the html templates.

Summary

The View displays information to the user. The view listens only to the controller. The view follows direct instructions from the controller.

Controller (server)

The controller is the middleman between the model and the view. It takes information from the user, processes the information and talks to the database if needed.

It receives info from the database. It speaks to the view to explain presentations to the viewer.

The controller is what is interacting with the user. It processes GET/POST/PUT/DELETE requests. It handles all server side logic.

The controller asks for data from the model, the controller will then load a view, the template engine in the view
does some logic to show the data to the browser.

The controller can also sometimes load a view without passing in data from the model.

Mongoose Schema

Mongoose is an Object Data Modelling (ODM) library for MongoDB. MongoDB is a schema-less NoSQL document database and unlike SQL databases, structure isn’t enforced, mongoose is used to provide structure to MongoDB. Mongoose translates between objects in code and the representation of that object in MongoDB.

Mongoose schema is a document data structure that is enforced via the application layer. It is the blueprint of the application. It gives structure and organization to our user data.

Object Mapping via Mongoose

Mongoose Schema Code Example

Notice in the code above that Mongoose is first required in the document and then a mongoose schema is created.

File Architecture Using Mongoose

The most attractive concept of the MVC pattern is separation of concerns. MVC components are partitioned in separate folders to prevent the server from being cluttered with all the logic in one file. It allows for easy debugging.

The config folder houses the .env file and the database. The .env is where private files and secrets like api keys, database connection strings, port etc are stored. The database file is where the app connects to a database, NoSQL or SQL

The controller folder is the server, all server logic are stored in the controller folder. The model is where is the mongoose schema is stored.
The public folder houses our client-side code (css and javascript). All the page routes are stored in the route folder so that the data can be easily traced.

The template engines that outputs html are usually stored in the view folder.
Most of this logic all happens behind the scenes away from the user.

Routing Data Through An Application

A user trying to get access to their profile information

When a user clicks on a button that is mapped to a url, a get request is triggered in the route and view appends the ID data for the current user. /edit/pages/profile/[unique user id]
The server controller reads the request and then sends the request to the router, the router then connects the request to the specific route /edit/pages/profile/[unique user id]

The router checks the next part of the url and locates the function in another controller that matches the portion of the path /edit/pages/profile/[unique user id]
The user ID function is then passed into the function as a parameter. A request is sent to the database to retrieve user info via the model which provides structure to the data.

The model receives the data, passes it to the controller, the controller then sends the request to the view to be mapped to the appropriate page template.

Finished template is then sent to the browser and rendered as HTML for the user to view.

Summary

The controller takes information from the user, processes the information and talks to the database if needed.

The controller is the middleman between the model and the view

MVC Summary

Model
responsible for getting and manipulating the data. It is the brain of the application. It communicates with only the controller.

View
this is the actual view of the application, it is the user interface, it is what the user sees when they interact with the app.

*Controller *
the controller receives user input from the routes or view. The controller processes a post, get, put, and delete request.

Thank you!

I hope this has helped you understand MVC as much as writing it has helped me. Goodluck in all your endeavors!

Sarah 🖤