const element = (
  <div className="shopping-list">
    <h1>Shopping List for {props.name}</h1>
    <ul>
      <li>Instagram</li>
      <li>WhatsApp</li>
      <li>Oculus</li>
    </ul>
  </div>
);

const element = React.createElement(
  "div",
  { className: "shopping-list" },
  React.createElement("h1", null, "Shopping List for ", props.name),
  React.createElement(
    "ul",
    null,
    React.createElement("li", null, "Instagram"),
    React.createElement("li", null, "WhatsApp"),
    React.createElement("li", null, "Oculus")
  )
);

const Avatar = props => (
  <div>
    <img className={"avatar"} src={props.url} alt={props.description} />
    <p>Olá, {props.user.name}</p>
  </div>
);

Avatar.propTypes = {
  url: PropTypes.string,
  description: PropTypes.string.isRequired,
  user: PropTypes.shape({
    name: PropTypes.string
  }).isRequired
};

Avatar.defaultProps = {
  url: 'https://editorasanar.com.br/avatar.png'
};

// Em outro local...
<Avatar
   user={user}
   url={'http://api.dominio.com/imagem.png'}
   description={`Foto de ${user.name}`} />

class Clock extends React.Component {
  state = {date: new Date()};

  componentDidMount() {
    this.timerID = setInterval(this.tick, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick = () => {
    this.setState({ date: new Date() });
  }

  render() {
    return (
      <div>
        <h1>Olá, React!</h1>
        <h2>Agora são {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

// Errado
this.state.comment = 'Hello';

// Correto
this.setState({
  comment: 'Hello'
});

// Errado
this.setState({
  counter: this.state.counter + this.props.increment,
});


// Correto
this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});

// Stateless ES5
function Welcome(props) {
  return <h1>Hello, { props.name }</h1>;
}


// Stateless ES6+
const Welcome = props => <h1>Hello, { props.name }</h1>;


// ES6 Class syntax
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

npx create-react-app meu-app

cd meu-app
npm start

- node
- npm 5.2.0+
- seu editor de texto preferido

import React from 'react';
import {
    FlatList,
    Modal,
    Platform,
    Text,
    View
} from 'react-native';

.filter {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  color: #47525E;
}

.header {
  min-height: 65px;
  background: #fff;
  padding: 10px;
}

{
    filter: {
      margin: 0,
      padding: 0,
      fontFamily: 'sans-serif',
      color: '#47525E'
    },
    header: {
      minHeight: 65,
      background: '#fff',
      padding: 10
    }
}

create-react-native-app MeuApp

cd MeuApp
npm start

- node
- npm 5.2.0+
- seu editor de texto preferido

npm install -g create-react-native-app

- watchman
- JDK8+
- Android Studio
- Xcode (MacOS)

npm run android

npm run ios

- instale em seu dispositivo o aplicativo Expo client
- esteja conectado na mesma rede
- use Expo client para ler o QRCode no terminal

react-native init MeuApp

cd MeuApp
npm start

- node
- npm / yarn
- watchman
- JDK8+
- Android Studio
- Xcode (MacOS)
- seu editor de texto preferido

npm install -g react-native-cli

react-native run-android

react-native run-ios