Skip to content

Instantly share code, notes, and snippets.

Avatar
:octocat:

Abhishek Jakhar abhishekjakhar

:octocat:
View GitHub Profile
@abhishekjakhar
abhishekjakhar / Description.js
Created Jun 17, 2019
React Fragment (Description Component)(Keyed Fragment)
View Description.js
import React from 'react';
const teachers = [
{ id: 1, name: 'Abhishek', subject: 'React' },
{ id: 2, name: 'Aakash', subject: 'JavaScript' }
]
const Description = () => (
<dl>
{
@abhishekjakhar
abhishekjakhar / TableColumns.js
Created Jun 16, 2019
React Fragment (Table Columns Component) (div)
View TableColumns.js
import React from 'react';
const TableColumns = (props) => {
const { name, subject } = props;
return (
<div>
<td>{name}</td>
<td>{subject}</td>
</div>
@abhishekjakhar
abhishekjakhar / TableColumns.js
Last active Jun 16, 2019
React Fragment (Table Columns Component) (React.Fragment)
View TableColumns.js
import React from 'react';
const TableColumns = (props) => {
const { name, subject } = props;
return (
<React.Fragment>
<td>{name}</td>
<td>{subject}</td>
</React.Fragment>
@abhishekjakhar
abhishekjakhar / Table.js
Last active Jun 17, 2019
React Fragment (Table Component)
View Table.js
import React from 'react';
import TableColumns from './TableColumns';
const teachers = [
{ id: 1, name: 'Abhishek', subject: 'React' },
{ id: 2, name: 'Aakash', subject: 'JavaScript' }
]
const Table = () => (
@abhishekjakhar
abhishekjakhar / index.css
Last active May 5, 2019
index.css (Mocktail App)
View index.css
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');
/* Basic */
*,
*::after,
*:before {
margin: 0;
padding: 0;
box-sizing: inherit;
@abhishekjakhar
abhishekjakhar / Spinner.js
Last active May 2, 2019
Spinner.js (Mocktail App)
View Spinner.js
import React from 'react';
const Spinner = () => (
<div className="spinner">
<div className="bounce1"></div>
<div className="bounce2"></div>
<div className="bounce3"></div>
</div>
);
@abhishekjakhar
abhishekjakhar / index.js
Created Apr 30, 2019
index.js (Mocktail App)
View index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
@abhishekjakhar
abhishekjakhar / App.js
Created Apr 30, 2019
updateMocktail Method
View App.js
updateMocktail = mocktail => {
const newMocktail = mocktail;
this.setState(state => {
if (state.mocktail === newMocktail) {
return null;
} else {
return { mocktail };
}
})
}
@abhishekjakhar
abhishekjakhar / App.js
Created Apr 30, 2019
updateMocktail Function
View App.js
updateMocktail = mocktail => {
const newMocktail = mocktail;
this.setState({
mocktail
})
}
View Mocktail.js
import React, { Component } from 'react';
import Spinner from './Spinner';
class Mocktail extends Component {
state = {
isLoading: false
}
You can’t perform that action at this time.