roeib roeib

## cloudSettings
{"lastUpload":"2020-09-29T11:19:23.704Z","extensionVersion":"v3.4.3"}

## React.StrictMode.js
import React from 'react';

function ExampleApplication() {
  return (
    <>
      <Header />
      <React.StrictMode>
        <>
          <ComponentOne />
          <ComponentTwo />

## ErrorBoundaries2.js
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

## ErrorBoundaries.js
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

## portals4.js
const App = () => {
  const [isOn, setOn] = useState(false);

  return <div style={{overflow: "hidden"}}>
      <Button onClick={e => {setOn(!isOn)}} >
        Click me
      </Button>
      {
        isOn &&
        <Portal>

## portals3.js
ReactDOM.createPortal(child, container)

## portals2.js
import  { useEffect } from "react";
import { createPortal } from "react-dom";

const Portal = ({children}) => {
  const mount = document.getElementById("portal-root");
  const el = document.createElement("div");

  useEffect(() => {
    mount.appendChild(el);
    return () => mount.removeChild(el);

## portals.js
<!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"

## user2.js
import React from 'react';
import { PropTypes } from 'prop-types';

const User = ({ name,age })=> {

    return (
      <div>
        <p>User Name: {name}</p>
        <p>Age: {age}</p>
      </div>

## propsType4.js
import React from 'react';
import User from './User';


class App extends React.Component {
  render() {
    return (
      <div>
        <User name="Roei" age="30" />
      </div>
	import React from 'react';

	function ExampleApplication() {
	return (
	<>
	<Header />
	<React.StrictMode>
	<>
	<ComponentOne />
	<ComponentTwo />
	class ErrorBoundary extends React.Component {
	constructor(props) {
	super(props);
	this.state = { hasError: false };
	}

	static getDerivedStateFromError(error) {
	// Update state so the next render will show the fallback UI.
	return { hasError: true };
	}
	const App = () => {
	const [isOn, setOn] = useState(false);

	return <div style={{overflow: "hidden"}}>
	<Button onClick={e => {setOn(!isOn)}} >
	Click me
	</Button>
	{
	isOn &&
	<Portal>
	import { useEffect } from "react";
	import { createPortal } from "react-dom";

	const Portal = ({children}) => {
	const mount = document.getElementById("portal-root");
	const el = document.createElement("div");

	useEffect(() => {
	mount.appendChild(el);
	return () => mount.removeChild(el);
	<!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"
	import React from 'react';
	import { PropTypes } from 'prop-types';

	const User = ({ name,age })=> {

	return (
	<div>
	<p>User Name: {name}</p>
	<p>Age: {age}</p>
	</div>
	import React from 'react';
	import User from './User';


	class App extends React.Component {
	render() {
	return (
	<div>
	<User name="Roei" age="30" />
	</div>