Render a Class Component to the DOM

• The past few post focused on components and composition, so the rendering was done for you behind the scenes. However, none of the React code you write will render to the DOM without making a call to the ReactDOM API.

• Just so you remember:
  ReactDOM.render(componentToRender, targetNode)

• The first argument is the React component that you want to render.

• The second argument is the DOM node that you want to render that component within.

• React components are passed into ReactDOM.render() a little differently than JSX elements. In JSX elements, you pass in the name of the element that you want to render and for React components, you need to use the same syntax as if you were rendering a nested component.

• Example, ReactDOM.render(, targetNode). You use this syntax for both ES6 class components and functional components.

• Now we're doing challenges that FreeCodeCamp has given us.

• Both the Fruits and Vegetables components are defined for you behind the scenes. Render both components as children of the TypesOfFood component, then render TypesOfFood to the DOM. There is a div with id='challenge-node' available for us to use.
  

class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        {/* Change code here */}
      </div>
    );
  }
};

• Answer:

class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        <Fruits/>
        <Vegetables/>
      </div>
    );
  }
};


ReactDOM.render(<TypesOfFood/>, document.getElementById('challenge-node'))

• Your console would look like this after completed.

Types of Food:

Fruits:

Non-Citrus:

• Apples
• Blueberries
• Strawberries
• Bananas ###Citrus:
• Lemon
• Lime
• Orange
• Grapefruit
• Vegetables:
• Brussel Sprouts
• Broccoli
• Squash

Larson, Q. (2014). Render a Class Component to the DOM. FreeCodeCamp. https://www.freecodecamp.org/learn/front-end-development-libraries/react/render-a-class-component-to-the-dom

Let's Write a React Component From Scratch

• Now that we've learned the basics of JSX and React components, it's time to write a component on your own.

• Remember, a React component is an ES6 class which extends React.Component.

• Let's Define a class MyConsole that extends React.Component. Its render method should return a div that contains an h1 tag with the text: My First Console Was Playstation! in it. Use this text exactly, the case and punctuation matter. Make sure to call the constructor for your component, too.

• Render the component to the DOM using ReactDOM.render(). There is a div with id='challenge-node' available.

Code:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>My First Console Was Playstation!</h1>
    )
  }

}
ReactDOM.render(<MyComponent/>, document.getElementById('challenge-node'))

• console would render My First Console Was Playstation!