معرفی React

React در یک کلام : یک کتابخانه جاوا اسکریپت برای ایجاد رابط کاربری

اعلامیه

React ساخت رابط های کاربری تعاملی را بی‌دردسر می‌کند. شما نمایش قسمت‌های مختلف برنامه خود را طراحی کنید و React به طور کارآمدی کامپوننت‌های برنامه شما را مطابق با تغییرات بوجود آمده در دیتاها آپدیت می‌کند و به شما تحویل می‌دهد.

دیدگاه‌های اعلام شده کد شما را قابل پیش‌بینی‌تر کرده و رفع اشکالات آن راحت‌تر می‌شود.

مبتنی بر کامپوننت‌ها

کامپوننت‌ها را به صورت دسته‌بندی شده و طوری که حالت خود را مدیریت کنند، بسازید، سپس آنها را با یکدیگر ترکیب کنید تا رابط‌های کاربری پیچیده را تشکیل دهند.

از آن جایی که منطق کامپوننت‌ها با جاوا اسکریپت نوشته شده است، به راحتی می‌توانید دیتاهای غنی را از طریق برنامه خود منتقل کنید حالتش را خارج از DOM نگه دارید.

یک بار یاد بگرید، هرجایی کد بنویسید

ما هیچ پیش فرضی بر سایر تکنولوژی‌های شما اعمال نکرده‌ایم، در نتیجه می‌توانید طرح‌های جدید خود را در React بدون بازنویسی کدها ایجاد کنید.

همچنین React می‌تواند به وسیلۀ Node روی سرور رندر کند و به وسیلۀ React Native به برنامه‌های موبایل قدرت ببخشد.

یک کامپوننت ساده

کامپوننت‌های React یک روش render() را پیاده سازی می‌کنند که اطلاعات ورودی را گرفته و چیزی که باید نمایش داده شود را برمی‌گرداند. این مثال از یک سینتکس مشابه XML به نام JSX استفاده می‌کند. اطلاعات ورودی که وارد برنامه می‌شود به وسیلۀ دستور render() و از طریق دستور this.props قابل دسترسی خواهد بود.
JSX اختیاری بوده و لزوماً نیاز به React ندارد. از طریق Babel REPL می‌توانید کد خام جاوا اسکریپت تولید شده توسط JSX در مرحلۀ تدوین را مشاهده نمایید.

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  mountNode
);

خروجی : Hello Taylor

یک کامپوننت محاسبه کننده

علاوه بر دریافت اطلاعات ورودی (با دسترسی از طریق دستور this.props)، یک کامپوننت می‌تواند حالت داخلی خود را حفظ کند (مجدداً با دسترسی از طریق دستور this.props). وقتی اطلاعات حالت یک کامپوننت تغییر می‌کند، مارکآپ رندر شده با فراخوانی دوبارۀ render() آپدیت می‌شود.

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

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

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

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

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

ReactDOM.render(<Timer />, mountNode);

خروجی :Seconds: *

یک برنامه

با استفاده از دستورهای props و state می‌توانیم یک برنامۀ کوچک ToDo را بسازیم. این مثال از دستور state برای دنبال کردن لیست موارد موجود و همینطور متنی که کاربر وارد کرده است، استفاده می‌کند. اگرچه به نظر می‌رسد کنترل کنندۀ رویدادها به صورت خطی رندر شده است، آنها با استفاده از event delegation جمع‌آوری و پیاده‌سازی شده‌اند.

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>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            What needs to be done?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{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) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(prevState => ({
      items: prevState.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>
    );
  }
}

ReactDOM.render(<TodoApp />, mountNode);

یک کامپوننت استفاده کنندۀ پلاگین خارجی

React انعطاف‌پذیر است و به شما امکان می‌دهد با کتابخانه‌ها و فریم‌ورک‌های دیگر ارتباط برقرار کنید. این مثال از remarkable (یک کتابخانۀ Markdown خارجی) برای تبدیل بی‌درنگ مقدار دستور <textarea> استفاده می‌کند.

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: 'Hello, **world**!' };
  }

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

  getRawMarkup() {
    const md = new Remarkable();
    return { __html: md.render(this.state.value) };
  }

  render() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <label htmlFor="markdown-content">
          Enter some markdown
        </label>
        <textarea
          id="markdown-content"
          onChange={this.handleChange}
          defaultValue={this.state.value}
        />
        <h3>Output</h3>
        <div
          className="content"
          dangerouslySetInnerHTML={this.getRawMarkup()}
        />
      </div>
    );
  }
}

ReactDOM.render(<MarkdownEditor />, mountNode);

مجموعه: Reactبرچسب ها ,
1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5٫00 out of 5)
Loading...
counter customizable free hit