Giter VIP home page Giter VIP logo

basic-react's Introduction

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

compositon Vs Inheritance

Inheritance, Bad practice in React : Link

Inheritance

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;

Composition

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 (

{ ({ ad }) => }
) }

export default index;

Nested

Func 01

import Text from './Text' import Emoji from './Emoji'; import Bracket from './Bracket';

const index = () => { return (

{ ({ ad }) => {({ brk }) => } }
) }

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;

Higher Order Component

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

Click {count} times
}

export default withCounter(ClickCounter);

Function 02 mouse increment

import withCounter from '../HOC/withCounter';

const ClickCounter = ({ count, increment }) => { return

Hover {count} times
} export default withCounter(ClickCounter);

Render Props

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;

Context API

Thinking like that Context Api figma

basic-react's People

Contributors

taher267 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.