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 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 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

import React from 'react';

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

decpk

import React, { Component } from 'react';
import App from './App';

class App extends Component {
    render() {
        return (
            <h1>Hello {this.props.message}</h1>
        );
    }
}

decpk

const React = require( 'react' );
const CreateReactClass = require( 'create-react-class' );

const App = CreateReactClass( {
    getDefaultProps() {
        return {
            message: 'world'
        }
    },
    render() {

decpk

import React, { Component } from 'react';

class App2 extends Component {

    state = {
        message: 'world'
    }
    render() {
        return (
            <h1>Hello {this.state.message} in ES6 classes outside of constuctor</h1>

decpk

import React, { Component } from 'react';

class App2 extends Component {
    constructor( props ) {
        super( props );
        this.state = {
            message: 'world'
        }
    }
    render() {

decpk

const React = require( 'react' );
const CreateReactClass = require( 'create-react-class' );

const App = CreateReactClass( {
    getInitialState() {
        return {
            message: 'world'
        }
    },
    render() {

decpk

const React = require( 'react' );

class App extends React.Component{

    render() {
        return (
            <h1>Hello world</h1>
        )
    }
}