Skip to content

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

Notifications You must be signed in to change notification settings

dogecodes/lecture-how-to-start-with-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 

Repository files navigation

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

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

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

YouTube

Лектор

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

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

TwitterGitHub

Ссылки

Демо

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

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

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>
    );
  }
}

Файл 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;

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published