Last time, I deployed a React.js project on a server. But I found the router doesn’t work. I click the menu to other child pages. It always returns a 404 page. I did some search and found the reason. When I try to get a page by url, nginx would Read more…
1. What is Promise Promise is a solution for asynchronous programming. It is actually a constructor with its own methods all, reject and resolve, and prototype methods such as then and catch. The Promise object has the following two features: The Promise object represents an asynchronous operation with three states: Read more…
1. history principle The visited addresses are stored on a stack (LIFO-last in first out) 2. history.go() /home ==> /home/qa ===> /home/video history.go(-1) // return to previous page, history.go(1) // go forward one page 3. history.replace() & history.push() Location Replace: The link of the page is set to the new one, Read more…
Last time, we have introduced how to display a Markdown document in React.(http://52.65.48.177/index.php/2023/03/13/rendering-markdown-in-react/) Now, let’s move forward to support ToC(Table of Content), Mathematical Formula and Footnote. 1. ToC (Table of Content) To support ToC and in-page jump, we need two plugins: remarkToc and rehypeSlug. RehypeSlug is a plugin to add Read more…
import React, {useEffect} from "react"; import { useFormik } from "formik"; import { Box, Button, FormControl, FormErrorMessage, FormLabel, Heading, Input, Select, Textarea, VStack, } from "@chakra-ui/react"; import * as Yup from 'yup'; import FullScreenSection from "./FullScreenSection"; import useSubmit from "../hooks/useSubmit"; import {useAlertContext} from "../context/alertContext"; const LandingSection = () => { Read more…
To pass data from a child to a parent component in React: Pass a function as a prop to the Child component. Call the function in the Child component and pass the data as arguments. Access the data in the function in the Parent. import {useState} from ‘react’; function Child({handleClick}) Read more…
First, you need to confirm node.js, npm and nginx have been installed on your server. We’ll skip this step. Second, swith to your project directory, run the following command. npm run build or yarn build (if you have installed yarn) Then, adit the config file /etc/nginx/nginx.conf worker_processes 1; events { Read more…
Here is an example to show PDF in webpage with React-pdf-viewer, including helpful default layout and loading progress bar. import { Viewer, ProgressBar, Worker } from '@react-pdf-viewer/core'; import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; import '@react-pdf-viewer/core/lib/styles/index.css'; import '@react-pdf-viewer/default-layout/lib/styles/index.css'; const PdfViewer = () => { const defaultLayoutPluginInstance = defaultLayoutPlugin(); return ( <div Read more…
I tried to display a PDF file on website with react-pdf and react-pdf-viwer, but all failed. The error showed in console is: SyntaxError: expected expression, got ‘<‘ This is caused by pdf.worker.js in pdfjs-dist, which is the dependency of the both two packages. For React-pdf, you can eject by yourself Read more…
There are hundreds of semantic tags available to help describe the meaning of your HTML documents. Below is a cheat sheet with some of the most common ones you’ll use in this course and in your development career. Sectioning tags Use the following tags to organize your HTML document into Read more…