Forem: Talabi Ayomide

Understanding CSS Media Queries

Talabi Ayomide — Mon, 11 Jul 2022 11:05:48 +0000

Media queries are used to include a block of CSS properties only if a certain condition is true.
when you want to modify your site depending on a device's general or specific characteristics and parameters, the CSS media query is what you need.
In this guide, we would explain media queries like you are 5!
Let's get started.

You can think of media queries as a condition. If true, we do something, else we do something else.

Syntax

A media query is composed of an optional media type and any number of media feature expressions.

What is a media type?
This defines the broad category of a device for which the media query applies: all, print, screen.

What is a media Feature?
Media features describe a specific characteristic of the user agent, output device, or environment eg height, prefers-color-scheme, width, etc.

Targeting media types

Media types describe the general category of a given device. it can be targeted as seen below

media screen {
//do something
}

screen in the above code is the media type.

Targeting media features

@media (max-width: 12450px) {
 //do something
 }

max-width in the above code is the media feature.

Sometimes you may want to create a media query that depends on multiple conditions. This is where the logical operators not, and, & only come in.

@media (min-width: 30em) and (orientation: landscape) {
 //do something 
}

min-width and orientation in the above code are the conditions that the media query depends on.

To get a better understanding, we would be replicating the below hero section for both mobile and desktop screen sizes.

Create an HTML file and name it whatever you want. I'm naming mine index.html
Create a CSS file and name it whatever you want. I'm naming mine style.css

//index.html 
<section>
<div class='first-div'>
<p>Meet Celtic</p>
<h1>A secret tool for the best analytic experience</h1>
<p>Track your goal and monitor your progress towards important goals/quotas</p>
<a href='#'>Get started</a>
<a href='#'>Request demo</a>
</div>

<div class='second-div'>
<img class='image' src='www.google.com/image/celtic' />
</div>
</section>

The above code has created the required elements for the hero section. We won't focus on styling the elements. Let's use CSS to develop the layout.

*,html {
margin : 0;
padding: 0;
box-sizing: border-box;
}

section{
display : flex;
flex-direction: row;
align-items : center;
justify-content: space-between
padding: 2rem;
}

.image{
max-width:100%;
width: 320px;
}

The above code is well optimized and will display correctly on the desktop. But on smaller screens, the layout starts looking disorganized.
The best option is to move the image to a different line entirely.

//Targeting screen sizes between 0 and 450px
@media (max-width:450px) {
section{
flex-direction: column;
justify-content: center;
}

.image{
max-width:100%;
width: 100%;
}
}

Changing flex-direction to a column when the screen size is 450px or below helps make our website responsive.
And the image takes 100% of its size when the screen size is 450px or below.
Yes, that's how easy it is!

Conclusion

Media query is a CSS technique that uses the @media rule to include a block of CSS properties only if a certain condition is true.

Struggling With Context API ? You Are Not Alone.

Talabi Ayomide — Mon, 04 Jul 2022 13:03:29 +0000

State is an essential part of our React application, hence, the need to pass to different components. state/data is passed top-down (parent to child) via props. This is called PROP DRILLING.

This method becomes complex as the application grows and as many components require different props.
Things can get messy in a twinkle of an eye.

Context provides a way to share values like these between components without having to pass a prop through every level of the tree.

In this guide, we would talk about context API, and its usage and build a mini-project ( a search application ) with it.
Let's dive in.

Context is designed to share data that can be considered global for a tree of React components, such as the current authenticated user, theme, etc.

I am guessing your editor is already set up.

Set up Context API

First, we have to create a file called ResultContext.js (feel free to name it whatever you want) and import the required hooks.

import React , { useContext , useState , createContext } from "react"

Create Context

const ResultContext = createContext()

Create a "Provider" and add {children} as a prop

export const ResultContextProvider = ( {children }) => {
//state for results
const [results , setResults ] = useState([]);
//state for search Term
const [searchTerm , setSearchTerm ] = useState('Elon Musk');

//create a function to fetch data

const getResults = async () => {
    const options = {
        method: 'GET',
        headers: {
            'X-API-Key': process.env.REACT_APP_API_KEY,
        }
    };

    const response = await fetch('https://google
search3.p.rapidapi.com/api/v1/search', options)

    const data = await response.json();
    //set results to the results gotten from data fetched
    setResults(data.results)
}

Return Context.Provider inside the previously created Provider and set value to the props to be passed.

return (
    <ResultContext.Provider value= { { getResults , results , searchTerm , setSearchTerm } } >
        {children}
    </ResultContext.Provider>
)
}

We are done with setting up our context file. In summary:

We created context using the createContext() hook.
We created A "provider" and passed {children} as a prop and returns ResultContext.Provider.
We fetched data and set the results state to the data fetched.
We returned a ResultContext.Provider and set value to the states we want to pass as props into other components. Whatever we pass into the value prop will be available throughout our app.

Wrap the App component with the Provider

import React from 'react';
import App from './App';
import { ResultContextProvider } from
'./context/ResultContextProvider';
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);

//wrap <App /> with Provider to make state available through app
root.render(
     <ResultContextProvider>
          <Router>
               <App />
          </Router>
     </ResultContextProvider>
);

Consume the props

Now the state/Props are available throughout the App, we now need to consume them.

Import the required Hooks
import React, { useEffect, useContext } from 'react'
The useContext hook is used to get the props from the context.
Import the context
import { ResultContext } from '../context/ResultContext'
Get the props from the context using useContext

//component for search
import React, { useEffect, useState, useContext } from 'react';
import { ResultContext } from '../context/ResultContext';

const Search = () => {
  //get prop from context
  const { setSearchTerm } = useContext(ResultContext);
  const [text, setText] = useState('');

  //change the value of text throughout our app
  useEffect(() => {
    if (text) {
      setSearchTerm(text)
    }
  }, [text]);

  return (
    <div>
    <div>
      <input
        value={text}
        type="text"
        onChange={(e) => setText(e.target.value)}
      />  

    {text !== '' && (
      <button type="button" onClick={() => setText('')}>x</button>
    )}
    </div>
  )
}

export default Search;

//component displaying result
import React, { useEffect, useContext } from 'react'
import { useResultContext } from '../context/ResultContext';


const News = () => {
  const { results, getResults, searchTerm } =  useContext(ResultContext);

  useEffect(() => {
    if (searchTerm !== '') {
      getResults();
  }
}, [searchTerm]);


return (
  <div>
  {results?.map(({ link, title, description }, index) => (
  <div key={index}>
    <a href={link} target="_blank" rel="noreferrer">
      <p>{link.length > 30 ? link.substring(0, 30) : link}</p>
      <p >{title}</p>
      <p>{description}</p>
    </a>
  </div>
  ))} 
  </div>
)
}
export default News

Conclusion

The main takeaways from this article include the following:
The React Context API is designed for prop drilling

This example is fairly simple and I hope you’ve been able to understand how to handle State in React using the context API.

Are You A React js Developer? These Are Reasons You Should Learn Next js.

Talabi Ayomide — Mon, 27 Jun 2022 14:30:59 +0000

Hello, I am guessing you must have heard the buzzword "NEXT JS". Yeah, I thought as much.
In this guide, we are going to focus on what Next js is, the difference between it and React, reasons to use and how to get started.
I hope you are excited, because I am. Let's dive in!

What is Next js?

In a few words, it is simply The React Framework for Production.
Next.js is a flexible React framework that gives you building blocks to create fast web applications.

React on the other hand is a Library, meaning React provides helpful functions to build UI but leaves it up to the developer where the function is to be used.

Developers need to spend time configuring tools and rewriting solutions for common application requirements in React compared to Next.js which handles the tooling and configuration needed for React and provides additional features and optimizations for your application.

FEATURES OF NEXT JS

PAGES

- Pages with Dynamic Routes
Next.js supports pages with dynamic routes. For example, if you create a file called pages/about.js, then it will be accessible at /about.

- Pre-rendering
By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. This results in better performance and SEO.

Next.js has two forms of pre-rendering:

Static Generation
Server-side Rendering The difference is in when it generates the HTML for a page._

Static Generation: The HTML is generated at build time and will be reused on each request.

Server-side Rendering: The HTML is generated on each request.

If you can pre-render the page ahead of the user's request, then use Static Generation.

Data fetching in Next.js allows you to render your content in different way :

getStaticPaths
Next.js will statically pre-render all the paths specified by getStaticPaths. You should use getStaticPaths if you’re statically pre-rendering pages.

getStaticProps
If you export a function called getStaticProps (Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps.

getServerSideProps
You should use getServerSideProps only if you need to render a page whose data must be fetched at the request time.

Client-side data fetching
Client-side data fetching is useful when the content of your pages needs to update frequently. Unlike the server-side rendering APIs, you can use client-side data fetching at the component level.

BUILT-IN CSS SUPPORT

Adding Component-Level CSS
Next.js supports CSS Modules using the [name].module.css file naming convention.
CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same CSS class name in different files without worrying about collisions.

Adding a Global Stylesheet
To add a stylesheet to your application, import the CSS file within pages/_app.js. These styles (styles.css) will apply to all pages and components in your application.

Sass Support
Next.js allows you to import Sass using both the .scss and .sass extensions. You can use component-level Sass via CSS Modules and the .module.scss or .module.sass extension.
Before you can use Next.js' built-in Sass support, be sure to install sass

CSS-in-JS

Examples
It's possible to use any existing CSS-in-JS. The inline style is the simplest:

    function Hi() {
      return <p style={{ color: 'red' }}>hi there</p>
    }
    export default Hi;

LAYOUTS

The React model allows us to construct a page from a series of components. Many of these components are often reused between pages. For example, you might have the same footer on every page.

If you only have one layout for your entire application, you can create a Custom Layout and wrap your application with the layout. Since the component is re-used when changing pages, its component state will be preserved

// components/layout.js

import Navbar from './navbar'
import Footer from './footer'

export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

import Layout from '../components/layout'

export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

IMAGE COMPONENT AND IMAGE OPTIMIZATION

The Next.js Image component, next/image, is an extension of the HTML element. It has built-in performance optimizations to help you achieve good Core Web Vitals which affect google ranking.
To add an image to your application, import the next/image component:

import Image from 'next/image'

Image Sizing
One of the ways that images most commonly hurt performance is when the image pushes other elements around on the page as it loads in. This performance problem has its own Core Web Vital, called Cumulative Layout Shift.
The way to avoid this issue is to always size your images. This allows the browser to reserve precisely enough space for the image before it loads.

next/image is designed to avoid Layout shift and must be sized in one of three ways:

Automatically, using a static import
Explicitly, by including a width and height property
Implicitly, by using layout="fill" which causes the image to expand to fill its parent element.

FONT OPTIMIZATION

Since version 10.2, Next.js has built-in web font optimization.
By default, Next.js will automatically inline font CSS at build time, reducing the time taken to fetch font declarations.

Usage
To add a web font to your Next.js application, add the font to a Custom Document.

// pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'

function MyDocument Document {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2 family=Inter&display=optional" rel="stylesheet"/>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
export default MyDocument

STATIC FILE SERVING

Next.js serves static files, like images, under a folder called public in the root directory. Files inside public can then be referenced.

For example, if you add an image to public/image.png, the following code will access the image:

import Image from 'next/image'
function Avatar() {
  return <Image src="/me.png" alt="img" width="64" height="64" />
}
export default Avatar

FAST REFRESH

Fast Refresh is a Next.js feature that gives you instantaneous feedback on edits made to your React components. It is enabled by default in all Next.js applications on 9.4 or newer.

With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state.

If you edit a file that only exports React component(s), Fast Refresh will update the code only for that file and re-render your component.
If you edit a file with exports that aren't React components, Fast Refresh will re-run both that file and the other files importing it. So if both Button.js and Card.js import Nav.js, editing Nav.js will update both components.
Finally, if you edit a file that's imported by files outside of the React tree, Fast Refresh will fall back to doing a full reload.

TYPESCRIPT

Next.js provides an integrated TypeScript experience, including zero-configuration setup and built-in types for Pages, APIs, and more.

You can create a TypeScript project with create-next-app using the --ts, --typescript flag like so:

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

ENVIRONMENT VARIABLES

Next.js comes with built-in support for environment variables from Next.js versions 9.4 and up, which allows you to do the following:

Loading Environment Variables
Next.js has built-in support for loading environment variables from .env.local into process.env.

An example .env.local:
DB_URL=localhost
DB_USER=myuser

// pages/index.js
export async function getStaticProps() {
  const db = await myDB.connect({
    host: process.env.DB_URL,
    username: process.env.DB_USER
  })
}

ROUTING

Next.js has a file-system based router built on the concept of pages.

When a file is added to the pages directory, it's automatically available as a route.

The files inside the pages directory can be used to define the most common patterns.

Index routes
The router will automatically route files named index to the root of the directory.

pages/index.js → /
pages/blog/index.js → /blog

Nested routes
The router supports nested files. If you create a nested folder structure, files will automatically be routed in the same way still.

pages/blog/first-post.js → /blog/first-post

Linking between pages
The Next.js router allows you to do client-side route transitions between pages, similar to a single-page application.

A React component called Link is provided to do this client-side route transition.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
    </ul>
  )
}
export default Home

next/link can cover most of your routing needs, but you can also do client-side navigations without it by using next/router.

The following example shows how to do basic page navigations with useRouter:

import { useRouter } from 'next/router'

export default function ReadMore() {
  const router = useRouter()

  return (
    <button onClick={() => router.push('/about')}>
      Click here to read more
    </button>
  )
}

API ROUTES

Any file inside the folder pages/api is mapped to /api/* and will be treated as an API endpoint instead of a page.

For example, the following API route pages/api/user.js returns a json response with a status code of 200:

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

NEXT.JS ADVANTAGES

React and Next.js both provide great developer experiences in their own way. But why use Next.js and not other frameworks for React? It depends on the production requirements and medium/long-term goals. Below are some advantages.

Speed
Fast rendering
Built-in CSS support
Better image optimization
SEO
ESLint compatible
Easy customization and deployment
API support

RESOURCES TO HELP YOU GET STARTED

Official Docs
Build a website with Next js
Next js crash course

Get Up And Running With The useEffect Hook.

Talabi Ayomide — Tue, 21 Jun 2022 08:46:12 +0000

Hooks are new features incorporated into React 16.8. and the newer versions. They basically help you use React features without writing a class.

In this guide, we are going to cover why this hook exists and how to use it in React.

If you started your React journey before version 16.8, then you have to unlearn lifecycle methods and instead think in effects.

The useEffect hook lets us express different kinds of side effects after a component renders. In case you are wondering what side effects are, relax, you will understand in a second.

Side effects are unpredictable actions performed with the "outside world." Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects. Regardless of knowing what this term means, you have most likely used it.

There are two common kinds of side effects in React components: those that don’t require cleanup, and those that do.

Side Effects Without Cleanup
Network requests, manual DOM mutations, and logging are common examples of effects that don’t require a cleanup. We can run them and immediately forget about them.

Side Effect With Cleanup
Some effects require cleanup to reduce memory leaks.
Timeouts, subscriptions, event listeners, and other effects that are no longer needed should be disposed.
This is done by including a return function at the end of the useEffect Hook.

useEffect is a tool that lets us interact with the external world but does not affect the rendering or performance of the component that it's in. React enables multiple useEffect instances inside a React functional component. The code can be broken down into multiple Hooks containing logically related code in a single function.

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.

It is a combination of componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods in class-based components.

Why useEffect is defined inside a component?

“useEffect” function is defined inside the component so that the variables and the functions defined inside the components can be accessed directly. If you are familiar with closures in JavaScript, you will probably be having an "aha!" moment now. And if you don't, it is not a problem.

Closures are functions that are nested in other functions and simply allows variables outside of the scope of a function to be accessed. It takes advantage of the concept of Closure to provide access to the local functions and variables defined inside a function.

How to use the useEffect hook

We import useEffect from "react"
We call it above the returned JSX in our component
We pass it two arguments: a function and an array

import { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  const [calculation, setCalculation] = useState(0);

  useEffect(() => {
    setCalculation(() => count * 2);
    console.log(calculation);
  }, [count]); // <- add the count variable here

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>+</button>
      <p>Calculation: {calculation}</p>
    </>
  );
}

The function passed to useEffect is a callback function which will be called after the component DOM renders. The side Effects are performed inside this function.

The second argument is an array, called the dependencies array. This array includes all of the values the side effect relies on. What this array will do is it will check and see if a value has changed between renders. If so, it will execute our use effect function again. We can optionally pass dependencies to useEffect in this array.

1. No dependency passed:
useEffect(() => {
//Runs on every render
});

2. An empty array:
useEffect(() => {
//Runs only on the first render
}, []);

3. State values passed into array:
useEffect(() => {
//Runs on the first render
//And any time any dependency value changes
}, [state]);

Summary

useEffect is a tool that lets us interact with the external world but does not affect the rendering or performance of the component that it's in.
By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed, and call it later after performing the DOM updates.

It is a combination of componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods in class-based components.
We pass two arguments: a function and an array into a useEffect hook.