Ionic 4 và React
Các ứng dụng di động được xây dựng bằng React thường sử dụng React Native cho thư viện mà chúng lựa chọn. Ionic có nhiệm vụ tương tự, nhưng đạt được nó theo một cách khác.
Được xây dựng với trình biên dịch StencilWeb Component , tất cả các thành phần Ionic và hệ thống plugin xung quanh có thể được kết hợp vào bất kỳ dự án JavaScript nào.
Điều tốt nhất về điều này là ta có thể giữ nguyên các hệ thống xây dựng của riêng mình và sử dụng Ionic để “tăng cường” cho dự án của ta . Ta sẽ xem xét vấn đề này bằng cách tạo một dự án React với Create React App .
Tạo một dự án React mới
Để tạo một dự án React mới với create-react-app react create-react-app , bạn có thể sử dụng npx hoặc cài đặt create-react-app react create-react-app trên phạm vi global :
# Create new project without install $ npx create-react-app react-ionic --typescript # OR $ npm install create-react-app -g $ create-react-app react-ionic --typescript # Open the project in VS Code or your editor of your choice $ cd react-ionic $ code . # Run the project in the browser $ npm run start Bạn sẽ lưu ý bây giờ ta có thể sử dụng cờ --typescript để tạo một dự án TypeScript với Create React App.
Cài đặt Ionic trong ứng dụng React của ta
Bây giờ ta sẽ phải cài đặt Ionic cho React ( @ionic/react ) và các phụ thuộc xung quanh. Đối với React, Ionic hiện phụ thuộc vào react-router , vì vậy ta cũng cần cài đặt nó:
$ npm install @ionic/core @ionic/react react-router react-router-dom @types/react-router @types/react-router-dom Lưu ý @ionic/react vẫn đang trong giai đoạn thử nghiệm tại thời điểm viết bài này.
Sử dụng Ionic với React
Ở giai đoạn này, ta có thể sử dụng Ionic giống như bất kỳ phụ thuộc nào khác trong dự án của ta . Mỗi thành phần đã được xuất riêng và có thể được nhập như vậy .
Trước tiên, hãy truy index.tsx và thêm các kiểu phù hợp trong @ionic/core :
import React from 'react'; import ReactDOM from 'react-dom'; // Ionic 4 styles import '@ionic/core/css/core.css'; import '@ionic/core/css/ionic.bundle.css'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(<App />, document.getElementById('root')); serviceWorker.unregister(); Sau đó, bên trong App.tsx , ta có thể nhập các thành phần Ionic và sử dụng chúng theo cách ta muốn!
import { IonApp, IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent, IonHeader, IonTitle, IonToolbar, } from '@ionic/react'; import React, { Component } from 'react'; class App extends Component { state = { chomps: 0, }; unchomp = () => { if (this.state.chomps > 0) { this.setState({ chomps: this.state.chomps -= 1, }); } }; chomp = () => { this.setState({ chomps: this.state.chomps += 1, }); }; render() { return ( <IonApp> <IonHeader> <IonToolbar color="primary"> <IonTitle>Alligator</IonTitle> </IonToolbar> </IonHeader> <IonContent> <IonCard> <img src="https://images.unsplash.com/photo-1549240923-93a2e080e653?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2165&q=80" /> <IonCardHeader> <IonCardSubtitle>Crocco</IonCardSubtitle> <IonCardTitle> You've been chomped {this.state.chomps} times! </IonCardTitle> </IonCardHeader> <IonCardContent> <IonButton onClick={this.chomp}>Chomp</IonButton> <IonButton onClick={this.unchomp}>UnChomp</IonButton> </IonCardContent> </IonCard> </IonContent> </IonApp> ); } } export default App; Đây là kết quả làm việc chăm chỉ của ta :
Các tin liên quan
