Как начать писать на React

Материалы лекции «Как начать писать на React» от @denysdovhan

Лекция нацелена на людей, которые только слышали о React и хотят больше о нем узнать. В ней мы объясним как начать и куда стоит копать, чтобы разобраться в этой библиотеке.

Лектор

Денис Довгань

Software Consultant, ведет курс DogeCodes о разработке на React, спикер крупных конференций и митапов (KharkivJS, OdessaJS, Rolling Scopes Conference в Минске), организатор своих воркшопов и конференций — NodeSchool, ChernivtsiJS.

Twitter • GitHub

Ссылки

• React - A JavaScript library for building user interfaces — сайт React.
• All the fundamental React.js concepts, jammed into this single Medium article — фундаментальные концепции, которые служат основой для React.
• Pete Hunt: React: Rethinking best practices -- JSConf EU 2013 — доклад о том, как и зачем создавался React
• Didact — руководство о том, как написать React своими руками
• State and Lifecycle - React — раздел документации React о состоянии и жизненном цыкле компонентов.
• Handling Events - React — раздел из документации React о работе с событиями.
• React lifecycle methods diagram — диаграма со сравнением методов жизненого цыкла React-компонентов.
• @angular/core vs angular vs react vs vue — сравнение популярности Angular, Angular.js, React и Vue на npm trends.
• Flux | Application Architecture for Building User Interfaces — сайт с описанием Flux-архитектуры.
• Redux — популярная библиотека для управления состоянием в React-приложениях.
• Getting Started with Redux from @dan_abramov on @eggheadio — курс об основах Redux от его создателя.
• Building React Applications with Idiomatic Redux from @dan_abramov on @eggheadio — курс о лучших практиках разработке приложения с React и Redux.
• MobX — популярная библиотека для реактивного управления состоянием.
• Focal — библиотека для реактивного управления состоянием от разработчиков из Grammarly.
• Интенсив по React | Doge Codes — интенсив от Дениса о разработке на React.

Демо

Код из примеров, которые были на лекции:

Простой компонент

import React from 'react';

const App = ({ name }) => <h1>Hello, {name}!</h1>;

// или

function App({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// или

class App extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Часы

import React from 'react';

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

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

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

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

  render() {
    return (
      <div>
        <h2>Time: {this.state.date.toLocaleString()}</h2>
      </div>
    );
  }
}

Простое To–do–приложение

Файл index.js:

import React from "react";
import { render } from "react-dom";
import Input from "./Input";
import Todo from "./Todo";

class App extends React.Component {
  state = {
    input: "",
    todos: []
  };

  handleInputChange = event => {
    if (event.target.value === "") return;

    this.setState({
      input: event.target.value
    });
  };

  handleMarkAsDone = id => event => {
    this.setState(prevState => ({
      todos: prevState.todos.map(
        todo =>
          todo.id === id
            ? {
                ...todo,
                done: !todo.done
              }
            : todo
      )
    }));
  };

  handleAddTodo = event => {
    event.preventDefault();

    this.setState(prevState => ({
      input: "",
      todos: [
        ...prevState.todos,
        {
          id: Date.now(),
          done: false,
          text: prevState.input
        }
      ]
    }));
  };

  handleRemoveTodo = id => event => {
    this.setState(prevState => ({
      todos: prevState.todos.filter(todo => todo.id !== id)
    }));
  };

  render() {
    const { todos, input } = this.state;

    return (
      <div>
        <h1>Simple React To-do</h1>
        <Input
          value={input}
          onChange={this.handleInputChange}
          onSubmit={this.handleAddTodo}
        />
        <ul>
          {todos.map(todo => (
            <Todo
              {...todo}
              onMarkAsDone={this.handleMarkAsDone}
              onDelete={this.handleRemoveTodo}
            >
              {todo.text}
            </Todo>
          ))}
        </ul>
      </div>
    );
  }
}

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

Файл Input.js:

import React from "react";

const Input = ({ value, onChange, onSubmit }) => (
  <form onSubmit={onSubmit}>
    <input type="text" value={value} onChange={onChange} />
    <button type="submit">Add</button>
  </form>
);

export default Input;

Файл Todo.js:

import React from "react";

const Todo = ({ done, id, text, onMarkAsDone, onDelete, children }) => (
  <li>
    <span
      style={{
        textDecoration: done ? "line-through" : "none"
      }}
      onClick={onMarkAsDone(id)}
    >
      {children}
    </span>{" "}
    <button onClick={onDelete(id)}>x</button>
  </li>
);

export default Todo;