Level 2 React

In-Complete

Basic Toggle Component

src/components/toggle/BasicToggleButton.jsx

import React, { useState } from 'react';

export default function BasicToggleButton(props) {
  const [isToggled, setToggled] = useState(false);
  const onToggle = () => setToggled(!isToggled);
  return (
    <div>
      {isToggled && props.children}
      <button onClick={onToggle}>Show/Hide</button>
    </div>
  );
}

not very flexible

Understanding Render Props

Render Prop is just passing in a property to the component to render

src/components/toggle/BasicToggle.jsx

import React, { useState } from 'react';

export default function BasicToggleButton({ render }) {
  const [isToggled, setToggled] = useState(false);
  const onToggle = () => setToggled(!isToggled);
  return (
    <div>
      {render({
        isToggled,
        onToggle,
      })}
    </div>
  );
}

The proper named render can be named anything you would like

src/App.js

import './App.css';

// components
import BasicToggle from './components/toggle/BasicToggle';

function App() {
  return (
    <div className='App'>
      <div className='toggle'>
        <BasicToggle
          render={({ isToggled, onToggle }) => (
            <div>
              {isToggled && <p>Show me</p>}

              <button onClick={onToggle}>Show / Hide</button>
            </div>
          )}
        />
      </div>
    </div>
  );
}

export default App;

Children Render Props

src/components/toggle/BasicToggle.jsx

import { useState } from 'react';

export default function BasicToggle({ children }) {
  const [isToggled, setToggled] = useState(false);
  const onToggle = () => setToggled(!isToggled);
  return children({
    isToggled,
    onToggle,
  });
}

src/App.js

import './App.css';

// components
import BasicToggle from './components/toggle/BasicToggle';

function App() {
  return (
    <div className='App'>
      <div className='toggle'>
        <BasicToggle>
          {({ isToggled, onToggle }) => (
            <div>
              {isToggled && <p>Show me</p>}
              <button onClick={onToggle}>Show / Hide</button>
            </div>
          )}
        </BasicToggle>
      </div>
    </div>
  );
}

export default App;

Fragments in React

src/App.js

import './App.css';

// components
import BasicToggle from './components/toggle/BasicToggle';

function App() {
  return (
    <div className='App'>
      <div className='toggle'>
        <BasicToggle>
          {({ isToggled, onToggle }) => (
            <>
              {isToggled && <p>Show me</p>}
              <button onClick={onToggle}>Show / Hide</button>
            </>
          )}
        </BasicToggle>
      </div>
    </div>
  );
}

export default App;

Creating A Reusable Portal

What is a portal?

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

ReactDOM.createPortal(child, container)

The first argument (child) is any renderable React child, such as an element, string, or fragment. The second argument ( container) is a DOM element.

have any code wrapped so it can be inserted into the DOM anywhere you choose

src/Portal.js

import { Component } from 'react';
import ReactDOM from 'react-dom';

const portalRoot = document.getElementById('portal');

export default class Portal extends Component {
  constructor() {
    super();
    this.el = document.createElement('div');
  }

  componentDidMount = () => {
    portalRoot.appendChild(this.el);
  };

  componentWillUnmount = () => {
    portalRoot.removeChild(this.el);
  };

  render() {
    const { children } = this.props;
    return ReactDOM.createPortal(children, this.el);
  }
}

src/App.js

import React, { Component, Fragment } from 'react';
import logo from './logo.svg';
import './App.css';
import Toggle from './ToggleRPC';
import Portal from './Portal';

class App extends Component {
  render() {
    return (
      <div className='App'>
        <header className='App-header'>
          <img src={logo} className='App-logo' alt='logo' />
          <h1 className='App-title'>Welcome to React</h1>
        </header>
        <Toggle>
          {({ on, toggle }) => (
            <Fragment>
              <button onClick={toggle}>Login</button>
              <Portal>{on && <h1>Hi, I;m in a portal</h1>}</Portal>
            </Fragment>
          )}
        </Toggle>
      </div>
    );
  }
}

export default App;

My Software Engineering Notes Help

Level 2 React

Basic Toggle Component

Understanding Render Props

Children Render Props

Fragments in React

Creating A Reusable Portal

Creating A Reuseable Icon Component

Index Files for Organization

Elements Module & Absolute Imports

Building Design Utilities

React Context API

Updating Context

Basic Transitions With React Spring

React Spring Basics Part 2

Native Mode for Perfomant Animations

Animated Draggable Components

Native Dragging Animation

Interpolation In-depth

Using Position To Interpolate Color

Event With Gestures Based Interface

Level 2 React

Basic Toggle Component

Understanding Render Props

Children Render Props

Fragments in React

Creating A Reusable Portal

Creating A Reuseable Modal

Improving Our Modal

Creating A Reuseable Icon Component

Index Files for Organization

Elements Module & Absolute Imports

Building Design Utilities

React Context API

Updating Context

Basic Transitions With React Spring

React Spring Basics Part 2

Animating Modal

Native Mode for Perfomant Animations

Animated Draggable Components

Native Dragging Animation

Interpolation In-depth

Using Position To Interpolate Color

Event With Gestures Based Interface