Web Development

I’ve been working with ReactJS for a while now and here are a few things I’ve known that makes it easier for new ReactJS developers to work with ReactJS.

1. Lists

  render() {
    const { taskItems } = this.props;
    return taskItems.map((taskItem) => {
      return (
        <div key={taskItem.id}>
          <TaskItem
            taskItem={taskItem}/>
        </div>
      );
    });
  }

2. Shortcut validation and render

render() {
  {hasContent(taskItems) && <TaskItemsModal />
}

3. Ternary conditions

render() {
  {hasContent(taskItems)
    ? <TaskItemsModal
        showModal={this.state.showModal}
        onHide={this.closeModal}
        taskItems={taskItems} />
    : ""}
}

4. Transferring props

<Parent value="honesty" />

class Parent extends React.Component {
  render () {
    return <Child {...this.props} />
  }
}

5. Managing States

Initializing state

constructor(props) {
  super(props)
  this.state = {
    name: "Eric"
  }
}

Setting state

this.setState({ name: 'Nick' })

Using the state

render () {
  const { name } = this.state;
}

Default State

class People extends React.Component {
  constructor (props) {
    super(props)
    this.state = { loading: false }
  }
}

See: ReactJS States

6. ReactJS synthetic events

class UserForm extends React.Component {
  constructor() {
    this.onChange = this.onChange.bind(this);
    this.state = {
      value: ''
    }
  }

  onChange (event) {
    this.setState({ value: event.target.value })
  }

  render () {
    <input type="text"
        value={this.state.value}
        onChange={this.onChange} />
  }
}

Reference: ReactJS Events