Skip to content

Instantly share code, notes, and snippets.

View sabesansathananthan's full-sized avatar
:octocat:
Work

Sathananthan Sabesan sabesansathananthan

:octocat:
Work
65 followers · 13 following
View GitHub Profile
@sabesansathananthan
sabesansathananthan / package.json
Created November 3, 2019 09:59
Button file package.json for React best practices
{
"main": 'Button.js'
}
@sabesansathananthan
sabesansathananthan / Button.js
Last active November 3, 2019 13:44
stateless Class component in React Best practices in React
import React, { Component } from 'react';
class Button extends Component {
render() {
const { children, color, onClick } = this.props;
return (
<button onClick={onClick} className={`Btn ${color}`}>
{children}
</button>
);
@sabesansathananthan
sabesansathananthan / Button.js
Created November 3, 2019 13:56
React functional Component React Best Practice
import React from 'react';
export default function Button({ children, color, onClick }) {
return (
<button onClick={onClick} className={`Btn ${color}`}>
{children}
</button>
);
}
@sabesansathananthan
sabesansathananthan / divComponent.js
Created November 5, 2019 16:30
React best practice div component example
return (
<div>
<li>Content</li>
</div>
);
@sabesansathananthan
sabesansathananthan / liComponent.js
Created November 5, 2019 16:31
React best practice li component example
return (
<li>Content</li>
);
@sabesansathananthan
sabesansathananthan / Foo.js
Created November 5, 2019 17:45
example 1 for react best practice to handle this
class Foo extends Components {
constructor(props) {
super(props);
this.state = { message: "Hello" };
}
logMessage() {
const { message } = this.state;
console.log(message);
}
render() {
@sabesansathananthan
sabesansathananthan / Bar.js
Created November 5, 2019 18:17
example 1 for react best practice to handle this
class Bar extends Components {
constructor(props) {
super(props);
this.state = { message: "Hello" };
}
logMessage() {
const { message } = this.state;
console.log(message);
}
render() {
@sabesansathananthan
sabesansathananthan / Hello.js
Created November 5, 2019 18:25
example 3 for react best practice to handle this
class Hello extends Components {
constructor(props) {
super(props);
this.state = { message: "Hello" };
this.logMessage = this.logMessage.bind(this);
}
logMessage() {
const { message } = this.state;
console.log(message);
}
@sabesansathananthan
sabesansathananthan / Message.js
Created November 5, 2019 18:34
example 4 for react best practice to handle this
class Message extends Components {
constructor(props) {
super(props);
this.state = { message: "Hello" };
}
logMessage = () => {
const { message } = this.state;
console.log(message);
}
render() {
@sabesansathananthan
sabesansathananthan / Welcome.js
Last active November 6, 2019 18:31
React best practice example for propTypes.
import React, { Component } from "react";
import PropTypes from "prop-types";
class Welcome extends Component {
render() {
const { name } = this.props;
return <h1>Welcome, {name}</h1>;
}
}