Harshmakadia

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

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service

Harshmakadia

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Harshmakadia

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>

Harshmakadia

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

Harshmakadia

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

Harshmakadia

# auto detects a good number of processes to run
worker_processes auto;

#Provides the configuration file context in which the directives that affect connection processing are specified.
events {
    # Sets the maximum number of simultaneous connections that can be opened by a worker process.
    worker_connections 8000;
    # Tells the worker to accept multiple connections at a time
    multi_accept on;
}

Harshmakadia

# Use below nginx version
FROM nginx:1.15.2-alpine
# Copy the build folder of the react app
COPY ./build /var/www
# Copy the ngnix configrations
COPY deployments/nginx.conf /etc/nginx/nginx.conf
# Expose it on port 80
EXPOSE 80
ENTRYPOINT ["nginx","-g","daemon off;"]

Harshmakadia

import React from 'react'

React.createContext({}) // argument is the default starting value

Harshmakadia

import React from 'react';

export default React.createContext({
  products: [
    { id: 'p1', title: 'React 16 Sticker + T-shirt', price: 29.99 },
    { id: 'p2', title: 'Vue.js T-shirt', price: 9.99 },
    { id: 'p3', title: 'Angular T-shirt', price: 8.99 },
    { id: 'p4', title: 'JS Notebook', price: 2.99 }
  ],
  cart: [],

Harshmakadia

import React, { Component } from 'react';

import ShopContext from './shop-context';

class GlobalState extends Component {
  state = {
    products: [
      { id: 'p1', title: 'React 16 Sticker + T-shirt', price: 29.99 },
      { id: 'p2', title: 'Vue.js T-shirt', price: 9.99 },
      { id: 'p3', title: 'Angular T-shirt', price: 8.99 },