jlittlejohn

export interface ButtonProps {
  label?: string;
}

export interface ButtonState {
  //
}

class Button extends React.Component<ButtonProps, ButtonState> {
  constructor(props: ButtonProps) {

jlittlejohn

export interface ButtonProps {
  label?: string;
}

const Button: React.FunctionComponent<ButtonProps> = props => {
  return <button>{props.label}</button>;
};

export default Button;

jlittlejohn

constructor(props) {
  super(props);
  this.state = {
    items: []
  };
}

componentDidMount() {
  fetch("http://example.com/api/endpoint/")
  //fetch("https://cors.io/?http://example.com/api/endpoint/")

jlittlejohn

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {

jlittlejohn

class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 1
    };
  }

  handleButtonChange() {
    this.setState({

jlittlejohn

var users = [
  { id: 1, name: "Chris" },
  { id: 2, name: "Jeff" },
  { id: 3, name: "Julie" },
  { id: 4, name: "Jessica" }
];

class UserList extends React.Component {
  render() {
    var users = this.props.users;

jlittlejohn

var users = [
  { id: 1, name: "Chris" },
  { id: 2, name: "Jeff" },
  { id: 3, name: "Julie" },
  { id: 4, name: "Jessica" }
];

function UserList(props) {
  var users = props.users;
  var usersListItems = users.map(function(user) {

jlittlejohn

var forecast = [
  { day: "Monday", sun: true, humidity: 10 },
  { day: "Tuesday", sun: false, humidity: 100 },
  { day: "Wednesday", sun: false, humidity: 100 },
  { day: "Thursday", sun: true, humidity: 25 },
  { day: "Friday", sun: false, humidity: 100 },
  { day: "Saturday", sun: true, humidity: 15 },
  { day: "Sunday", sun: false, humidity: 100 }
];

jlittlejohn

do {
  text += "The number is " + i;
  i++;
}
while (i < 10);

jlittlejohn

while (i < 10) {
  text += "The number is " + i;
  i++;
}