Isa Chen isabellachen

Loading React into WP

Create a child theme, or if you want to load React into a plugin, you can do this in a plugin.

Make sure you have node and npm installed globally in your machine.

Make sure you have some way to access the command line.

npm init in the child theme to enable it to use npm packages. You now see a package.json file in your child theme directory. Listed here are the libraries your application depends on. It's a bit like wp_enqueue_scripts, but for JS libraries. All the external libraries/scripts you need are listed under devDependencies or dependencies.

Tech Writing Samples

General Articles

WordPress Technical Articles

How to set up Debugging to Contribute to JetPack in VS Code

#Basic animated hero

We begin by adding one image and animating it. We start with some basic markup to scaffold the project and show the elements of the header. We will animate the header__image-container and add styles to the img element to ensure correct sizing and placement. We add a ::before psuedo element to the header__image-container to darken the image a little.

<!DOCTYPE html>
<html>

import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  ComposableMap,
  Geographies,
  Geography,
  Marker,
  ZoomableGroup,
} from 'react-simple-maps';

The idea is to have an overlay on the same level as the modal or widget, so when click the overlay, the modal closes.

<div class="overlay"></div>
<div class="widget"></div>

.widget {
 width: 50px;

	import { convertFromRaw, convertToRaw, Editor, EditorState, RichUtils } from 'draft-js';
	import { draftToMarkdown, markdownToDraft } from 'markdown-draft-js';
	import React, { useEffect, useState } from 'react';
	import { useIsFirstRender } from '~/core/utils';
	import './markdown-editor.scss';
	import { BlockTypeControls } from './MarkdownEditorBlockTypeControls';
	import { InlineStyleControls } from './MarkdownEditorInlineStyleControls';

	type MarkdownEditorProps = {
	markdown: string;

	import chroma from 'chroma-js';
	import { MutableRefObject, useEffect, useRef } from 'react';

	export const useChromaBackground = (): MutableRefObject<HTMLElement> => {
	const tagRef = useRef<HTMLElement>({} as HTMLElement);
	const cWhite = '#FFFFFF';
	const minClarityValue = 70;

	useEffect(() => {
	async function validateBackground() {

	(function($) {
	const postData = {
	title: 'Lorem ipsum dolor sit amet',
	content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
	status: 'publish'
	};

	window
	.fetch(`${scriptVars.endpoint}`, {
	method: 'POST',

	import { PropsWithChildren } from 'react';

	export type GenericComponentProps = PropsWithChildren<Record<string, any>>;

	const MetaBox = (props: GenericComponentProps) => (
	<div className="metainfo__box">
	<div>{t(`entityDetail.${props.label}`)}</div>
	<div>{props.children}</div>
	</div>
	);

	import React, { useCallback, useMemo } from 'react';
	import { useTranslation } from 'react-i18next';
	import { NavLink } from 'react-router-dom';
	import { MenuLink } from '~/core/configuration/menu';

	type AsideLinkProps = {
	onClick?: (event: React.MouseEvent<HTMLElement>) => void;
	children?: JSX.Element[] \| null;
	} & MenuLink;