Skip to content

Instantly share code, notes, and snippets.

View Harshmakadia's full-sized avatar
🛰️
Working on a secret mission!

Harsh Makadia Harshmakadia

🛰️
Working on a secret mission!
View GitHub Profile
@Harshmakadia
Harshmakadia / Provide Context.jsx
Last active February 24, 2019 10:55
Provide Context
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 },
@Harshmakadia
Harshmakadia / Create Context.jsx
Last active February 24, 2019 10:55
Create Context
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
Harshmakadia / context.jsx
Last active February 24, 2019 10:56
React Create Context
import React from 'react'
React.createContext({}) // argument is the default starting value
@Harshmakadia
Harshmakadia / Dockerfile
Created January 23, 2019 17:23
Docker File for create react app
# 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
Harshmakadia / nginx.conf
Created January 23, 2019 17:21
Ngnix configuration
# 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
Harshmakadia / effect.jsx
Created November 3, 2018 06:01
Effect Hook
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
Harshmakadia / multipleHooks.jsx
Created November 3, 2018 05:46
Mutliple state Hooks
function ExampleWithManyStates() {
// Declare multiple state variables!
const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
// ...
}
@Harshmakadia
Harshmakadia / hooks.jsx
Created November 3, 2018 05:41
React Hooks
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)}>
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
@Harshmakadia
Harshmakadia / ComponentDidCatch.js
Last active August 29, 2018 13:02
ComponentDidCatch()
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