lvarayut

function Button({ type, children }) {
  return <button type={type}>{children}</button>;
}

lvarayut

import React, { Component } from 'react';
import styled, { css } from 'styled-components';

...

const border = css`
  ${props => {
    if (props.showBorder) {
      return `
        border: 1px solid ${mainColor};

lvarayut

...

const Thumbnail = styled.img`
  flex-grow: 1;
  width: 300px;
  height: 250px;
  padding: 5px;
  margin: 15px;
  ${props => {
    if (props.showBorder) {

lvarayut

...

const Gallery = styled.div`
  display: flex;
  flex-wrap: wrap;
`;

const Thumbnail = styled.img`
  flex-grow: 1;
  width: 300px;

lvarayut

import React from 'react';
import ReactDOM from 'react-dom';
import { injectGlobal } from 'styled-components';

import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

lvarayut

import React, { Component } from 'react';
import styled from 'styled-components';

const mainColor = 'indianred'

const Title = styled.h1`
  color: ${props => props.color ||  'goldenrod'};
  font-size: 2.8em;
  margin: 25px;
  padding-bottom: 20px;

lvarayut

import React, { Component } from 'react';
import styled from 'styled-components';

const mainColor = 'indianred'

const Title = styled.h1`
  color: ${props => props.color ||  'goldenrod'}
`;

class App extends Component {

lvarayut

import React, { Component } from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  color: goldenrod;
`;

class App extends Component {
  render() {
    return (

lvarayut

On Mac (Host)

VBoxManage modifyvm <VM-Name> --natpf1 "ssh,tcp,,3022,,22"

On Ubuntu (Guest)

sudo apt-get install openssh-server