ساختار بندی

[mhshariatipourir]

سلام،

من اگه بخوام فقط برای بخش هایی از سایت از react استفاده کنم باید چیکار کنم؟

از npm برای ساخت پروژه استفاده کنم یا از لینک های cdn ؟

ممنون

[مهدی حسن زاده]

سلام.
شما باید ابتدا cdn ها رو قبل از بسته شدن </body> قرار بدید

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

یک فایل جدید به هر نامی مثلا my_component.js بسازید.
در این فایل کامپوننت خودتون رو میسازید.فرض کنید کامپوننت شما به شکل زیر است.

JavaScript

'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked this.'; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' ); } } const domContainer = document.querySelector('#the_react_container); ReactDOM.render(e(LikeButton), domContainer);

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

'use strict';   const e = React.createElement;   class LikeButton extends React.Component {   constructor(props) {     super(props);     this.state = { liked: false };   }     render() {     if (this.state.liked) {       return 'You liked this.';     }       return e(       'button',       { onClick: () => this.setState({ liked: true }) },       'Like'     );   } }   const domContainer = document.querySelector('#the_react_container); ReactDOM.render(e(LikeButton), domContainer);

در انتها در هر فایلی که میخواید از اون استفاده کنید.کد زیر رو درون کدهای html قرار بدید

<div id="the_react_container"></div>

[نویسنده]

نوشته‌ها