boilerplate là gì

By Admin 18/11/2023 0

Đã đăng nhập thg 3 trăng tròn, 2018 3:03 CH

3 phút đọc

Bạn đang xem: boilerplate là gì

Tổng quan

Chắc hẳn React không hề quá xa thẳm kỳ lạ so với nhiều người, một tủ sách tạo ra và vận hành phần view cho những người sử dụng một cơ hội vô cùng dễ dàng và đơn giản. Tuy nhiên, không phải như những framework không giống, React đem bố cục tổng quan và những module của nodeJS vô cùng đa dạng và phong phú, chủ yếu điều này thực hiện mang đến việc vận hành cấu tạo, kinh nghiệm của dự án công trình trở thành trở ngại. Để giải quyết và xử lý việc đó, boilerplate Thành lập và hoạt động. Bản hóa học là một trong những template với phần core là react kết phù hợp với redux (giống như framework). Chúng đã có sẵn trước những module, CLI, structure rõ nét, tương hỗ tối nhiều xây dựng viên. Từ bại liệt gom tất cả chúng ta vận hành những module, code ... một cơ hội dễ dàng và đơn giản, khoa học tập và nhất là rất dễ dàng nhằm maintain.

Xem thêm: lead time là gì

Xem thêm: vitality là gì

Tính năng, quánh điểm

Phi chức năng

CLI tương hỗ tạo ra bản vẽ xây dựng thư mục

  • Việc tạo ra component, container routers, selectors ... nhập dự án công trình không hề cần hardcode nữa tuy nhiên đem command cli nhằm khởi tạo ra bản vẽ xây dựng.

Hiệu năng.

  • React-boilerplate được config và dùng những tủ sách hỗ trợ cho việc compiler và điều khiển xe trên production đảm bảo chất lượng rộng lớn.

debug dễ dàng và đơn giản.

  • Luồng tài liệu được boilerplate vận hành và ghi log hỗ trợ cho xây dựng viên trấn áp những tình trạng của phần mềm một cơ hội dễ dàng và đơn giản.

Sử dụng JS mới

  • ES6 được dùng tối nhiều nhập dự án công trình.

Style component

  • react boilerplate dùng styled component tối ưu tính năng chuyển vận css nhập html, dễ dàng và đơn giản maintain và vận hành.

Một số module chính

Redux

  • redux là một trong những tủ sách khá phổ biến trong các việc vận hành state triệu tập nhập react (store)

ImmutableJS

  • Đúng với tên thường gọi, đấy là tủ sách "đóng băng" object, array nhập JS. Người sử dụng ko thể lấy độ quý hiếm hoặc gán độ quý hiếm thành phần nhập object, array đã trở nên immutable. Như vậy hỗ trợ cho tài liệu phần mềm của người sử dụng được trấn áp đảm bảo chất lượng rộng lớn.
import { fromJS } from 'immutable';

const initialState = fromJS({
  myData: {
  	message: 'Hello World!'
  },
});

reselect

  • reselect là một trong những tủ sách hỗ trợ cho việc lấy tài liệu trở thành dễ dàng và đơn giản rộng lớn. boilerplate tiếp tục lưu cache state và select state mang đến component vô cùng thời gian nhanh.
import { createSelector } from 'reselect';
import mySelector from 'mySelector';

const myComplexSelector = createSelector(
  mySelector,
  (myState) => myState.get('someNestedState')
);

export {
  myComplexSelector,
};

redux-saga

  • redux saga là một trong những tủ sách middleware nhập react. (nằm thân thích dispatch action và thay cho thay đổi state). Nhằm xử lý bất nhất quán của việc lưu state nhập react.
  • thường tất cả chúng ta tiếp tục sử dụng mang đến việc Fetch API nhằm lấy tài liệu về.
import { takeLatest, đường dây nóng, put, select } from 'redux-saga/effects';

// Root saga
export mặc định function* rootSaga() {
  // if necessary, start multiple sagas at once with `all` 
  yield [
    takeLatest(LOAD_REPOS, getRepos),
    takeLatest(LOAD_USERS, getUsers),
  ];
}

I18n

  • react dùng tủ sách react-intl mang đến việc thay cho thay đổi ngôn từ của phần mềm, boilerplate đang được config sẵn, chúng ta chỉ việc việc dùng bám theo CLI và chỉ dẫn đang được đem bên trên document.
import { defineMessages } from 'react-intl';

export mặc định defineMessages({
  licenseMessage: {
    id: 'boilerplate.components.Footer.license.message',
    defaultMessage: 'This project is licensed under the MIT license.',
  },
  authorMessage: {
    id: 'boilerplate.components.Footer.author.message',
    defaultMessage: `
      Made with love by {author}.
    `,
  },
});

router

  • react boilerplate dùng react-router thực hiện tủ sách vận hành history nhập html5.
import { Switch, Route } from 'react-router-dom';

class AboutPage extends React.PureComponent {
  render() {
    return (
      <Switch>
        <Route exact path="/about/our-team" />
      </Switch>
    );
  }
}

Tổng kết

React boilerplate là một trong những "Framework" react tuyệt hảo nhằm rất có thể kiến thiết một dự án công trình thời gian nhanh, tính năng đảm bảo chất lượng và maintain dễ dàng và đơn giản.

Nguồn

https://github.com/react-boilerplate/react-boilerplate

All rights reserved