Tích Hợp Redux Vào Reactjs

--- Bài mới hơn ---

  • Chương 1: Làm Quen Với Redux
  • Nodejs Bài 3:template Engines Với Hàm Render() Và Viết Mã Html Với Pug
  • Reactjs: Render Props Là Gì?
  • Những Khái Niệm Cơ Bản Về Dom
  • Dom Là Gì? Thao Tác Với Dom Bằng Javascript
  • Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách tích hợp Redux vào trong một dự án ReactJS.

    Redux là một thư viện hỗ trợ chúng ta quản lí các state trong các ứng dụng javascript. Có thể khẳng định đây là một thư viện khá quan trọng nhưng đối với những người mới làm quen với Redux việc tích hợp nó vào dự án React không đơn giản.

    Nội dung bài viết sẽ chỉ ra từng bước để tích hợp Redux vào ReactJS một cách chi tiết nhất.

    1. Cài đặt Redux

    Sau khi khởi tạo môt dự án ReactJS, để có thể sử dụng Redux chúng ta cần phải cài đặt 2 module là reduxreact-redux bằng cách sử dụng npm:

    npm install redux react-redux --save

    Sau khi cài đặt thành công chúng ta có thể bắt đầu sử dụng redux trong dự án của mình rồi !

    2. Tích hợp Redux vào ReactJS

    Để hiểu rõ hơn về các bước tích hợp Redux chúng ta sẽ đi xây dựng bộ khung Redux cho một ứng dụng ghi chú.

    Ở đây chúng ta sẽ chia nhỏ các phần của Redux ra nhiều thư mục. Bạn có thể tìm hiểu về các thành phân quan trọng của redux ở bài viết giới thiệu về Redux ở trên. Chúng ta sẽ làm việc trong thư mục src.

    src/ ....const/ index.js .....actions/ index.js ....reducers/ ... index.js ----components ....App.js

    Mỗi thư mục sẽ có các nhiệm vụ khác nhau :

    • const: chứa các hằng số cố định của dự án.
    • actions: chứa các actions dùng để truyền vào hàm dispatch.
    • reducers: chứa các reducers trong redux.

    Trước khi xây dựng ứng dụng dùng Redux chúng ta cần phải hiểu rõ các thành phần có trong ứng dụng, từ đó xây dựng mô hình triển khai Redux một cách khoa học hơn.

    Khởi tạo các hằng

    Chúng ta sẽ đi khởi tạo các hằng số hỗ trợ việc triển khai dự án. Trong file const/index.js chúng ta sẽ khởi tạo 1 hằng số hỗ trợ việc thêm ghi chú.

    // const/index.js export const ADD_NEW_NOTE = "ADD_NEW_NOTE";

    Trong các dự án lớn sẽ có rất hiều hằng số, bởi vậy việc khởi tạo ra một thư mục chứa các hằng số là điều hoàn toàn cần thiết.

    Khởi tạo actions

    Actions là một object chứa các hành động mà bạn muốn gửi đến reducers. Giả sử như chúng ta muốn thêm note thì chúng ta sẽ chỉ định nó bên trong actions. Khi muốn gửi actions đến reducers chỉ cần gọi store.dispatch(actions). Ở đây chúng ta sẽ chỉ định các actions hỗ trợ việc thêm ghi chú như sau:

    // actions/index.js import { ADD_NEW_NOTE, REMOVE_NOTE, EDIT_NOTE } from "../const/index"; return { type: ADD_NEW_NOTE, content, }; };

    Mỗi action chúng ta cần phải chỉ định thụôc tính type có giá trị duy nhất. Bởi khi action gửi đến reducer nó sẽ dựa vafp thuộc tính action.type để xác định mình nên làm gì với state.

    Khởi tạo reducers

    Reducers sẽ có nhiệm vụ thay đổi state của ứng dụng dựa trên từng hành động được gửi đế. Trong các dự án lớn chúng ta cần chia ra rất nhiều reducers khác nhau. Ở trong thư mục src/reducers sẽ chỉ khởi tạo 1 reducers có tên noteReducer.

    // reducers/noteReducers.js import { ADD_NEW_NOTE, REMOVE_NOTE, EDIT_NOTE } from "../const/index"; switch (action.type) { case ADD_NEW_NOTE: const generateID = new Date().getTime(); state = [...state, { id: generateID, content: action.content }]; return state; default: return state; } }; export default noteReducers

    Chúng ta sẽ gộp các reducer lại với nhau bằng hàm combineReducer.

    // src/reducers/index.js import {combineReducers} from 'redux' import noteReducers from './noteReducer' //Ở đay chúng ta có thể gộp nhiều reducers // Ở ví dụ này mình chỉ có 1 reducers là noteReducers export default combineReducers({ note: noteReducers })

    Tích hợp Redux

    Sau khi đã tạo ra các thành phần cần thiết trong ứng dụng React chúng ta cần phải tạo Store lưu trữ state. Chúng ta sẽ làm việc với file src/index.js

    // src/index.js import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import * as serviceWorker from "./serviceWorker"; import { Provider } from "react-redux"; import { createStore } from "redux"; //Gọi reducers import reducers from "./reducers/index"; //Tạo store const store = createStore(reducers); ReactDOM.render( document.getElementById("root") ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();

    Để các component khác có thể lấy dữ liệu chúng ta cần phải bọc các component vào trong Provider.

    Lấy và cập nhật giá trị của state từ Store

    Sau khi đã hoàn thành xong tất cả các bước cài đặt Redux cho project, chúng ta có thể thực hiên lấy và cập nhật giá trị của state ở store về component. Giả sử ở đây chúng ta muốn tương tác với store ở component App.js sẽ thực hiện như sau:

    // src/App.js //Import kết nối tới react-redux import { connect } from 'react-redux' //Import action dùng để dispatch import {actAddNote} from './actions/index' function App(props) { return ( ... ); } //Gán dispatch thành props return { dispatch(actAddNote(content)) } } } //Gán giá trị của state thành props return { note: state.note } } //Export component với két nối redux. export default connect(mapStateToProps, mapDispatchToProps)(App)

    Để kết nối với redux ở trong component chúng ta cần phải import hàm kết nối. Ở đây có 2 hàm cực kì quan trọng giúp thao tác với state đó là:

    • mapStateToProps: giúp chuyển state sang thành props sử dụng trong component.
    • mapDispatchToProps: giúp chuyển dispatch trong redux thành props. Giả sử mình muốn thực hiện dispatch action actAddNote thì mình chỉ cần gọi props.addNote()

    --- Bài cũ hơn ---

  • Redux Là Gì? Tại Sao Lại Ứng Dụng Trong Reactjs
  • Học React/redux Qua Ví Dụ Thực Tế: Redux
  • React Js Là Gì? Tìm Hiểu Về React Js Chi Tiết 2022
  • Reactjs Là Gì? Tính Năng Và Cách Sử Dụng React Js Như Thế Nào?
  • React.js Mà Nhiều Người Đang Nhắc Đến, Thích Hợp Cho Những Ứng Dụng Web Nào?
  • Redux Là Gì? Tại Sao Lại Ứng Dụng Trong Reactjs

    --- Bài mới hơn ---

  • Tích Hợp Redux Vào Reactjs
  • Chương 1: Làm Quen Với Redux
  • Nodejs Bài 3:template Engines Với Hàm Render() Và Viết Mã Html Với Pug
  • Reactjs: Render Props Là Gì?
  • Những Khái Niệm Cơ Bản Về Dom
  • Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Redux trong ReactJS.

    Chắc hẳn trong quá trình làm việc với ReactJS thì việc quản lí các state giữa các component là vấn đề khá phức tạp. Mặc dù nhà phát triển của React cũng đã cho ra mắt React Context cho phép chúng ta làm điều này, nhưng nó có một vài hạn chế nhất định. Bởi vậy, chúng ta sẽ thay thế React Context bằng một thư viện mới có tên Redux với nhiều ưu điểm cũng như quản lí dễ dàng hơn.

    1. Cần hiểu trước khi tìm hiểu Redux là gì

    State là gì?

    Để trả lời cho câu hỏi Redux là gì? Trước tiên, chúng ta sẽ đi tìm hiểu về khái niệm state trong React.

    State được định nghĩa là một object có thể được sử dụng để chứa dữ liệu hoặc thông tin về components. Trong một React Component, state chỉ tồn tại trong phạm vi của components chứa nó, mỗi khi state thay đổi thì components đó sẽ được render lại.

    Đây là một state được khởi tạo trong React component.

    import React, { Component } from 'react'; export default class App extends Component { constructor(props) { super(props) //Khởi tạo giá trị ban đầu của state this.state = { website: 'freetuts.net', title : 'Freetuts.net' } } render() { return ( ... ); } }

    Khi chúng ta muốn thay đổi giá trị của state bạn chỉ cần cập nhật giá trị mới cho state đó bằng cách gọi hàm setState().

    //Cập nhật giá trị của state this.setState({ website: 'freetuts.net' })

    Vì phạm vi của state chỉ tồn tại trong một component, trong một vài trường hợp chúng ta muốn chia sẻ state cho nhiều component cùng một lúc thì khá phức tạp. Bởi vậy Redux ra đời để làm điều này, nó giúp bạn chia sẻ state tới nhiều components.

    Props là gì?

    Props là một object được truyền vào trong một components, mỗi components sẽ nhận vào props và trả về react element. Props cho phép chúng ta giao tiếp giữa các components với nhau bằng cách truyền tham số qua lại giữa các components.

    2. Vậy Redux là gì?

    Tại sao chúng ta phải sử dụng Redux?

    Redux sẽ giải quyết một bài toán khá là quan trọng đó là chia sẻ state. Như đã đề cập ở trên thì việc chia sẻ state giữa các component với nhau theo các thức truyền qua props là khá phức tạp và rắc rối.

    Giả sử khi chúng ta muốn truyền dữ liệu từ component A sang component C thì bắt buộc phải thông qua component B.

    Như hình bên trên khi chúng ta cần chia sẻ dữ liệu giữa các component với nhau bằng cách sử dụng props thì bắt bụôc phải thông qua các component trung gian. Điều này khá phức tạp và dễ gây nhầm lẫn.

    Giả sử bạn muốn chia sẽ dữ liệu từ component A tới component C thì chỉ cần đẩy state vào Store và Store sẽ cấp phát dữ liệu cho component C. Đây là mô hình mà Redux sử dụng, qua đó việc kiểm soát dữ liệu sẽ dễ dàng và tối ưu hơn.

    Redux hoạt động như thế nào?

    Sau khi một action được thực thi, dispathcer sẽ được kích hoạt và gửi đến reducer một action. Lúc này reducer thực hiện hành động dựa vào action được gửi đến. Sau đó, đồng thời lưu lại giá trị của state mới vào trong store và trả về state mới đó.

    Giả sử ở đây mình có 1 đoạn mã thực hiện tăng giảm giá trị của state thông qua redux.

    import redux from 'redux'; //Reducer //Kiểm tra điều kiện switch (action.type) { case 'INCREMENT': return state + 1; } return state; }; //Đây là store const store = redux.createStore(counter); //Thực hiện dispath store.dispath({type : 'INCREMENT'})

    Ở ví dụ trên khi dispath được thực thi thì lúc này nó sẽ gửi đến cho reducer một action có typeINCREMENT, reducer kiểm tra action và tiến hành tăng giá trị của state và trả về state mới.

    Đây là kiến thức rất cơ bản về nó nhưng cũng hết sức quan trọng trong quá trình làm việc với ReactJS sau này. Mong rằng bài viết sẽ giúp ích cho bạn.

    --- Bài cũ hơn ---

  • Học React/redux Qua Ví Dụ Thực Tế: Redux
  • React Js Là Gì? Tìm Hiểu Về React Js Chi Tiết 2022
  • Reactjs Là Gì? Tính Năng Và Cách Sử Dụng React Js Như Thế Nào?
  • React.js Mà Nhiều Người Đang Nhắc Đến, Thích Hợp Cho Những Ứng Dụng Web Nào?
  • Vòng Đời (Life Cycle) Trong Jsp
  • Redux Là Gì? Hiểu Rõ Cơ Bản Cách Dùng Redux

    --- Bài mới hơn ---

  • Các Hàm Render & Jsx
  • Thực Hành Tạo App Sử Dụng Framework(Phần 1)
  • Settimeout() Và Setinterval() Trong Javascript
  • Tìm Hiểu Settimeout Và Setinterval Trong Javascript
  • Hướng Dẫn Cảm Biến Bảo Mật Bằng Cách Sử Dụng Cảm Biến Pir Và Esp8266
  • Nói chung Redux khá là phổ biến. Tuy nhiên, không phải tất cả chúng ta đều biết nó là gì và cách sử dụng nó ra sao. Trong bài này, chúng ta sẽ xem vài lý do tại sao nên sử dụng redux bằng cách phân tích những lợi ích mà nó mang lại và cách hoạt động của nó.

    Redux là gì?

    Redux là một pdictable state management tool cho các ứng dụng Javascript. Nó giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác nhau (client, server, and native) và dễ dàng để test. Redux ra đời lấy cảm hứng từ tư tưởng của ngôn ngữ Elm và kiến trúc Flux của Facebook. Do vậy Redux thường dùng kết hợp với React.

    Do yêu cầu cho các ứng dụng single-page sử dụng Javascript ngày càng trở lên phức tạp thì code của chúng ta phải quản lý nhiều state hơn.

    State có thể bao gồm là data trả về từ phía Server và được cached lại hay như dữ liệu được tạo ra và thao tác ở phía client mà chưa được đẩy lên phía server. UI state cũng trở lên phức tạp vì chúng ta cần quản lý việc active Routes, selected tabs, spinners, điều khiển phân trang …vv.

    Với Redux, state của ứng dụng được giữ trong một nơi gọi là store và mỗi component đều có thể access bất kỳ state nào mà chúng muốn từ chúng store này.

    Tại sao ta lại cần state management tool

    Hầu hết các lib như React, Angular, etc được built theo một cách sao cho các components đến việc quản lý nội bộ các state của chúng mà không cần bất kỳ một thư viện or tool nào từ bên ngoài.

    Nó sẽ hoạt động tốt với các ứng dụng có ít components nhưng khi ứng dụng trở lên lớn hơn thì việc quản lý states được chia sẻ qua các components sẽ biến thành các công việc lặt nhặt.

    Trong một app nơi data được chia sẻ thông qua các components, rất dễ nhầm lẫn để chúng ta có thể thực sự biết nơi mà một state đang live. Một sự lý tưởng là data trong một component nên live trong chỉ một component. Vì vậy việc share data thông qua các components anh em sẽ trở nên khó khăn hơn.

    Ví dụ, trong react để share data thông qua các components anh em, một state phải live trong component cha. Một method để update chính state này sẽ được cung cấp bởi chính component cha này và pass như props đến các components con.

    Đây là một ví dụ:

    Giờ chúng ta hãy tưởng tượng rằng nếu một state phải được chia sẻ giữa các component cách khá xa nhau trong một tree components và state này phải được passed từ một component đến một component khác cho đến khi nó đến được nơi mà nó được gọi.

    Cơ bản là, state mà chúng ta đang nói đến phải được nhấc lên một component cha gần nhất và tiếp nữa cho đến khi nó đến được cái component tổ tiên chứa tất cả các components nó cần cái state này sau đó pass cái state này xuống @@. Điều này sẽ khiến state trở nên khó hơn trong việc maintain và less pdictable.

    Điều này khiến cho bộ phận quản lý state trong app trở lên bừa bộn cũng như app trở lên vô cùng phức tạp. Đó là lý do tại sao chúng ta cần một state management tool như Redux.

    Hiểu cách Redux làm việc

    Cái cách mà Redux hoạt động là khá đơn giản. Nó có 1 store lưu trữ toàn bộ state của app. Mỗi component có thể access trực tiếp đến state được lưu trữ thay vì phải send drop down props từ component này đến component khác.

    Có 3 thành phần của Redux: Actions, Store, Reducers.

    Actions đơn giản là các events. Chúng là cách mà chúng ta send data từ app đến Redux store. Những data này có thể là từ sự tương tác của user vs app, API calls hoặc cũng có thể là từ form submission.

    Actions được gửi bằng cách sử dụng store.dispatch() method, chúng phải có một type property để biểu lộ loại action để thực hiện. Chúng cũng phải có một payload chứa thông tin. Actions được tạo thông qua một action creator. Ví dụ:

    Reducers là các function nguyên thủy chúng lấy state hiện tại của app, thực hiện một action và trả về một state mới. Những states này được lưu như những objects và chúng định rõ cách state của một ứng dụng thay đổi trong việc phản hồi một action được gửi đến store.

    Đây là một ví dụ về cách mà Reducers hoạt động trong Redux:

    Store lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng Redux nào. Bạn có thể access các state được lưu, update state, và đăng ký or hủy đăng ký các listeners thông qua helper methods.

    Tạo một store cho một login app:

    const store = createStore(LoginComponent);

    Các actions thực hiện trên một state luôn luôn trả về một state mới. Vì vậy, state này là đơn giản và dễ đoán.

    Bây giờ, chúng ta đã biết hơn một chúng về Redux, hãy trở lại với ví dụ Login component và xem cách cách mà Redux có thể giúp chúng ta được gì.

    Nguyên lý vận hành

    Tổng kết

    Ở phạm vi bài này mình đã trình bày nguyên lý cơ bản và cách thức hoạt động của Redux là gì rồi. Để các bạn có thể nắm được cũng như hình dung nó sinh ra để làm việc gì, bài viết mới thể hiện được các tình huống đơn giản nhất thông qua ví dụ đơn giản.

    Còn trong khi làm dự án thực tế công việc chủ yếu là tương tác với server (fetch data) và xử lý data sau đó, thì đó là về bất đồng bộ asynchronous và xử lý side-effect sau mỗi action được gọi.

    Why use Redux? Reasons with clear examples

    --- Bài cũ hơn ---

  • Jsp Life Cycle: Introduction, Phases, Methods
  • Hướng Dẫn Sử Dụng Java Jsp Standard Tag Library (Jstl)
  • Hướng Dẫn Lập Trình Java Jsp Cho Người Mới Bắt Đầu
  • Đọc File Pdf Online Với Pdfreaderjavascript
  • Javascript Prototype Là Gì? Tạo Ra Prototype Như Thế Nào?
  • Redux Qua Ví Dụ Thực Tế: Redux

    --- Bài mới hơn ---

  • Các Hàm Render & Jsx — Vue.js
  • Giới Thiệu Về Nodejs + Sailsjs
  • Phương Thức Settimeout() Và Setinterval() Trong Javascript
  • Bộ Hẹn Giờ Settimeout() Và Setinterval() Trong Javascript
  • Asp.net – Serialize Đối Tượng .net Thành Json Và Ngược Lại
  • Hôm nay chúng ta sẽ tiếp tục tìm hiểu về Redux và vai trò của nó trong application.

    Redux được mô tả như là một pdictable state container cho application. Phần lớn các bạn thường thấy Redux được đi một cặp với Redux ở client side application. Thực tế, Redux còn hơn thế, giống như Javascript đã lấn sân sang server side với NodeJS hay dùng trong việc phát triển IoT application, Redux có thể được sử dụng ở bất cứ nơi đâu cần một pdictable state container. Bạn phải hiểu và nắm bắt được vấn đề mà nó giải quyết, thì mới nên sử dụng nó.

    Nào cùng bắt đầu tìm hiểu Redux thôi.

    Nói một cách đơn giản, bạn sẽ trigger một action trong component, nó có thể là một button, một text field, hay blabla… sẽ có một thành phần khác listen đến cái action mà bạn vừa trigger, sử dụng payload mà action đó trả về, sinh ra một global state mới từ payload đó sau đó trả ngược lại cho component để nó thực hiện nhiệm vụ render lại nếu cái global state đó có thay đổi so với global state trước đó. Khi component được render xong thì lúc đó chu trình coi như hoàn tất.

    Lý thuyết thế đủ rồi, còn chờ gì nữa mà không bắt tay vào implement nhỉ!

    Từ folder của project các bạn cài đặt như sau.

    npm install --save redux redux-logger

    Bây giời chúng ta sẽ tạo action đầu tiên. Mở file src/index.js lên.

    import React from 'react'; import ReactDOM from 'react-dom'; import TrackList from './components/TrackList'; import {conpStore} from './store'; import * as actions from './actions'; const tracks = ; export default function(state = initialState, action) { switch (action.type) { case ActionTypes.TRACKS_SET: return setTracks(state, action); } return state; } function setTracks(state, action) { const {tracks} = action; return [...state, ...tracks]; }

    Như các bạn có thể thấy, chúng ta sẽ export một anonymous function. Reducer sẽ nhận vào một state và action như tôi đã nói từ trước. Bản thân reducer sẽ phải handle nhiều action type khác nhau, bây giờ thì các bạn nhìn thấy có một, nhưng trong tương lai khi application phình to ra thì cũng nhiều đáng kể đấy. Cũng giống như cách chúng ta làm với action creator, chúng ta sẽ tạo một file index.js trong folder reducers để chứa hết tất cả reducer, và cung cấp ra cho các thành phần khác của application sử dụng.

    import {combineReducers} from 'redux'; import track from './track'; export default combineReducers({ track });

    Để tiết kiệm thời gian, chúng ta sẽ sử dụng helper function của Redux, đó là combineReducers. Thông thường bạn sẽ phải export từng reducer, reducer đó sẽ phải trả về toàn bộ state của application. Khi sử dụng combineReducers, bạn có thể sử dụng multiple reducer mỗi reducer sẽ trả về một substate. Nếu không sử dụng nó bạn sẽ phải access list tracks trong global state như thế này.

    state.tracks

    Nhưng với combineReducers, bạn sẽ get thẳng từ subset của state như sau.

    state.track.tracks

    Rồi, chúng ta đã có action, đã có action type và action creator, rồi chúng ta cũng đã có reducer để xử lý new state. Giờ chúng ta chỉ còn thiếu mỗi store, cái mà chúng ta đã làm từ lúc đầu nhưng vẫn bỏ ngõ trong file src/index.js.

    Hãy nhớ rằng, chúng ta đã dispatch action thông qua store api dispatch.

    store.dispatch(actionCreator(payload))

    Nào cũng tạo store. Tạo file src/store.js.

    import {createStore, applyMiddleware} from 'redux'; import createLogger from 'redux-logger'; import rootReducer from '../reducers/index'; const logger = createLogger(); const createStoreWithMiddleware = applyMiddleware(logger)(createStore); export default function conpStore(initialState) { return createStoreWithMiddleware(rootReducer, initialState); }

    Redux cung cấp cho chúng ta function createStore. Chúng ta chỉ cần function này với những combined reducer chúng ta đã tạo trước đó để tạo store.

    Redux store được khai báo với một middleware, thành phần này sẽ có nhiệm vụ để làm một số nhiệm vụ gì đó giữa khoảnh khắc dispatch action và khoảnh khác payload đến được với reducer. Có hàng tá middleware cho Redux ở ngoài kia, trong bài này, tôi chỉ sử dụng logger middleware để bắt đầu, cũng như để cho các bạn biết tới middleware là gì. Logger middleware sẽ console log pviousStatenextState mỗi khi có action. Giúp chúng ta có thể keep track application một cách dễ dàng hơn. Tại sao chúng ta lại sử dụng nó, hồi sau sẽ rõ.

    Cuối cùng chúng ta sử dụng helper function applyMiddleware để wire store và middleware chúng ta vừa khai báo.

    Việc gì cần làm cũng đã làm xong rồi, thử npm start để xem thành quả nào!

    Lúc này bạn sẽ thấy browser có một màu trắng tinh khôi, nhưng đừng vội buồn vì có lỗi, hãy mở console lên nào, chúng ta sẽ thấy action đã được dispatch.

    Tuy nhiên thì vì chúng ta chưa connect component TrackList với store nên trang trắng là điều đương nhiên.

    Source code trong bài các bạn có thể tìm thấy ở https://github.com/codeaholicguy/react-redux-tutorial/tree/master/redux

    Bài gốc: Codeaholicguy

    --- Bài cũ hơn ---

  • Reactjs Là Gì? 5 Lý Do Khiến Doanh Nghiệp Nên Ứng Dụng Reactjs Ngay!
  • Học Reactjs Trong 15 Phút
  • Jsp – Jsp Life Cycle
  • Jsp] Servlet Là Gì? Vòng Đời Servlet.
  • Tạo Và Xuất Bản Một Jquery Plugin Trong 30 Phút
  • Học React/redux Qua Ví Dụ Thực Tế: Redux

    --- Bài mới hơn ---

  • Redux Là Gì? Tại Sao Lại Ứng Dụng Trong Reactjs
  • Tích Hợp Redux Vào Reactjs
  • Chương 1: Làm Quen Với Redux
  • Nodejs Bài 3:template Engines Với Hàm Render() Và Viết Mã Html Với Pug
  • Reactjs: Render Props Là Gì?
  • Thời gian vừa rồi, nào là tham gia Facebook Hackathon VietNam, cũng may mắn là có giải, chắc chắn tôi sẽ kể cho các bạn nghe vào một ngày gần nhất.

    Rồi sau đó lại rong ruổi đạp xe năm bảy chục cây số để bắt Pokemon làm tôi không thể đăng bài mới được, nhưng không sao, tôi đã trở lại để tiếp tục giúp các bạn tìm hiểu React/Redux đây. Hôm nay chúng ta sẽ tiếp tục tìm hiểu về Redux và vai trò của nó trong application.

    Redux được mô tả như là một pdictable state container cho application. Phần lớn các bạn thường thấy Redux được đi một cặp với ReactJS ở client side application. Thực tế, Redux còn hơn thế, giống như Javascript đã lấn sân sang server side với NodeJS hay dùng trong việc phát triển IoT application, Redux có thể được sử dụng ở bất cứ nơi đâu cần một pdictable state container. Bạn phải hiểu và nắm bắt được vấn đề mà nó giải quyết, thì mới nên sử dụng nó.

    Nào cùng bắt đầu tìm hiểu Redux thôi.

    Cách mà Redux làm việc

    Nói một cách đơn giản, bạn sẽ trigger một action trong component, nó có thể là một button, một text field, hay blabla… sẽ có một thành phần khác listen đến cái action mà bạn vừa trigger, sử dụng payload mà action đó trả về, sinh ra một global state mới từ payload đó sau đó trả ngược lại cho component để nó thực hiện nhiệm vụ render lại nếu cái global state đó có thay đổi so với global state trước đó. Khi component được render xong thì lúc đó chu trình coi như hoàn tất.

    Lý thuyết thế đủ rồi, còn chờ gì nữa mà không bắt tay vào implement nhỉ!

    Từ folder của project các bạn cài đặt như sau.

    npm install --save redux redux-logger

    Dispatch action

    Bây giời chúng ta sẽ tạo action đầu tiên. Mở file src/index.js lên.

    Như các bạn có thể thấy, chúng ta cài đặt một store object bằng function conpStore, chúng ta chưa vội implement nó lúc này. Hãy tìm hiểu store là gì trước đã. Store là một singleton object trong Redux, và giữ vai trò như là global state object. Hơn thế nữa, nó có khả năng sử dụng một số API để dispatch một action, lấy được trạng thái của store hay notify nếu store có sử thay đổi.

    Trong trường hợp này, chúng ta đang dispatch action với payload là list track đã được hard code. Và vì thế chúng ta sẽ không cần phải pass tracks vào trong component như trước nữa, chúng đã không còn thuộc về nhau anymore. Haha.

    Action Types

    Chúng ta cần một file để chứa constant, những constant đầu tiên sẽ là những constant để giải quyết việc xác định action nào. Những constant này sẽ được sử dụng bởi cả reducer và action.

    Tạo file src/core/constants.js.

    Action Creators

    Bây giờ chúng ta sẽ tìm hiểu về action creator. Action creator sẽ trả về một object với type và payload. Type là một trong số những constant ActionTypes mà chúng ta đã tạo ở trên. Payload có thể là bất cứ thứ gì, nó sẽ được sử dụng để thay đổi global state của application.

    Có nhiều cách để structure một React/Redux application, trong bài này tôi sẽ dùng cách đơn giản nhất, chắc chắn sau series này, chúng ta sẽ có thêm một vài bài để refactor cũng như structure lại cho code base đẹp hơn.

    Tạo src/actions/tracks.js.

    Action creator đầu tiên của chúng ta sẽ nhận vào input là list tracks, cái mà chúng ta sẽ set vào global state. Action creator này sẽ trả về một object chứa action type và payload là list mà chúng ta đã truyền vào.

    Để giữ cho folder structure gọn gàng, mặc dù là cách cơ bản nhưng chúng ta cũng nên tạo một file index.js trong folder actions để chứa tất cả các action creator như sau.

    Trong file này chúng ta sẽ bundle tất cả các action creator mà chúng ta có và export chúng ra như là một public interface cho các phần còn lại sử dụng.

    Reducer

    Sau khi dispatch action và implement action creator, chúng ta phải implement thứ mà ai cũng biết là thứ gì, nó làm nhiệm vụ canh chừng nếu có bất cứ action nào được gọi và update global state. Nó được gọi là reducer, bởi vì sao nó lại được gọi như vậy? Nói một cách đơn giản nó nhận vào type và payload action trả về, và từ đó biến state cũ thành state mới. Lưu ý rằng thay vì thay đổi state trước đó thì chúng ta sẽ trả về một object state mới, state là immutable.

    State trong redux phải là immutable. Bạn sẽ không thể thay đổi state mà phải trả về một object state mới, việc này nhằm mục đích tránh những side effect trong application, chúng ta sẽ nói sâu hơn về vấn đề tại sao state lại phải là immutable trong một bài khác, vì nó vượt qua khuôn khổ mà chúng ta muốn biết trong bài này.

    Nào cùng tạo reducer. Tạo file src/reducers/track.js.

    Như các bạn có thể thấy, chúng ta sẽ export một anonymous function. Reducer sẽ nhận vào một state và action như tôi đã nói từ trước. Bản thân reducer sẽ phải handle nhiều action type khác nhau, bây giờ thì các bạn nhìn thấy có một, nhưng trong tương lai khi application phình to ra thì cũng nhiều đáng kể đấy. Cũng giống như cách chúng ta làm với action creator, chúng ta sẽ tạo một file index.js trong folder reducers để chứa hết tất cả reducer, và cung cấp ra cho các thành phần khác của application sử dụng.

    Để tiết kiệm thời gian, chúng ta sẽ sử dụng helper function của Redux, đó là combineReducers. Thông thường bạn sẽ phải export từng reducer, reducer đó sẽ phải trả về toàn bộ state của application. Khi sử dụng combineReducers, bạn có thể sử dụng multiple reducer mỗi reducer sẽ trả về một substate. Nếu không sử dụng nó bạn sẽ phải access list tracks trong global state như thế này.

    state.tracks

    Nhưng với combineReducers, bạn sẽ get thẳng từ subset của state như sau.

    state.track.tracks

    Setting Store

    Rồi, chúng ta đã có action, đã có action type và action creator, rồi chúng ta cũng đã có reducer để xử lý new state. Giờ chúng ta chỉ còn thiếu mỗi store, cái mà chúng ta đã làm từ lúc đầu nhưng vẫn bỏ ngõ trong file src/index.js.

    Hãy nhớ rằng, chúng ta đã dispatch action thông qua store api dispatch.

    store.dispatch(actionCreator(payload))

    Nào cũng tạo store. Tạo file src/store.js.

    Redux cung cấp cho chúng ta function createStore. Chúng ta chỉ cần function này với những combined reducer chúng ta đã tạo trước đó để tạo store.

    Redux store được khai báo với một middleware, thành phần này sẽ có nhiệm vụ để làm một số nhiệm vụ gì đó giữa khoảnh khắc dispatch action và khoảnh khác payload đến được với reducer. Có hàng tá middleware cho Redux ở ngoài kia, trong bài này, tôi chỉ sử dụng logger middleware để bắt đầu, cũng như để cho các bạn biết tới middleware là gì. Logger middleware sẽ console log pviousState và nextState mỗi khi có action. Giúp chúng ta có thể keep track application một cách dễ dàng hơn.

    Cuối cùng chúng ta sử dụng helper function applyMiddleware để wire store và middleware chúng ta vừa khai báo.

    Việc gì cần làm cũng đã làm xong rồi, thử npm start để xem thành quả nào!

    Lúc này bạn sẽ thấy browser có một màu trắng tinh khôi, nhưng đừng vội buồn vì có lỗi, hãy mở console lên nào, chúng ta sẽ thấy action đã được dispatch.

    Tuy nhiên thì vì chúng ta chưa connect component TrackList với store nên trang trắng là điều đương nhiên.

    Source code trong bài các bạn có thể tìm thấy ở https://github.com/codeaholicguy/react-redux-tutorial/tree/master/redux

    Series được tham khảo từ: https://www.robinwieruch.de/the-soundcloud-client-in-react-redux/

    --- Bài cũ hơn ---

  • React Js Là Gì? Tìm Hiểu Về React Js Chi Tiết 2022
  • Reactjs Là Gì? Tính Năng Và Cách Sử Dụng React Js Như Thế Nào?
  • React.js Mà Nhiều Người Đang Nhắc Đến, Thích Hợp Cho Những Ứng Dụng Web Nào?
  • Vòng Đời (Life Cycle) Trong Jsp
  • Tạo Một Ứng Dụng Java Web Đơn Giản Sử Dụng Servlet, Jsp Và Jdbc
  • Nodejs Là Gì? Expressjs Là Gì ? Từng Bước Tạo Ứng Dụng Chat Trên Nodejs

    --- Bài mới hơn ---

  • Node.js Là Gì? Các Ứng Dụng Của Node.js?
  • Backend Developer Là Gì: Hướng Dẫn Đầy Đủ Trở Thành Backend Developer
  • Tất Cả Những Thứ Cần Học Để Trở Thành Web Developer
  • Javascript Là Gì? Và Những Điều Developer Nên Nắm Vững
  • Front End Là Gì? Lập Trình Viên Front End Giỏi Cần Có Kỹ Năng Gì?
  • NodeJS là gì ?

    NodeJS là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine. Nó được xây dựng để chạy trên server.

    Javascript là một ngôn ngữ hướng sự kiện, do đó bất cứ điều gì xảy ra trên server đều tạo ra một sự kiện non-blocking, do vậy nên 1 website sử dụng NodeJS có thể đáp ứng được việc truy cập cùng lúc một lượng user cực kì lớn.

    Vậy NodeJS thích hợp để làm gì. Với các đặc trưng của mình thì NodeJS thích hợp để xây dựng các ứng dụng thời gian thực, ví dụ như hệ thống chat online hoặc hệ thông thông báo…

    Lợi ích của framework Expss

    Cài đặt NodeJS và framework Expss

    Bài viết sẽ hướng dẫn cài đặt trên môi trường linux (ubuntu).

    • Cài đặt NodeJS

    apt-get install nodejs

    • Cài đặt NPM:

    apt-get install npm

    Cài đặt xong 2 gói trên, gõ lệnh

    để kiểm tra version của các gói tương ứng. Tiếp theo, tạo thư mục expssjs và khởi tạo project

    mkdir /var/www/expssjs cd /var/www/expssjs npm init

    • Điền các thông tin tương ứng (name, version, description …) mà trình cài đặt yêu cầu hoặc enter để bỏ qua nếu bạn thấy nó đã phù hợp, cuối cùng chọn yes để kết thúc. Thực hiện tiếp các lệnh

    npm install expss --save npm install expss npm install expss-generator -g cd /var/www/ expss expssjs cd expssjs npm install

    Vậy là xong phần cài đặt, giờ hãy thử chạy lệnh sau

    nodejs /var/www/expssjs/bin/www

    và mở trình duyệt truy cập http://localhost:3000/ bạn sẽ thấy

    Expss Welcome to Expss

    Vậy là chúng ta đã hoàn thành cài đặt Expss framework, giờ hãy xem qua các thư mục một chút.

    • bin: Thư mục này chứa các file khởi tạo ứng dụng của bạn, mặc định khi cài đặt sẽ chứa file www, là file mà các bạn chạy lệnh phía trên để khởi tạo ứng dụng.
    • node_modules: chứa core framework và các thư viện trên nền NodeJS
    • public: chứa các file css, javascript và ảnh.
    • routes: định nghĩa url và method.
    • views: định nghĩa các màn hình.
    • app.js: là một file quan trọng, có nhiệm vụ kết nối tất cả mọi thứ để ứng dụng có thể chạy một cách chính xác.
    • package.json: file định nghĩa các module.

    Xây dựng ứng dụng chat đơn giản

    Để xây dựng ứng dụng chat chúng ta cần cài thêm socket.io, các bạn chạy lệnh phía dưới

    cd /var/www/expssjs npm install --save socket.io npm install

    trong thư mục expssjs tạo file chúng tôi và chat.html, nội dung 2 file như sau

    • chat.js

    var app = require('expss')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('/', function(req, res){ res.sendFile(__dirname + '/chat.html'); }); io.on('connection', function(socket){ socket.on('chat message', function(msg){ io.emit('chat message', msg); }); }); http.listen(3000, function(){ console.log('listening on *:3000'); });

    • chat.html

    * {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    }

    body {

    font: 13px Helvetica, Arial;

    }

    form {

    background: #000;

    padding: 3px;

    position: fixed;

    bottom: 0;

    width: 100%;

    }

    form input {

    border: 0;

    padding: 10px;

    width: 90%;

    margin-right: .5%;

    }

    form button {

    width: 9%;

    background: rgb(130, 224, 255);

    border: none;

    padding: 10px;

    }

    #messages {

    list-style-type: none;

    margin: 0;

    padding: 0;

    }

    #messages li {

    padding: 5px 10px;

    }

    #messages li:nth-child(odd) {

    background: #eee;

    }

    var socket = io();

    $(‘form’).submit(function () {

    socket.emit(‘chat message’, $(‘#m’).val());

    $(‘#m’).val(”);

    return false;

    });

    socket.on(‘chat message’, function (msg) {

    });

    Sau khi hoàn tất, hãy thử chạy lệnh

    nodejs /var/www/expssjs/chat.js

    Nếu có thông báo

    listening on *:3000

    tức là ứng dụng đã được khởi tạo, giờ hãy mở 2 trình duyệt, truy cập localhost:3000 và kiểm tra kết quả xem sao.

    Kết luận

    Sau bài này, bạn đã hiểu được cách thức hoạt động của NodeJS và framework Expss khá mạnh mẽ của NodeJS.

    Lợi ích của framework luôn là giúp code dễ dàng hơn, cải thiện được chất lượng hiệu suất của ứng dụng.

    Framework Expss đã đáp ứng được hết những điều người developer cần để có thể phát triển, mở rộng ứng dụng.Và chúng ta có thể tham khảo qua bài viết Từng bước tạo RESTful API với chúng tôi , Expss, MySQL

    --- Bài cũ hơn ---

  • 15+ Tài Liệu Học Nodejs “Chất” Dành Cho Developer
  • Các Nguyên Tắc Cơ Bản Củatừ Cơ Bản Đến Thành Thạo Phần 1
  • Tìm Hiểu Về Http Cookie Với Javascript
  • Các Từ Viết Tắt Jsc, Plc, Inc Và Co. Ltd Là Gì?
  • Khái Niệm Callback Trong Nodejs
  • Node.js Là Gì? Các Ứng Dụng Của Node.js?

    --- Bài mới hơn ---

  • Backend Developer Là Gì: Hướng Dẫn Đầy Đủ Trở Thành Backend Developer
  • Tất Cả Những Thứ Cần Học Để Trở Thành Web Developer
  • Javascript Là Gì? Và Những Điều Developer Nên Nắm Vững
  • Front End Là Gì? Lập Trình Viên Front End Giỏi Cần Có Kỹ Năng Gì?
  • Viết Desktop App Bằng Electron
  • I. chúng tôi là gì?

    Node.js là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên JavaScript Runtime của Chrome. Chúng ta có thể xây dựng được các ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng.

    Node.js được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại California, Hoa Kỳ.

    Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao.

    Nó tạo ra được các ứng dụng có tốc độ xử lý nhanh, real-time thời gian thực.

    Node.js áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ hoặc tạo ra các dự án Startup nhanh nhất có thể.

    II. Phân biệt chúng tôi và JavaScript

    Về bản chất, chúng tôi chính là ngôn ngữ JavaScript. Tuy nhiên, điểm khác của chúng tôi khác với JavaScript là các chương trình viết bằng chúng tôi sẽ được chạy trên môi trường máy chủ. Ngược lại các chương trình JavaScript thường sẽ được chạy trên môi trường trình duyệt.

    Ứng dụng của Node.js

    – Websocket server: Các máy chủ web socket như là Online Chat, Game Server…

    – Fast File Upload Client: là các chương trình upload file tốc độ cao.

    – Cloud Services: Các dịch vụ đám mây.

    – RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác thông qua API.

    – Any Real-time Data Application: bất kỳ một ứng dụng nào có yêu cầu về tốc độ thời gian thực. Micro Services: Ý tưởng của micro services là chia nhỏ một ứng dụng lớn thành các dịch vụ nhỏ và kết nối chúng lại với nhau. Nodejs có thể làm tốt điều này.

    Nhược điểm của Node.js

    Tốn tài nguyên

    Giống như hầu hết các công nghệ mới, việc triển khai chúng tôi trên host không phải là điều dễ dàng. chúng tôi đó là nó vẫn đang trong giai đoạn phát triển ban đầu, điều này có nghĩa là một số đặc trưng sẽ thay đổi trong quá trình phát triển tiếp theo.

    III. Nhược điểm của Node.js

    – Tốn tài nguyên

    – Giống như hầu hết các công nghệ mới, việc triển khai chúng tôi trên host không phải là điều dễ dàng. chúng tôi đó là nó vẫn đang trong giai đoạn phát triển ban đầu, điều này có nghĩa là một số đặc trưng sẽ thay đổi trong quá trình phát triển tiếp theo.

    Nếu bạn cần xử lý các ứng dụng tốn tài nguyên CPU như encoding video, convert file, decoding encryption… hoặc các ứng dụng tương tự như vậy thì không nên dùng NodeJS (Lý do: NodeJS được viết bằng C++ & Javascript, nên phải thông qua thêm 1 trình biên dịch của NodeJS sẽ lâu hơn 1 chút ). Trường hợp này bạn hãy viết 1 Addon C++ để tích hợp với NodeJS để tăng hiệu suất tối đa! (Việc tích hợp rất thân thiện và nhanh chóng)!

    --- Bài cũ hơn ---

  • Nodejs Là Gì? Expressjs Là Gì ? Từng Bước Tạo Ứng Dụng Chat Trên Nodejs
  • 15+ Tài Liệu Học Nodejs “Chất” Dành Cho Developer
  • Các Nguyên Tắc Cơ Bản Củatừ Cơ Bản Đến Thành Thạo Phần 1
  • Tìm Hiểu Về Http Cookie Với Javascript
  • Các Từ Viết Tắt Jsc, Plc, Inc Và Co. Ltd Là Gì?
  • Angular Js Là Gì? Vai Trò Của Angularjs Gồm Những Gì?

    --- Bài mới hơn ---

  • Angular Là Gì? Phân Biệt Angular Và Angular Js?
  • Backbone.js From Beginner To … (Part1)
  • Babel Cho Người Mới Bắt Đầu
  • Học Webpack Cơ Bản Trong 15 Phút
  • Node.js Cho Người Mới Bắt Đầu
  • Angular JS là gì?

    Angular JS được phát triển bởi Google và phát hành lần đầu tiên vào năm 2010. Thuộc thể loại JavaScript, Single-page application Framework.

    Các tính năng cốt lõi của Angular JS

    • Scope: Đối tượng hướng đến Model, là cầu nối giữa Controller và View
    • Controller: Gồm các hàm JavaScript kết hợp với bộ điều khiển Scope
    • Model: Khi có người dùng tương tác nó sẽ hiển thị dữ liệu ra ngoài View
    • View: Những thứ người dùng có thể thấy được trên trình duyệt
    • Data-binding: Chuyển đổi dữ liệu giữa Model và View
    • Services: Là các singleton object mà được khởi tạo duy nhất một lần trong ứng dụng
    • Filter: Bộ lọc cho phép lọc ra các thành phẩn của một mảng và trả về mảng mới
    • Routing: Chuyển đổi giữa các action trong Controller, qua lại giữa các View
    • Templates: Có chức năng hiển thị thành phần của Controller, là một phần của View
    • Deep Linking: Các liên kết sâu. cho phép mã hóa trạng thái của ứng dụng trong các URL để đánh dấu được với công cụ tìm kiếm.

    Một số components của AngularJS chính

    ng-bind: Được sử dụng để gắn kết dữ liệu ứng dụng AngularJS đến các thẻ HTML

    ng-app: Có vai trò định nghĩa và liên kết một ứng dụng AngularJS tới HTML

    ng-model: gắn kết giá trị của dữ liệu ứng dụng AngularJS đến các điều khiển đầu vào HTML

    Hướng dẫn cài đặt và sử dụng Angular JS Framework

    Bạn truy cập trang chủ tại https://angularjs.org/ để tải về phiên bản mới nhất với file angulajs.min.js

    Hoặc cũng có thể gọi trực tiếp thông qua CDN

    Thử chạy chương trình đầu tiên xem nào!

    Khi bạn nhập tên vào nó sẽ hiển thị ngay tức thời, có nghĩa là bạn nhập gì vào ô trống thì nó hiện ra cái đó luôn

    – Về ưu điểm:

    + Được Google phát triển nên đây là Framework thực sự tuyệt vời

    + Dễ dàng tái sử dụng lại component

    + Tiết kiệm thời gian cho Web Developer

    + Chạy được mọi trình duyệt kể cả PC và Mobile

    + Tạo ra các Single Page Aplication dễ dàng

    – Về nhược điểm:

    Bên cạnh những ưu điểm vượt trội thì nó cũng tồn tại một vài nhược điểm như:

    + Nếu bị vô hiệu hoá trên trình duyệt thì website chỉ hiển thị được HTML và CSS

    + Không an toàn vì được phát triển từ JavaScript quá phổ biến

    Đây là bài viết đầu tiên giới thiệu về Angular Js giúp bạn có cái nhìn tổng quan. Trong những bài tiếp theo mình sẽ hướng dẫn chi tiết hơn để có thể tạo ra các ứng dụng nhanh chóng nhất.

    --- Bài cũ hơn ---

  • Jsonp Là Gì Và Ở Sao Sao?
  • Jsa: Khu Vực An Ninh Chung
  • Jsa: Công Việc An Toàn Phân Tích
  • Jstl: Jsp Tiêu Chuẩn Thẻ Thư Viện
  • Jsp Là Gì , Bài Hướng Dẫn Jsp Miễn Phí
  • Gatsby Js Là Gì? Tìm Hiểu Cơ Bản Về Gatsby.js

    --- Bài mới hơn ---

  • Cách Sử Dụng Thư Việntrong Gatsby
  • Tìm Hiểu Và Sử Dụng Gulp Js
  • Sự Khác Biệt Giữa Grunt Vàlà Gì?
  • Biết Gulp Là Một Lợi Thế!
  • Cách Sử Dụng Hàm (Function) Trong Javascript
  • Trong thời gian vừa rồi chúng tôi đã cho ra mắt phiên bản cập nhật mới 5.4 của WordPress. Với nhiều tính năng nổi trội, chẳng hạn như cải thiện được tốc độ thực hiện tác vụ, load trang bên trong dashboard.

    Cải tiền một số tính năng trên Custom Gutenberg Blocks,… Và như các bạn cũng thấy thì WordPress hiện tại đã là một CMS Headless, điều đó giúp chúng ta có thể liên kết WordPress với nhiều nên tảng khác nhau như Angular, Vue, React, Gatsby, Next,… Thì với bài nay mình giới thiệu với các bạn về Gatsby JS.

    Gatsby Js là gì ?

    Gatsby là một “static site generator” được build từ core ReactJS. Về cơ bản nó cũng không khác gì các web viết bằng React Js, với nền tảng Gatsby thì chúng ta sẽ viết code bằng JavaScript. Rồi khi build nền tảng sẽ bundle thành các file HTML, CSS,JS còn database lấy từ api sẽ được lưu vào file Json. Bạn có thể deploy lên bất kỳ hosting website tĩnh.

    Mình thì xài Netify kết hợp với Github để đẩy web lên. Do Netify hỗ trợ web hook để khi các bạn publish bài viết từ dashboard WordPress. Thì Netify sẽ tự động thực hiện lệnh để build lại trang web và public trên hosting.

    Cách viết một blog bằng Gatsby có thể làm như sau: viết bài blog bằng định dạng md(markdown), cho nó vào thư mục posts, bundles lại rồi đẩy lên hosting. Hoặc bạn có thể kết hợp với CMS khác như WordPress, Drupal, Contentful,… bạn cũng có thể kết hợp bằng một số CMS bạn tự build miễn có api để query dữ liệu là được.

    Ưu điểm của Gatsby JS

    Nếu như ai đó hỏi mình ưu điểm của Gatsby là gì? Thì điều đầu tiên mình nghĩ đến là tốc độ và hiệu suất, nền tảng hỗ trợ tốt, SEO Optimizer và cuối cùng là PWA(Progressive Web Apps).

      Tốc độ và Hiệu suất: như mình đã nói Gatsby là một framework được xây dựng từ core React JS. Và đặc biệt hơn là một framework để làm web tĩnh, từ những lý do đó tốc độ load web sẽ nhanh hơn những trang khác. Độ bảo mật cũng cao hơn, nếu các bạn sử dụng một trang web viết bằng Gatsby.

      Bạn sẽ nhận thấy việc chuyển qua lại giữa các trang trong website cũng rất nhanh do tất cả các style, html và javascript sẽ được load trong lần tải đầu tiên. Khi người dùng ấn vào một bài viết trong trang web của bạn, nội dung mới sẽ được tải về dưới dạng JSON và hiển thị lên.

      Không cần load lại toàn bộ trang, việc cấu hình các plugin cho phép tối ưu việc tải ảnh. Và pload (tải trước nội dung của các link người dùng có thể ghé qua) sẽ cho trang web của bạn một tốc độ cực cao.

    Đây là kết quả mình chụp được từ một trang viết bằng Gatsby

    • Nền tảng hỗ trợ tốt: cũng giống như WordPress thì Gatsby có hệ thống plugin cực kỳ đa dạng hộ trợ tối đa các dev.
    • SEO Optimizer: Như mình nói ở ý trên Gatsby có hệ thống plugin đa dạng, nên Gatsby có các plugin hỗ trợ chọ việc SEO rất tốt.
    • PWA(Progressive Web Apps): Gatsby cung cấp plugin để chuyển trang web của bạn thành từ SPA sang PWA. Giúp trang web của bạn có thể tải về thành ứng dụng trên desktop lẫn trên mobile.

    Nhược điểm của Gatsby JS

    Nền tảng nào cũng có nhược điểm của nó, Gatsby cũng vậy. Theo mình thì nó sẽ có một số nhược điểm sau:

    • Khó tiếp cận: sẽ rất khó khăn để sử dụng và tiếp cận nếu như bạn chưa lập trình bao giờ.
    • Vì Gatsby là một framework web tĩnh nên việc thay đổi nội dung sẽ có vài mặt hạn chế. Nhưng các bạn cũng đừng quá lo lắng vì mọi việc đều có cách giải quyết và khác phục. Mình sẽ nói rõ hơn ở các bài sau

    Những gì bạn cần khi học Gatsby và WordPress

    • Biết cài Node JS và sự dụng cơ chế npm để install các package
    • Có kiến thức cơ bản về React JS như: React props, React states, giao tiếp api trên nền tảng React,…
    • Có kiến thức về WordPress như: Custom field, Custom Post Type, WordPress Api,…

    Tổng kết:

    Càm ởn các bạn

    Bài viết Gatsby JS là gì? Tìm hiểu cơ bản về chúng tôi đã xuất hiện đầu tiên vào ngày Học Wordpss.

    --- Bài cũ hơn ---

  • Tìm Hiểu Cơ Bản Về Gatsby.js
  • Gatsby Js Là Gì? Tìm Hiểu Cơ Bản Về
  • Gatsby.js: Cách Thiết Lập Và Sử Dụng React Static Site Generator
  • Các Phụ Thuộc Js Của Trình Soạn Thảo Frontend Joomla Là Gì?
  • Bắt Đầu Học Lập Trình Frontend Vớiframework
  • React Js Là Gì? Tìm Hiểu Về React Js Chi Tiết 2022

    --- Bài mới hơn ---

  • Học React/redux Qua Ví Dụ Thực Tế: Redux
  • Redux Là Gì? Tại Sao Lại Ứng Dụng Trong Reactjs
  • Tích Hợp Redux Vào Reactjs
  • Chương 1: Làm Quen Với Redux
  • Nodejs Bài 3:template Engines Với Hàm Render() Và Viết Mã Html Với Pug
  • Facebook đã xây dựng một thư viện Javascript nhằm hỗ trợ xây dựng website trở nên nhanh gọn và tiện lợi hơn. Nó được gọi là react JS. Bình thường lập trình viên sẽ nhúng javascript vào code HTML thông qua các attribute, nhưng với reactJS họ có thể chia nhỏ các trang thành các component, mỗi component chứa HTML, js, css của riêng nó. Thông qua đó, các component dễ dàng giao tiếp với nhau tạo thành 1 page trên website. Điều này, ngoài việc giúp website chạy nhanh, dễ mở rộng thì việc quản lý và sử dụng code cũng trở nên dễ dàng hơn và có thể tái sử dụng khi cần.

    Những thành phần chính của Rreact JS

      Redux. Chính là một pdictable state management tool cho ứng dụng javascrip. Đây là thành phần vô cùng quan trọng đối với reactJS giúp các ứng dụng hoạt động một cách nhất quán. Redux bao gồm actions, store, reducers. Một reactJS không bao gồm module chuyên dụng để xử lý dữ liệu. Do đó, reactJS được thiết lập độc lập bằng việc chia nhỏ view thành các component để chúng dễ dàng liên kết chặt chẽ với nhau.
    • JSX. JSX cho phép lập trình viên trích dẫn HTML và sử dụng các cú pháp của thẻ HTML để render các subcomponent. Sự có mặt của JSX giúp tối ưu hóa code nên web sẽ chạy nhanh hơn so với code javascript tương đương.
    • Single – way data flow. Là luồng dữ liệu một chiều từ component cha xuống component con. Cơ chế này sẽ phát huy được vai trò quan trọng của mình khi cấu trúc và chức năng của view trở nên phức tạp.
      Virtual DOM. Lợi thế khi sử dụng virtula – DOM là làm cho tốc độ ứng dụng được tăng đáng kể. Do virutal – DOM vừa đóng vai trò model vừa đóng vai trò là view nên mọi sự thay đổi trên model kéo theo cả sự thay đổi của view và ngược lại. Điều này có nghĩa là view vẫn luôn thực hiện được cơ chế data – binding mặc dù lập trình viên không tác động trực tiếp vào các phần tử DOM ở view.

    Những điều cần biết về reactJS

      ReactJS là một thư viện giúp cho các lập trình dễ dàng quản lý, phát triển web. Ngoài ra, nó còn hỗ trợ xây dựng UI khi có tính tương tác cao. Xây dựng các quanh các component, khi hoạt động react hoạt động trên cả client và render trên cả sever để cả 2 phần này có thể kết nối được với nhau.
      Luôn giữ components nhỏ gọn. Một phần mềm nhỏ gọn thì càng dễ hiểu hơn. Còn với reactJS thì việc giữ component được nhỏ nhất là để tái sử dụng và phát huy được công năng cao nhất.
      Kết hợp reactJS với chúng tôi Redux là một nguồn dữ liệu luồng được nhiều người sử dụng để giúp quá trình đóng gói và tận dụng các thư viện trở nên triệt để hơn. Ngoài ra, bạn còn có thể sử dụng kết hợp với jsx, ES6, babel,…
      Trình Dev Tool của redux và react. Để có thể nhanh chóng tìm được các lỗi trong ứng dụng và inspect ngược lại các component của react thì không thể không tận dụng hai nhân tố trên. Không những thế, trình dev tools của redux và react còn giúp các nhà phát triển web quan sát được trạng thái action và các lý do thay đổi state, back lại state trước.

    Kể từ khi ra mắt, reactJS đã được các nhà phát triển web ưa chuộng và phát triển như vũ bão. Vì vậy, chắc chắn reactJS đã và đang mang lại rất nhiều lợi ích tích cực.

    Tính hiệu suất cao.

    ReactJS của facebook tạo được các DOM riêng. Cách phát triển này giúp cho lập trình viên phát triển web một cách linh hoạt và tăng hiệu suất rất cao. ReactJS sẽ tính toán trước những thay đổi nào cần thực hiện trong DOM và cập nhật cây DOM cho phù hợp với phần mềm. Bằng cách này, reactJS tránh được các hoạt động DOM tốn kèm và cập nhật một cách hiệu quả.

    Dễ học.

    Bạn có thể nắm được các thông tin về reactJS sau vài ngày tìm hiểu. Điều này giúp doanh nghiệp tiết kiệm được thời gian để nhanh chóng xây dựng và hoàn thành dự án của mình. Bởi sự đơn giản của mình nên react là một framework đang được các doanh nghiệp và thương hiệu lớn lựa chọn sử dụng.

    Phát triển trên cả ứng dụng di động.

    Facebook đã nâng cấp khung react để phát triển các ứng dụng dành trên di động cho cả hai nền tảng android và ios để thuận tiện cho người dùng. Chất lượng của giao diện người dùng đóng vai trò quan trọng trong việc lựa chọn nhà thiết kế. Với một ứng dụng có giao diện phong phú, chất lượng cao như reactJS đã làm nên sự phát triển của nó trên trường công nghệ hiện nay.

    Cho phép viết các thành phần tùy chỉnh.

    Các thành phần tùy chỉnh được phát triển dựa trên cú pháp mở rộng tùy chọn của react với JSX. Nó cho phép chấp nhận trích dẫn HTML và làm cho tất cả các thành phần con hiển thị những trải nghiệm thú vị cho lập trình viên.

    Thư viện Javascript.

    JSX là một sự pha trộn tuyệt vời và lành mạnh giữa javascript và HTML. Nó được sử dụng đặc biệt trong reactJS. JSX giúp đơn giản hóa quá trình viết các thành phần cho các trang web và HTML cho phép các lập trình viên hiển thị các hàm mà không cần nối các chuỗi lại với nhau. Lợi thế chính là nó sử dụng các API gốc và kết quả là javascript làm ngăn sắp xếp hoạt động trên các nền tảng.

    – Tiện lợi với SEO. Đa số người dùng đều muốn sở hữu một website dễ dàng tối ưu SEO. Thách thức đối với khung javascript là không thân thiện với công cụ tìm kiếm. Nhưng reactJS thì ngược lại, bạn hoàn toàn có thể chạy trên máy chủ và DOM ảo và sẽ được hiển thị trang web như một trình duyệt thông thường mà không cần bất kỳ thủ thuật nào khác.

    Nâng cao năng suất làm việc của các lập trình.

    Các bản cập nhật thường xuyên nhiều khi trở thành vấn đề nan giải đối với các thiết kế và sử dụng web. Nhiều doanh nghiệp chọn đơn vị thi công họ sẽ yêu cầu bảo hành và hỗ trợ trọn đời. Vì khi một ứng dụng có logic phức tạp, chỉ cần một thay đổi nhỏ có thể ảnh hưởng ít nhiều đến các thành phần khác.

    Để khắc phục vấn đề này, reactJS đã phát triển thêm tính năng tái sử dụng lại các thành phần. Các lập trình viên có thể thêm các thành phần đơn giản như nút, các trường văn bản… Sau đó, di chuyển chúng đến các phần trình bao bọc rồi chuyển tới thành phần gốc. Tăng năng suất phát triển ứng dụng.

    Như vậy, từ những lợi ích trên, reactJS thật sự linh hoạt và mang đến những trải nghiệm tuyệt vời cho người dùng. Cung cấp những giao diện siêu việt cho người dùng. Đó cũng chính là lý do vì sao reactJS rất phù hợp để phát triển các ứng dụng kinh doanh.

    Ngày nay, các doanh nghiệp hầu như không thể thiếu một website để thúc đẩy hoạt động kinh doanh nhưng họ khá bối rối về việc áp dụng công nghệ và phần mềm. Vậy, lựa chọn nào là tốt nhất. Đến đây, ắt hẳn chúng ta đã có câu trả lời cho riêng mình. Đó chính là reactJS – một phần mềm phù hợp với hầu hết các hoạt động kinh doanh của các doanh nghiệp.

    Quy trình làm quen với reactJS.

    • Cài đặt môi trường. Bạn cần có một server nodejs và npm. Sau đó lên truy cập trang chủ của nodejs: https://nodejs.org/en/ và dowload về và cài đặt.

    + Vào ổ E tạo 1 foder chứa tên project rồi bật cmd.

    + Truy cập foder project, gõ code như hình bên dưới.

    Kiểm tra và chạy chương trình nếu không có lỗi.

    ReactJS vẫn không ngừng phát triển và hoàn thiện để nâng cao tính hiệu quả của mình. Trong đó, có một số cập nhật được các nhà phát triển mong đợi như:

    • Có thêm những render mới cùng với các chức năng như add thêm những cú pháp mới, độc đáo hơn vào trong JSX mà không cần đến keys.
    • Cải thiện, xử lý lỗi phát sinh trong component.
    • Cung cấp cách thức có thể phát hiện và xử lý lỗi. Đồng thời, phục hồi nếu xảy ra lỗi một cách rõ ràng hơn trong component.

    Hy vọng rằng với những chia sẻ trên, các bạn đã hiểu reactJS là gì? Và có những kiến thức để tìm hiểu về reactJS chi tiết. Còn nếu bạn đang muốn phát triển web cho doanh nghiệp của mình thì đừng ngần ngại để tìm kiếm một nhà phát triển web để xây dựng một ứng dụng reactJS mượt mà, nhanh chóng và mang đến những trải nghiệm tuyệt vời nhất.

    --- Bài cũ hơn ---

  • Reactjs Là Gì? Tính Năng Và Cách Sử Dụng React Js Như Thế Nào?
  • React.js Mà Nhiều Người Đang Nhắc Đến, Thích Hợp Cho Những Ứng Dụng Web Nào?
  • Vòng Đời (Life Cycle) Trong Jsp
  • Tạo Một Ứng Dụng Java Web Đơn Giản Sử Dụng Servlet, Jsp Và Jdbc
  • Hướng Dẫn Lập Trình Java Servlet Cho Người Mới Bắt Đầu
  • Web hay
  • Links hay
  • Push
  • Chủ đề top 10
  • Chủ đề top 20
  • Chủ đề top 30
  • Chủ đề top 40
  • Chủ đề top 50
  • Chủ đề top 60
  • Chủ đề top 70
  • Chủ đề top 80
  • Chủ đề top 90
  • Chủ đề top 100
  • Bài viết top 10
  • Bài viết top 20
  • Bài viết top 30
  • Bài viết top 40
  • Bài viết top 50
  • Bài viết top 60
  • Bài viết top 70
  • Bài viết top 80
  • Bài viết top 90
  • Bài viết top 100