×

Cài đặt thư viện Preact trong JavaScript

Avatar of admin
admin 2 Views

Preact là một thư viện JavaScript nhỏ gọn dành cho việc phát triển giao diện người dùng, dựa trên mô hình lập trình theo hướng thành phần (component-based). Với kích thước nhẹ hơn nhiều so với React, Preact trở thành sự lựa chọn hấp dẫn cho các dự án cần tối ưu hóa về hiệu suất và tốc độ tải trang. Bài viết này sẽ hướng dẫn chi tiết cách cài đặt và bắt đầu sử dụng Preact trong dự án JavaScript của bạn.

1. Tổng quan về Preact

Preact là một thư viện nguồn mở dựa trên React với thao tác API tương tự, nhưng có kích thước nhỏ hơn đáng kể. Điều này giúp Preact trở thành lựa chọn lý tưởng cho các dự án yêu cầu tối ưu hóa mạnh về kích thước gói và hiệu suất tải trang. Preact giữ lại nhiều tính năng tuyệt vời của React nhưng đơn giản hóa và giảm thiểu kích thước.

  • Kích thước nhỏ gọn: Chỉ khoảng 3KB sau khi nén và gzip, trong khi React có kích thước lớn hơn nhiều.
  • Khả năng tương thích: Hầu hết các thành phần React đều có thể chuyển sang Preact mà không cần sửa đổi nhiều.
  • Hiệu suất cao: Nhờ vào kích thước nhẹ, Preact cải thiện đáng kể thời gian tải trang và hiệu suất thực thi.

2. Cài đặt Preact

2.1 Sử dụng npm hoặc yarn

Cách thông dụng và dễ dàng nhất để cài đặt Preact là sử dụng npm hoặc yarn. Đây là các công cụ quản lý gói phổ biến cho các dự án JavaScript.

Bước 1: Khởi tạo dự án

Nếu bạn chưa có dự án Node.js, hãy khởi tạo một dự án mới:

mkdir my-preact-app
cd my-preact-app
npm init -y

Bước 2: Cài đặt Preact và các công cụ cần thiết

Sử dụng lệnh sau để cài đặt Preact:

npm install preact

Hoặc nếu bạn sử dụng yarn:

yarn add preact

2.2 Sử dụng Preact CLI

Preact có cung cấp một công cụ CLI giúp bạn khởi tạo dự án mới nhanh chóng với cấu hình đã được thiết lập sẵn. Đây là phương pháp nhanh gọn và tiện lợi để bắt đầu một dự án mới với Preact.

Bước 1: Cài đặt Preact CLI

Trước hết, hãy cài đặt Preact CLI một cách toàn cục để sử dụng lệnh preact trong terminal:

npm install -g preact-cli

Bước 2: Tạo dự án mới

Sử dụng lệnh sau để tạo một dự án mới:

preact create default my-preact-app
cd my-preact-app
npm install

3. Tạo một ứng dụng đơn giản với Preact

3.1 Cấu trúc dự án

Sau khi khởi tạo dự án, bạn sẽ có một cấu trúc thư mục tương tự như sau:

my-preact-app/
├── node_modules/
├── public/
├── src/
│   ├── components/
│   │   └── App.js
│   └── index.js
├── package.json
└── webpack.config.js (nếu có)

3.2 Tạo thành phần (Component) đầu tiên

Bây giờ, chúng ta sẽ tạo một thành phần đơn giản hiển thị câu chào "Hello, Preact!".

Bước 1: Chỉnh sửa tệp src/index.js

Mở tệp src/index.js và cập nhật nội dung sau:

import { h, render } from 'preact';
import App from './components/App';

render(<App />, document.getElementById('root'));

Bước 2: Tạo thành phần App

Điều hướng tới thư mục src/components và mở tệp App.js (nếu chưa có, bạn hãy tạo file này). Sau đó, thêm mã sau:

import { h } from 'preact';

const App = () => (
    <div>
        <h1>Hello, Preact!</h1>
    </div>
);

export default App;

3.3 Chạy ứng dụng

Để chạy ứng dụng, bạn cần cấu hình Webpack hoặc sử dụng Preact CLI như đã thiết lập ở phần trên. Giả sử bạn đang sử dụng Preact CLI, chạy lệnh sau:

npm run dev

Bây giờ, bạn có thể mở trình duyệt và truy cập http://localhost:8080 để thấy ứng dụng đơn giản của bạn hoạt động với dòng chữ "Hello, Preact!".

4. Sử dụng JSX với Preact

JSX là một cú pháp mở rộng của JavaScript được sử dụng cùng với React và Preact để viết mã giống như HTML trực tiếp trong JavaScript. Để sử dụng JSX trong Preact, bạn cần cài đặt thêm bộ biên dịch Babel hoặc sử dụng TypeScript.

4.1 Cài đặt Babel

Nếu bạn chưa cài đặt Babel, cần thêm các gói sau:

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

4.2 Cấu hình Babel

Tạo tệp .babelrc trong thư mục gốc của dự án và thêm nội dung sau:

{
  "presets": [
    ["@babel/preset-env", { "targets": "defaults" }],
    ["@babel/preset-react", { "pragma": "h" }]
  ]
}

Điều này cấu hình Babel để sử dụng JSX với cú pháp của Preact.

4.3 Cấu hình Webpack

Nếu bạn đang sử dụng Webpack, bạn cần thêm cấu hình để hỗ trợ JSX. Cập nhật webpack.config.js như sau:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'react': 'preact/compat',
      'react-dom': 'preact/compat'
    }
  }
};

4.4 Sử dụng JSX trong Preact

Bây giờ bạn có thể viết mã Preact sử dụng JSX. Cập nhật tệp src/components/App.js như sau:

/** @jsx h */
import { h } from 'preact';

const App = () => (
    <div>
        <h1>Hello, Preact with JSX!</h1>
    </div>
);

export default App;

Lưu ý rằng chú thích /** @jsx h */ ở đầu tệp là quan trọng để Babel biết rằng bạn đang sử dụng hàm h của Preact cho việc chuyển đổi các phần tử JSX.

5. Sử dụng HOCs và Hooks trong Preact

5.1 Higher-Order Components (HOCs)

HOCs là một kỹ thuật trong React và Preact dùng để tái sử dụng logic thành phần. Một HOC là một hàm nhận vào một thành phần và trả về một thành phần mới.

Ví dụ một HOC đơn giản:

import { h } from 'preact';

const withLogger = (Component) => {
    return (props) => {
        console.log('Rendering', Component.name);
        return <Component {...props} />;
    };
};

const BaseComponent = () => (
    <div>Base Component</div>
);

const EnhancedComponent = withLogger(BaseComponent);

export default EnhancedComponent;

5.2 Hooks trong Preact

Hooks là cách mới hơn để sử dụng trạng thái và các tính năng khác của React mà không cần viết class. Preact cũng hỗ trợ các React Hooks cơ bản như useState, useEffect, và useContext.

Sử dụng useState và useEffect

Ví dụ về useState và useEffect:

import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

const Counter = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `Count: ${count}`;
    }, [count]);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
};

export default Counter;

6. Tối ưu hóa ứng dụng Preact

6.1 Tree Shaking

Tree Shaking là một kỹ thuật được sử dụng để loại bỏ mã không sử dụng trong quá trình đóng gói. Webpack tự động hỗ trợ Tree Shaking nếu bạn cấu hình nó đúng cách. Đảm bảo rằng bạn đang sử dụng phiên bản Webpack có hỗ trợ Tree Shaking và cài đặt các gói như sau:

npm install --save-dev terser-webpack-plugin

Cập nhật webpack.config.js để sử dụng Tree Shaking:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ... các cấu hình khác
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

6.2 Code Splitting

Code Splitting là một kỹ thuật khác giúp tách biệt mã thành nhiều gói nhỏ hơn để tải nhanh hơn. Webpack cũng hỗ trợ kỹ thuật này.

Ví dụ về Code Splitting:

import { h, render } from 'preact';

const App = () => (
    <div>
        <h1>Hello, Code Splitting!</h1>
        <button onClick={loadComponent}>Load Component</button>
    </div>
);

const loadComponent = async () => {
    const module = await import('./components/DynamicComponent');
    const DynamicComponent = module.default;

    render(<DynamicComponent />, document.getElementById('dynamic-root'));
};

render(<App />, document.getElementById('root'));

Kết luận

Preact là một lựa chọn mạnh mẽ và nhẹ nhàng cho việc phát triển các ứng dụng JavaScript hiện đại. Với kích thước nhỏ gọn và hiệu suất cao, Preact giúp các nhà phát triển dễ dàng xây dựng các giao diện người dùng hiệu quả mà không phải lo lắng quá nhiều về kích thước gói hay tốc độ tải trang. Hy vọng rằng bài viết này đã cung cấp cho bạn cái nhìn toàn diện và hướng dẫn chi tiết về cách cài đặt và sử dụng Preact trong dự án của bạn.

Comments

Bài viết liên quan