emmabostian

h1 {
  background-color: $color-main;
  font-family: $font-main;
}

emmabostian

@import 'base/variables';
@import 'base/elements';

emmabostian

import React, { Component } from 'react';

class Recipe extends Component {
  render() {
    return (
      <div className="Recipe"></div>
    );
  }
}

emmabostian

import React, { Component } from 'react';

import Recipe from './Recipe';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      recipes: [
        {

emmabostian

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Recipe extends Component {
  render() {
    const ingredients = this.props.ingredients.map((ingredient, i) => <li key={i}>{ingredient}</li>);
    const steps = this.props.steps.map((step, i) => <li key={i}>{step}</li>);
    
    return (
      <div className="Recipe">

emmabostian

import React, { Component } from 'react';

import Recipe from './Recipe';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      recipes: [
        {

emmabostian

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Navigation extends Component {
  render() {
    return (
      <div className="Navigation"></div>
    );
  }
}

emmabostian

import React, { Component } from 'react';

import Recipe from './Recipe';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      recipes: [
        {

emmabostian

import React, { Component } from 'react';

import Recipe from './Recipe';
import Navigation from './Navigation';

class App extends Component {
  constructor(props) {
    super(props);
    this.selectNewRecipe = this.selectNewRecipe.bind(this);
    this.state = {

emmabostian

import React, { Component } from 'react';

import PropTypes from 'prop-types';

class Navigation extends Component {
  render() {
    return (
      <div className="Navigation">
        <ul>
          {