boilerplate là gì

Đã đă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ề vượt lên trên xa xăm kỳ lạ so với nhiều người, một tủ sách tạo nên và vận hành phần view cho những người sử dụng một cơ hội cực kỳ dễ dàng và đơn giản. Tuy nhiên, không phải như những framework không giống, React sở hữu bố cục tổng quan và những module của nodeJS cực kỳ đa dạng và phong phú, chủ yếu điều này thực hiện mang lại việc vận hành cấu hình, kỹ năng của dự án công trình trở thành trở ngại. Để giải quyết và xử lý việc đó, boilerplate Ra đời. Bản hóa học là 1 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 thiết kế viên. Từ bại chung 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 đơn giản nhằm maintain.

Xem thêm: hold your breath là gì

Xem thêm: cib là gì

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

Phi chức năng

CLI tương hỗ tạo nên phong cách xây dựng thư mục

  • Việc tạo nên component, container routers, selectors ... nhập dự án công trình không hề cần hardcode nữa nhưng mà sở hữu command cli nhằm khởi tạo nên phong cách 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 thiết kế viên trấn áp những hiện 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 chở 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à 1 trong những tủ sách khá có tiếng trong những công 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 đã biết thành immutable. Vấn đề này hỗ trợ cho tài liệu phần mềm của người tiêu 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à 1 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 lại component cực kỳ nhanh chóng.
import { createSelector } from 'reselect';
import mySelector from 'mySelector';

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

export {
  myComplexSelector,
};

redux-saga

  • redux saga là 1 trong những tủ sách middleware nhập react. (nằm thân ái 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 lại việc Fetch API nhằm lấy tài liệu về.
import { takeLatest, gọi, 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 lại việc thay cho thay đổi ngữ điệu của phần mềm, boilerplate tiếp tục config sẵn, các bạn chỉ việc việc dùng theo dõi CLI và chỉ dẫn tiếp tục sở hữu 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à 1 trong những "Framework" react ấn tượng nhằm hoàn toàn có thể kiến tạo một dự án công trình nhanh chóng, 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