This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
Inheritance, Bad practice in React : Link
React was small component and reuse ability and also independent but it is Dependent on another component
Func 01
import { Component } from 'react';
export default class Emoji extends Component {
addEmoji = ({ text, emoji }) => `${emoji} ${text} ${emoji}`;
render(decortedText) {
let text = `This is default text`;
if (decortedText) {
text = decortedText
}
return (
<div>{text}</div>
)
}
}
import Emoji from './Emoji';
Func 02
class Text extends Emoji { // eslint-disable-next-line no-useless-constructor
constructor(props) {
super(props);
}
render() {
const decoretedText = this.addEmoji({ text: 'This is my text', emoji: "๐ง" });
return super.render(decoretedText);
}
}
export default Text;
Func 03
import React, { Component } from 'react';
import Text from './Text';
class index extends Component { render() { return (
export default index;
Func 01
import React from 'react';
const Text = ({ ad }) => {
const text = I'm default text again
;
return <>{ad ? ad(text, 'EMO') : text}</>
}
export default Text; Func 02 import React, { Component } from 'react'
export default class Emoji extends Component {
ad = (text, emoji) => ${emoji} ${text} ${emoji}
;
render() {
return this.props.children({ ad: this.ad })
}
}
Func 03
import React from 'react' import Text from './Text' import Emoji from './Emoji';
const index = () => { return (
export default index;
Func 01
import Text from './Text' import Emoji from './Emoji'; import Bracket from './Bracket';
const index = () => { return (
export default index; Func 02 import React, { Component } from 'react'
export default class Bracket extends Component {
brk = (text) => [ ${text} ]
;
render() {
return this.props.children({ brk: this.brk })
}
}
Func 02 Prev Composition Emoji Func 01
Func 04
import React from 'react';
const Text = ({ ad, brk }) => {
const text = `I'm default text again`;
return <>{brk ? (ad ? brk(ad(text, '๐')) : brk(text)) : text}</>
}
export default Text;
Function 01 import React from 'react';
const withCounter = (OriginalComponent) => { const newReact = React; // class NewComponent extends React.Component { // state = { // count: 0, // } // incrementCount = _ => this.setState(({ count }) => ({ count: ++count }));
// render() {
// const { count } = this.state;
// return <OriginalComponent count={count} incrementCount={this.incrementCount} />;
// }
// }
// return NewComponent;
const newFunction = _ => {
const [count, incrementCount] = newReact.useState(0);
const increment = _ => incrementCount(c => c + 1);
return <OriginalComponent count={count} increment={increment} />
}
return newFunction;
}
export default withCounter;
Function 02 click increment
import withCounter from '../HOC/withCounter';
const ClickCounter = ({ count, increment }) => { return
export default withCounter(ClickCounter);
Function 02 mouse increment
import withCounter from '../HOC/withCounter';
const ClickCounter = ({ count, increment }) => { return
import { Component } from 'react';
export class Counter extends Component { state = { count: 0, } increamentCount = () => this.setState(({ count }) => ({ count: ++count })); render() { const { count } = this.state; const { myFunc } = this.props; return myFunc(count, this.increamentCount) } }
const Index = () =><> <Counter myFunc={(count, increamentCount) => Hover {count}} />
<Counter myFunc={(count, increamentCount) => Click {count}} /> </>
export default Index;
Thinking like that Context Api figma