Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Initial Reactions ToReact Written in React
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'/>
);
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment