פתיחת תקית components מתחת לתקית src

import React, { Component } from 'react';
class Counter extends Component {
    state = {
        count: 0
    };
    render() { 
        return (
            <div>
                <h1>hello all1 : {this.formatCount()}</h1>
            </div>
        );
    }

    formatCount(){
        const {count} = this.state;
        return count === 0 ? "zero" : count;
    }
}
 
export default Counter;

בהמשך יש התיחסות לסטייל , כתיבת קוד עיצוב בדף או בתוך האלמנט

import React, { Component } from 'react';
class Counter extends Component {
    state = {
        count: 0,
        imageUrl: 'https://picsum.photos/200'
    };

    styles ={
        fontSize: 50,
        fontWeight: "bold"
    };

    render() { 
        return (
            <div>
                <img src={this.state.imageUrl} alt=""/>
                <div style={this.styles} className="badge badge-primary m-2">hello all : {this.formatCount()}</div>
                <div style={{fontSize: 10}} className="badge badge-primary m-2">hello all2 </div>
            </div>
        );
    }

    formatCount(){
        const {count} = this.state;
        return count === 0 ? "zero" : count;
    }
}
 
export default Counter;

דוגמה לסטייל שרשום כפונקציה ומושפע ממשתנה שנמצא בסטייט getBandgeClasses

import React, { Component } from 'react';
class Counter extends Component {
    state = {
        count: 1,
        imageUrl: 'https://picsum.photos/200'
    };

    styles ={
        fontSize: 50,
        fontWeight: "bold"
    };

    render() { 
        return (
            <div>
                <div className={this.getBandgeClasses()}> {this.formatCount()}</div>
                <div style={{fontSize: 10}} className="badge badge-secondary  btm-sm">hello all2 </div>
            </div>
        );
    }

    getBandgeClasses() {
        let classes = "badge m-2 badge-";
        classes += this.state.count === 0 ? "warning" : "primary";
        return classes;
    }

    formatCount(){
        const {count} = this.state;
        return count === 0 ? "zero" : count;
    }
}
 
export default Counter;