decpk

import React from 'react';

function ButtonComponent( {
    buttonName = 'click me',
    backgroundColor = 'purple',
    color = 'white',
    padding = '1rem',
    borderRadius = '4px'
}) {
    return (

decpk

const CourseComplexity = function ({ courseComplexityType }) {
  const studentTypeClass = ["badge", "badge-pill"];

  if (courseComplexityType === "Beginner") studentTypeClass.push("badge-primary");
  else if (courseComplexityType === "Intermediate")
    studentTypeClass.push(" badge-warning");

  return (
    <span className={studentTypeClass.join(" ")}>{courseComplexityType}</span>
  );

decpk

const CourseComplexity = function ( props ) {
  const studentTypeClass = ["badge", "badge-pill"];

  if (courseComplexityType === "Beginner")
    studentTypeClass.push("badge-primary");
  else if (courseComplexityType === "Intermediate")
    studentTypeClass.push(" badge-warning");

  return (
    <span className={studentTypeClass.join(" ")}>{ props.courseComplexityType }</span>

decpk

const CourseCardHeader = function ({ headerText, courseComplexityType }) {
  return (
    <div className="card-header d-flex justify-content-between align-items-center m-0">
      <h5>{headerText}</h5>
      <CourseComplexity courseComplexityType={courseComplexityType} />
    </div>
  );
};

decpk

const CourseCardBody = function ({ courseDescription, children }) {
  return (
    <div className="card-body">
          <p className="card-text">{courseDescription}</p>
          { children }
    </div>
  );
};

export default CourseCardBody;

decpk

const CardComponent = function ({
  headerText,
  courseComplexityType,
  courseDescription,
}) {
  return (
    <div className="card m-4">
      <CourseCardHeader
        headerText={headerText}
        courseComplexityType={courseComplexityType}

decpk

const App = function () {
  return (
    <div>
      <h4 className="mt-4 text-center">Course Library</h4>
      <CardComponent
        headerText="React.js"
        courseComplexityType="Beginner"
        courseDescription="A beginner friendly course of React.js Library"
      />
      <CardComponent

decpk

import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.querySelector("#root"));

decpk

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <h1> Component lifecycle methods </h1>
        );
    }
}

decpk

import React, { Component } from 'react';

class App extends Component {
    constructor() {
        super();
        
        console.log( 'Inside constructor' );
    }

    render() {