We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

React

Хэрэглэгчийн интерфэйс бүтээх Javascript сан

Declarative

React нь хэрэглэгчийн интерактив интерфейс бүтээхийг хялбарчилдаг. Aппликейшны state бүрт зориулсан энгийн бүтэц зохион байгуулахаас гадна, React нь ѳгѳгдѳл ѳѳрчлѳгдѳхѳд яг зѳв компонентоо ѳѳрчлѳн рендер хийдэг.

Declarative бүтэц нь кодыг тань debug хийхэд хялбар болгохоос гадна, ажиллагаа нь илүү тодорхой болох юм.

Компонент-д тулгуурласан

Бие даан state-ээ удирддаг маш энгийн компонент бичиж, эдгээрийг хольж найруулан нарийн бүтэцтэй хэрэглэгчийн интерфэйс бүтээ.

Компонентийн логик нь тэмплэйт-ээр бус JavaScript-ээр бичигддэг учраас ѳгѳгдлийг апп хооронд хялбар дамжуулж, DOM-оос state-ээ тусд нь байлгаж чадна.

Ганц удаа сур, Хаа сайгүй ашигла

Node ашиглан сервер талдаа React-ыг рендер хийж ашиглаж болдог мѳн гар утасны апп хийх бол React Native ашиглана.


Энгийн Компонент

React компонент нь render() функцыг ашиглан орж ирсэн ѳгѳгдлийг харуулдаг. Энэ жишээ нь XML-адил синтакс болох JSX ашиглаж байна. Конпонентод гаднаас ѳгсѳн ѳгѳгдлийг render() дотор this.props ашиглан авдаг.

React-д заавал JSX ашиглах шаардлагагүй бѳгѳѳд Babel REPL ашиглан JSX хѳрвүүлэгдэн Javascript болохыг харж болно.

Live JSX Editor
class HelloMessage extends React.Component {
  render() {
    return <div>Сайн уу {this.props.name}</div>;
  }
}

root.render(<HelloMessage name="Taylor" />);
Result
Сайн уу Taylor

Стейттэй Компонент

Гадна талаас(this.props-оор) ѳгѳгдлийг авахаас гадна, компонент ѳѳрѳѳ доторх ѳгѳгдлѳѳ удирддаг(this.state ашиглaдаг). Хэрвээ компонентийн доторх ѳѳрийн ѳгѳгдѳл нь ѳѳрчлѳгдвѳл render() функц дахин дуудагдан рендер хийгдсэн хэсэг шинэчлэгддэг.

Live JSX Editor
class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {seconds: 0};
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1,
    }));
  }

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

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

  render() {
    return <div>Секунд: {this.state.seconds}</div>;
  }
}

root.render(<Timer />);
Result
Секунд: 2

Аппликейшн

props болон state ашиглан жижигхэн жагсаалтын аппликейшн хийе. Энэ жишээ нь state ашиглан хэрэглэгчийн оруулсан текст болон нийт жагсаалтыг хянадаг. Эвэнт үсрэхэд барьж авах хэсэг элементэд бичигдсэн ч, ажиллах үед тухайн элементээс бус, хуудсаас хайх(event-delegation) болдог.

Live JSX Editor
class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {items: [], text: ''};
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>Жагсаалт</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">Юу хийж дуусгах ёстой вэ?</label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>Нэмэх #{this.state.items.length + 1}</button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({text: e.target.value});
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.state.text.length === 0) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now(),
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: '',
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

root.render(<TodoApp />);
Result

Жагсаалт

    Нэмэлт ашигласан компонент

    React нь бусад сан, фрэймворктой асуудалгүй зохицдог. Энэ жишээ нь remarkable гэх Markdown-ын нэмэлт сан ашиглан <textarea> -д бичигдсэн зүйлийг шууд хѳрвүүлж байна.

    Live JSX Editor
    class MarkdownEditor extends React.Component {
      constructor(props) {
        super(props);
        this.md = new Remarkable();
        this.handleChange = this.handleChange.bind(this);
        this.state = { value: 'Hello, **world**!' };
      }
    
      handleChange(e) {
        this.setState({ value: e.target.value });
      }
    
      getRawMarkup() {
        return { __html: this.md.render(this.state.value) };
      }
    
      render() {
        return (
          <div className="MarkdownEditor">
            <h3>Оролт</h3>
            <label htmlFor="markdown-content">
              Markdown бичнэ үү.
            </label>
            <textarea
              id="markdown-content"
              onChange={this.handleChange}
              defaultValue={this.state.value}
            />
            <h3>Гаралт</h3>
            <div
              className="content"
              dangerouslySetInnerHTML={this.getRawMarkup()}
            />
          </div>
        );
      }
    }
    
    root.render(<MarkdownEditor />);
    
    Result

    Оролт

    Гаралт

    Hello, world!