Initial Reactions ToReact Written in React

InitialReactionsToReactWrittenInReact.js

import React from 'react';
import ReactDom from 'react-dom';

class FirstImpressions extends React.Component {
  const impressionComponents = this._getImpressions();
  render() {
    return(
      <div>
        <h1>I am JSX</h1>
        <p className="a_css_class_name">
          {interpolated_explanation}
        <p/>
        <h3>3 Impressions</h3>
        {impressionComponents} // arrays can be passed!
      </div>
    );
  }
}

class Impression extends React.Component {
  render() {
    return(
      <p className="author">{this.props.author}<p/>
      <p className={`body anotherCssClass ${this.props.sentiment}`}>
        {this.props.body}
      </p>
    );
  }
}

// non react functions have underscore prepended convention
_getImpressions(){
  const impressions = [
    { id: 1, body: 'Interpolation is neat in React!', sentiment: 'positive' },
    { id: 2, body: 'Jsx syntaxt is hard to read', sentiment: 'negative' }
  ];

  return impressions.map((impression) => {
    return (
      <Impression body={impression.body} key={impression.id} sentiment={impression.sentiment} author='yonatan'/>
    );
  });
}