suzdalnitski

// style.js:
const style = {
    form: {
        margin: 50,
        padding: 10,
        width: 300,
        border: "1px solid black",
        backgroundColor: "black",
        color: "white"
    },

suzdalnitski

render() {
  const { firstNameError, firstName } = this.state;

  return (
    <div
        style={{
          margin: 50,
          padding: 10,
          width: 300,
          border: "1px solid black",

suzdalnitski

class SimpleForm extends React.Component {
  state = {
    firstName: "",
    firstNameError: "",
  };

  validateName = name => {
    const regex = /[A-Za-z]{3,}/;

    return !regex.test(name)

suzdalnitski

class SimpleForm extends React.Component {
  state = {
    firstName: "",
    lastName: ""
  };

  onFirstNameChange = event =>
    this.setState({
      firstName: event.target.value
    });

suzdalnitski

class SimpleForm extends React.Component {
  state = {
    firstName: "",
  };

  onFirstNameChange = event =>
    this.setState({
      firstName: event.target.value
    });

suzdalnitski

import React from "react";

class SimpleForm extends React.Component {
  render() {
    return (
      <div>
        <input type="text" name="firstName" />
        <Greetings firstName="John" />
      </div>
    );

suzdalnitski

class Greetings extends React.Component {
  render() {
    return (
      <div>Hey you! {this.props.firstName} {this.props.lastName}!</div>
    );
  }
}

suzdalnitski

const Greetings = ({ firstName, lastName }) => <div>Hey you! {firstName} {lastName}!</div>;

suzdalnitski

const Greetings = (props) => <div>Hey you! {props.firstName} {props.lastName}!</div>;

const App = () => (
  <div>
    <Greetings firstName="John" lastName="Smith" />
  </div>
);

suzdalnitski

const App = () => (
  <div className="App">
    ...
  </div>
);

export default App;