Bwogi

Creating an Express.js instance to pull data from a MySQL database

Table of Contents

1. The Server Code
2. The Explanation

Server

import express from 'express';

Bwogi

Tailwind css gradients explained

I will be updating this gist time and again.In this gist, i show how you how you can use gradients to improve your front end.

Repo

https://github.com/Bwogi/modals-in-action

two colour combinations

Person component

The Person component has a gradient flowing from left to the right from white color to a grey shade.

className = 'bg-gradient-to-r from-white to-gray-500 ...'

Bwogi

Creating Modals in Reactjs - Process

1. Create the modal component you wish to load
2. Let the onClick event of your button point to a function, say paymentHandler
3. Import this model to where you want to load it
4. Import the useState hook
5. Set it to false
6. Destructure it to have paid variable and setPaid function
7. In the paymentHandler function, set the setPaid function to true
8. Below the button with this event, output a dynamic expression there where if paid variable is true, then load the modal component or if false, null.

Bwogi

https://www.moreonfew.com/attempted-import-error-switch-is-not-exported-from-react-router-dom/

Bwogi

const theme = useTheme();
	const matches = useMediaQuery(theme.breakpoints.up('sm'));
	// console.log(matches);

						{matches ? <span style={{}}>Secure Social Media</span> : ''}

thanks to Adnan Niaz

Bwogi

destructuring explained

The syntax also works on arrays:

const a = [1, 2, 3, 4, 5]
const [first, second] = a

This statement creates 3 new variables by getting the items with index 0, 1, 4 from the array a:

Bwogi

Props & component styles Explained

example 1 (header.js)

import React from 'react';

const Header = ({ title, year, message }) => {
	return (
		<header>
			<h3 style={headerStyles}>
				{title} {year} - {message}

Bwogi

useState explained

Isn't this beautiful?(/components/Counter/index.js)

import { useState } from 'react';
const Counter = ({ max }) => {
	const [count, setCount] = useState(0);
	return (
		<div>
			<h1>Walmart Guests: {count}</h1>
			<h3>out of: {max}</h3>

Bwogi

How you actually use the map function and more

With one property

theObject.map((itsSingular) => (<element>{itsSingular.property1}</element>))

With more properties

where property1 is the key

theObject.map((itsSingular) => (
<element key={itsSingular.property1}>{itsSingular.property1}</element>

Bwogi

Linking an article to the main article by id

Take special interest in the following code

<Link href='/article/[id]' as={`/article/${article.id}`}>

This is the main article

I have called this ArticleItem.js