❤️

Fang Ran Reine0017

❤️

Ran Fang (Reine)

Reine0017 / SomePage.tsx

Created January 1, 2022 15:35

Simple Counter

	function SomePage() {

	const [count, setCount] = React.useState(0)

	return (
	<>
	<div className="SomePage">
	THIS IS SOMEPAGE
	</div>
	<br></br>

Reine0017 / main.py

Created December 19, 2021 04:29

Image Resizer Python Script

	import streamlit as st
	import imutils
	from PIL import Image
	import numpy as np

	st.title("My Streamlit Image Resizer")

	content_file = st.sidebar.file_uploader("Choose a Content Image", type=["png", "jpg", "jpeg"])

	imgWidth = st.sidebar.number_input('Resized Image Width', 1, step=1)

Reine0017 / index.html

Created November 4, 2021 13:04

index.html from CRA with comments removed and new DOM element defined

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="theme-color" content="#000000" />
	<meta
	name="description"
	content="Web site created using create-react-app"

Reine0017 / ModalPortal.tsx

Created November 4, 2021 12:59

Modal Portal Component

	import ReactDom from "react-dom"

	interface MyModalProps {
	openModal: boolean;
	closeModal: (onClose: boolean) => void
	}

	export default function ModalPortal(modalProps: MyModalProps) {
	if(!modalProps.openModal){
	return null

Reine0017 / ReactPortalPage.tsx

Created November 4, 2021 12:43

Demo with Portal - ReactPortalPage

	function ReactPortalPage() {
	const [openModal1, setOpenModal1] = useState(false)

	return (
	<div className="ReactPortalPage">
	THIS IS THE REACT PORTAL PAGE (TO DEMO REACT PORTALS W MODALS)
	{/* ...commented out for brevity */}
	<div className="withPortal">
	Demo With Portal
	<div className="sectionContent" onClick={() => console.log("clicked withPortal")}>

Reine0017 / MyModal.tsx

Created November 4, 2021 10:06

MyModal.tsx

	import "../AllStyles.css"

	interface MyModalProps {
	openModal: boolean;
	closeModal: (onClose: boolean) => void
	}

	export default function MyModal(modalProps: MyModalProps) {
	if(!modalProps.openModal){
	return null

Reine0017 / ReactPortalPage.tsx

Last active November 4, 2021 10:04

Showing part of the ReactPortalPage component to demo how to render modal without react portals

	function ReactPortalPage() {
	const [openModal, setOpenModal] = useState(false)

	return (
	<div className="ReactPortalPage">
	THIS IS THE REACT PORTAL PAGE (TO DEMO REACT PORTALS W MODALS)
	<div className="withoutPortal" onClick={() => console.log("clicked withoutPortal")}>
	Demo Without Portal
	<div className="sectionContent">
	<button onClick={() => setOpenModal(true)}>Click Me To Open Modal</button>

Reine0017 / App.tsx

Created October 31, 2021 10:47

To show how to redirect with react-router-dom

	import React from 'react';
	import {
	Switch,
	Route,
	BrowserRouter as Router,
	} from "react-router-dom";

	import NavBar from './components/NavBar';
	import HomePage from './pages/homePage/HomePage';
	import ReactPortalPage from './pages/reactPortalPage/ReactPortalPage';

Reine0017 / NavBar.tsx

Created October 31, 2021 10:03

Our NavBar component

	import {
	Link
	} from "react-router-dom";
	import "./NavBar.css"

	function NavBar() {
	return (
	<div className="NavBar">
	<Link to="/">Home</Link>
	<Link to="/react-portal">React Portals</Link>

Reine0017 / PlotlyComponent.jsx

Created April 10, 2021 06:54

Calculate and Create Coordinate Arrays for Helix

	//Note that this isn't the full code for this js file, please refer to the repo for the full code
	const linspaceFn = (startValue, stopValue, cardinality) => {
	var arr = [];
	var step = (stopValue - startValue) / (cardinality - 1);
	for (var i = 0; i < cardinality; i++) {
	arr.push(parseFloat((startValue + (step * i)).toFixed(3)));
	}
	return arr;
	}
	const t = linspaceFn(0, 20, 100)