Bài 1. Giới Thiệu Keystonejs – Iztuts

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

  • # Setup Hệ Thống Api Với Nodejs Trong 1 Nốt Nhạc
  • Công Ty Dược Phẩm Glaxosmithkline (Gsk): Các Sản Phẩm Nổi Bật
  • Local Storage Là Gì? Nó Giúp Ích Gì Trong Lập Trình?
  • A Javascript Library For Interactive Maps
  • Tìm Hiểu Về Meteor Framework
  • Giới thiệu

    KeystoneJS là một framework mã nguồn mở dành cho việc phát triển các database-driven websites, ứng dụng và APIs bằng chúng tôi Trên nền tảng Expss và MongoDB.

    Keystone sẽ cấu hình Expss – máy chủ web thực tế chúng tôi cho bạn và kết nối với cơ sở dữ liệu MongoDB của bạn bằng Mongoose (Mongoose là thư viện mô hình hóa dữ liệu đối tượng (object data modeling – ODM) cung cấp môi trường mô hình hóa nghiêm ngặt cho dữ liệu của bạn, thực thi cấu trúc khi cần mà vẫn duy trì tính linh hoạt giúp MongoDB trở nên mạnh mẽ)

    Tính năng

    Dynamic Routes: Keystone khởi tạo với những thành phần tốt nhất để thiết lập ứng dụng MV * cho bạn và giúp dễ dàng quản lý các Templates, Views và Routes.

    Database Fields: IDs, Strings, Booleans, Dates và Numbers là các khối xây dựng cơ sở dữ liệu của bạn. Keystone xây dựng trên những thứ này với các loại trường thực tế, hữu ích như name, email, password, address, image và các trường quan hệ (và hơn thế nữa)

    Admin UI được tạo tự động: Dù trong lúc đang xây dựng ứng dụng hoặc khi ứng dụng được vận hành như một hệ thống quản lý nội dung cơ sở dữ liệu, UI của Keystone sẽ giúp bạn tiết kiệm thời gian và giúp quản lý dữ liệu của bạn dễ dàng.

    Code đơn giản hơn: Đôi khi, có thể code phức tạp để làm những việc đơn giản. Keystone giữ cho mọi thứ đơn giản – như tải dữ liệu trước khi hiển thị nó trong chế độ View.

    Xử lý Form: Bạn muốn xác thực một Form, tải lên một hình ảnh và cập nhật cơ sở dữ liệu của bạn với một dòng duy nhất? Keystone có thể làm điều đó, dựa trên các mô hình dữ liệu bạn đã xác định.

    Quản lý Session: Keystone cung cấp sẵn các tính năng xác thực và quản lý Session, bao gồm tự động mã hóa cho các trường mật khẩu.

    Gửi email: Keystone giúp bạn dễ dàng thiết lập, xem trước và gửi email theo template cho ứng dụng của bạn. Nó cũng tích hợp với Mandrill (dịch vụ gửi email giao dịch tuyệt vời của Mailchimp)

    Yêu cầu cần có

    • Hãy chắc chắn rằng bạn đã cài đặt chúng tôi JavaScript runtime. Keystone 4 đã được thử nghiệm nhiều nhất với Node 6, nhưng phải tương thích với các bản phát hành sản xuất mới hơn. Chúng tôi khuyên bạn nên sử dụng các bản phát hành Node LTS (Long Term Support) cho vòng đời hỗ trợ mở rộng và tính ổn định của chúng.
    • Bạn cũng sẽ cần truy cập vào máy chủ cơ sở dữ liệu MongoDB được cài đặt cục bộ hoặc được lưu trữ từ xa. Keystone 4 phải tương thích với các bản phát hành sản xuất hiện tại của MongoDB.
    • Bạn sẽ cần kiến thức làm việc với JavaScript, chúng tôi và npm để sử dụng Keystone. Làm quen cơ bản với các khái niệm cơ sở dữ liệu và MongoDB cũng sẽ hữu ích.

    Bắt đầu từ đâu?

    Hướng dẫn cài đặt nhanh: Nếu bạn muốn có được một dự án và chạy local nhanh nhất, chúng tôi khuyên bạn nên bắt đầu với Keystone Yeoman Generator. Trình tạo Keystone Yeoman giúp bạn tạo một dự án đầy đủ sẵn sàng để npm start với các tính năng tùy chọn như blog cơ bản, feedback form và thư viện hình ảnh.

    Thiết lập từ đầu: Nếu bạn muốn viết code từ đầu, hãy xem 4 bước hướng dẫn giúp bạn cách thiết lập các tệp và cài đặt cốt lõi để giúp bạn bắt đầu với Keystone.

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

  • Hướng Dẫn Xử Lý Json Trong Javascript
  • Jd, Jp Và Cv Là Viết Tắt Của Gì? Tìm Hiểu Về Jd, Jp Và Cv
  • Isotope · Filter & Sort Magical Layouts
  • Bài 19: Tạo Hiệu Ứng Gallery Filter Với Thư Viện Isotope Js
  • Bạn Đã Thực Sự Hiểu Mutable Và Immutable?
  • Tự Làm Blog Với Keystone Cms Và Next.js

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

  • Local Storage, Session Storage Và Cookie
  • Leaflet.js Là Thư Viện Bản Đồ Đơn Giản Nhất Bạn Sẽ Tìm Thấy / Bộ Công Cụ
  • Điều Gì Khiến Meteor Js 1.3 Trở Nên Đặc Biệt?
  • Minify Javascript/css Là Gì? Công Cụ Nén Js/css Trên WordPress
  • Masonry Layout Trong Thiết Kế Web Là Gì?
  • KeystoneJS là một trong những CMS ( Content Management System) tốt nhất được viết bằng Nodejs. Với CLI riêng, nó sẽ auto-generated tất cả các thành phần cần thiết để tạo ra 1 trang web với tính tùy biến cao, dễ dàng chỉnh sửa tùy theo nhu cầu sử dụng. Tuy nhiên, về phần frontend thì Keystone đang sử dụng template engine và chúng ta sẽ tìm hiểu cách tích hợp React vào trong CMS này.

    Next.js is a popular React SSR (Server Side Rendering) framework which allows you to build an SEO friendly React website with minimal configuration. With server side rendering, you can set SEO meta tags on the server before returning to the client. So search engine can crawl the data without running any Javascript, which is especially important for blogs and news websites.

    Chuẩn bị

    node & npm đã được cài đặt từ trước

    Cài đặt KeystoneJS

    Tiếp đến, cài đặt Keystone với Yeoman

    npm install yo -g npm install -g generator-keystone yo keystone

    Sau khi cài đặt thành công thì sẽ hiện bảng thông báo như này:

    … và cấu trúc thư mục sẽ như thế này:

    Chúng ta sẽ thử chạy project bằng

    node keystone

    Cài đặt Next.JS

    Chúng ta sẽ cài đặt một số module sau:

    npm install next react react-dom axios --save

    Tiếp theo, chúng ta xoá 2 thư mục templates & public, thay thế bằng pages , components và static. Project sẽ trông như thế này:

    Tiếp theo, ở file chúng tôi thêm dòng này để init next

    // Next app const next = require('next'); const dev = process.env.NODE_ENV !== 'production'; const app = next({ dev });

    // Start Next app app.ppare() // Setup common locals for your templates. The following are required for the // bundled templates and layouts. Any runtime locals (that should be set uniquely // for each request) should be added to ./routes/middleware.js keystone.set('locals', { _: require('lodash'), env: keystone.get('env'), utils: keystone.utils, editable: keystone.content.editable, }); // Load your project's Routes keystone.set('routes', require('./routes')); // Conp the navigation bar in Keystone's Admin UI keystone.set('nav', { posts: , users: 'users', }); keystone.start(); });

    Tiếp đến ở folder routes, xoá folder views và file middleware.js

    Ở routes/index.js, chúng ta sẽ viết api từ keystone rồi để chúng tôi xử lí vụ routes

    const keystone = require('keystone'); // Setup Route Bindings // Next request handler const handle = nextApp.getRequestHandler(); const Post = keystone.list('Post'); Post.model .find() .where('state', 'published') .sort('-publishedDate') .exec(function (err, results) { if (err) throw err; res.json(results); }); }); return handle(req, res); }); };

    Sau khi sửa chúng tôi và routes/index.js, chạy lại keystone

    Tiếp đến là phần React, tạo thử 1 trang chúng tôi ở /pages

    import { Component } from 'react'; class App extends Component { render() { return ( ); }; } export default App;

    Implement React và Keystone

    Tạo một bài viết mới ở localhost:3000/keystone

    Tiếp đến ở folder /pages, tạo 1 file mới tên là _document.js, thêm thư viện Boostrap:

    import Document, { Head, Main, NextScript } from 'next/document' import flush from 'styled-jsx/server' export default class MyDocument extends Document { static getInitialProps({ renderPage }) { const { html, head, errorHtml, chunks } = renderPage() const styles = flush() return { html, head, errorHtml, chunks, styles } } render() { return ( ) } }

    Call api ở App.js

    import { Component } from 'react'; import axios from 'axios' class App extends Component { static async getInitialProps() { let response = await axios.get('http://localhost:3000/api/posts'); return { posts: chúng tôi }; } render() { return ( .header { padding: 16px 16px; } .content { padding: 16px 16px; } .post { margin-bottom: 16px; } return ( ); }) } ); }; } export default App;

    Tada !

    ====================

    Bài viết được dịch từ https://medium.com/@victor36max/how-to-build-a-react-driven-blog-with-next-js-and-keystonejs-cae3cd9fb804

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

  • Jd Là Gì? Cách Viết Mô Tả Công Việc Trong Tuyển Dụng Ra Sao?
  • Jd, Jp, Js, Cv, Kpa, Kpi Là Gì? Ý Nghĩa Của Chúng Cho Việc Tuyển Dụng Nhân Sự
  • Quản Trị Bằng Jd Và Js
  • Hàm Và Tạo Hàm (Function) Trong Javascript
  • Top 3+ Phần Mềm Đọc File Pdf Miễn Phí Tốt Nhất 2022 Cho Máy Tính
  • 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
  • Phần 1 : Angularjs Là Gì?

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

  • Babel Là Gì Và Sử Dụng Babel Như Thế Nào
  • Webpack Là Gì? Cách Sử Dụng Webpack Để Build Một Project Bất Kì
  • Thẻ Jcb Là Gì? Cách Mở Thẻ Thanh Toán Jcb Đơn Giản
  • Closure Là Gì? Closure Function Trong Javascript
  • Jsc Là Gì? Joint Stock Company Và Các Câu Hỏi Chưa Biết
  • Mở đầu với loạt bài về Angular JS, ở phần này mình sẽ nói qua các khái niệm về Angular JS, các thành phần trong Angular JS, phân tích ưu và nhược điểm của nó.

    AngularJS là cái gì?

    Đây là một mã nguồn mở, 1 framwork cho các ứng dụng web. Được phát triển từ năm 2009, hiện tại được duy trì bởi google và đã ra mắt phiên bản 2.0

    Định nghĩa chính thức được đưa ra như sau :

    AngularJS là một framework có cấu trúc cho các ứng dụng web động. Nó cho phép bạn sử dụng HTML như là ngôn ngữ mẫu và cho phép bạn mở rộng cú pháp của HTML để diễn đạt các thành phần ứng dụng của bạn một cách rõ ràng và súc tích. Hai tính năng cốt lõi: Data binding và Dependency injection của AngularJS loại bỏ phần lớn code mà bạn thường phải viết. Nó xảy ra trong tất cả các trình duyệt, làm cho nó trở thành đối tác lý tưởng của bất kỳ công nghệ Server nào.

    Để học được AngularJS bạn cần phải có những kiến thức cơ bản javascript, object, string …. Việc bạn có hiểu biết chuyên sâu về javascript sẽ giúp cho bạn dễ dàng học AngularJS. Bản chất của AngularJS là hoạt động dạng Single Page, sử dụng API để lấy data, cho nên bạn cần biết các kĩ thuật DHTML, AJAX.

    Đặc trưng của AngularJS

    • Phát triển dự trên Javascript
    • Tạo các ứng dụng client-side theo mô hình MVC.
    • Khả năng tương thích cao, tự động xử lý mã javascript để phù hợp vứi mỗi trình duyệt.
    • Mã nguồn mở, miễn phí hoàn toàn và được sủ dụng rộng rãi.

    Các tính năng cơ bản

    • Scope : là đối tượng có nhiệm vụ giao tiếp giữa controller và view của ứng dụng.
    • Controller : xử lí dữ liệu cho đối tượng $scope, từ đây bên views sẽ sử dụng các dữ liệu trong scope để hiển thị ra tương ứng.
    • Data-binding : tự động đồng bộ dữ liệu giữa model và view
    • Service : là singleton object được khởi tạo 1 lần duy nhất cho mỗi ứng dụng, cung cấp các phương thức lưu trữ dữ liệu có sãn. ($http, $httpBackend, $sce, $controller, $document, $compile, $parse, $rootElement, $rootScope …..)
    • Filter : Lọc các tập con từ tập item trong các mảng và trả về các mảng mới.
    • Directive : dùng để tạo các thẻ HTML riêng phục vụ những mục đích riêng. AngularJS có những directive có sẵn như ngBind, ngModel
    • Temple : một thành phần của view, hiển thị thông tin từ controller
    • Routing : chuyển đổi giữa các action trong controller, qua lại giữa các view.
    • MVC & MVVM : mô hình thiết kế để phân chia các ứng dụng thành nhiều phần khác nhau (gọi là Model, View và Controller) mỗi phần có một nhiệm vụ nhất định. AngularJS không triển khai MVC theo cách truyền thống, mà gắn liền hơn với Model-View-ViewModel.
    • Dependency Injection: AngularJS có sẵn một hệ thống con dependency injection để giúp các lập trình viên tạo ra các ứng dụng dễ phát triển, dễ hiểu và kiểm tra.

    Các components chính

    • ng-app : đị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.
    • ng-bind : gắn kết dữ liệu ứng dụng AngularJS đến các thẻ HTML.

    Ưu điểm của angularJS

    • Cung cấp khả năng tạo ra các Single Page Aplication dễ dàng.
    • Cung cấp khả năng data binding tới HTML, khiến cho người dùng cảm giác linh hoạt, thân thiện.
    • Dễ dàng Unit test
    • Dễ dàng tái sử dụng component
    • Giúp lập trình viên viết code ít hơn với nhiều chức năng hơn.
    • Chạy được trên các loại trình duyệt, trên cả PC lẫn mobile.

    Nhược điểm

    • Không an toàn : được phát triển từ javascript cho nên ứng dụng được viết bởi AngularJS không an toàn. Nên có sự bảo mật và xác thực phía server sẽ giúp ứng dụng trở nên an toàn hơn.
    • Nếu người sử dụng ứng dụng của vô hiệu hóa JavaScript thì sẽ chỉ nhìn thấy trang cơ bản.

    Phần giới thiệu về Angular JS của mình đến đây là kết thúc. Ở phần tiếp theo mình sẽ nói về Directive trong AngularJS.

    All Rights Reserved

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

  • Jsonp Là Gì? Sự Khác Biệt Giữa Jsonp Và Ajax
  • Phân Tích An Toàn Công Việc
  • Phân Tích 4 Bước Của Job Safety Analysis!!
  • Sự Khác Biệt Giữa Jsf, Servlet Và Jsp Là Gì?
  • Misa Jsc Là Gì? Cái Nhìn Tổng Quan Nhất Về Jsc Là Gì
  • Reactjs: Render Props Là Gì?

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

  • Những Khái Niệm Cơ Bản Về Dom
  • Dom Là Gì? Thao Tác Với Dom Bằng Javascript
  • Is There A Way To Select Sibling Nodes?
  • Cửa Hàng Phiên Tốt Cho Ứng Dụng Sản Xuấtmột Máy Chủ Là Gì?
  • Lập Trình Website Khía Cạnh Server
  • Nói một cách dễ hiểu là Render Props là một thủ thuật giúp chúng ta sử dụng lại logic của một Component cho một Component khác. Render Props được sử dụng như một props với giá trị là một function.

    Thông thường nó có dạng như sau:

    Giả sử, bạn có một Component để theo dõi và quản lý tọa độ của con chuột trên màn hình. Component này có nhiệm vụ là lưu lại tọa độ (x,y) của con chuột. Đơn giản nó được cài đặt như sau:

    Component Mouse có state là hai vị trị (x,y) của con chuột.

    Sau đó, chúng ta lại có một Component khác muốn sử dụng tọa độ (x,y) này để làm gì đó. Ví dụ ở đây ta có một Component là Cat. Nó là một hình của một con mèo. Và yêu cầu ở đây là mỗi khi chúng ta di chuyển con chuột trên màn hình thì hình ảnh con mèo này(Cat) sẽ chạy theo vị trí con chuột.

    Nếu chưa biết đến Render Props, chúng ta có thể viết Component Cat như sau:

    Như các bạn thấy thì chúng ta tạo nên một component tên là MouseWithCat. Và trong hàm render của nó có một component khác là Cat. Component Cat nhận vào tọa độ (x,y) của con chuột để di chuyển hình ảnh con mèo. Nó hoạt động tốt đúng không nào.

    Nhưng bài toán khác đặt ra ở đây là nếu chúng ta có một component khác là Dog, Pig, Chicken,… và cũng muốn làm những nhiệm vụ giống như Cat thì sao? Với giải pháp hiện tại thì chúng ta chỉ có cách copy component MouseWithCat và sử lại tương ứng cho những component mới: Dog, Pig, Chicken,…

    Với cách làm này, chúng ta bị lặp code rất nhiều. Vậy có cách nào để sử dụng lại logic của component Mouse hay không? Và mục đích chính cũng là hạn chế lặp code. Code sẽ tập trung hơn khi mà chúng ta muốn thay đổi gì đó, chỉ cần sửa một chỗ.

    Một giải pháp khác là dùng Render Props như sau:

    Như các bạn có thể thấy tất cả logic của Mouse đã được tách riêng ra một component. Cho nên khi chúng ta muốn sử dụng tọa độ (x,y) của Mouse chỉ việc truyền một Render Props như sau:

    Component Cat có thể thay bằng Dog, Pig, Chicken, …

    Tên props render chúng ta có thể thay đổi thành tên mình thích như children, element, …

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

  • Nodejs Bài 3:template Engines Với Hàm Render() Và Viết Mã Html Với Pug
  • Chương 1: Làm Quen Với Redux
  • Tích Hợp Redux Vào Reactjs
  • Redux Là Gì? Tại Sao Lại Ứng Dụng Trong Reactjs
  • Học React/redux Qua Ví Dụ Thực Tế: Redux
  • Bài 1 : Reactjs Là Gì?

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

  • Tìm Hiểu Những Khái Niệm Lạ Trong Javascript (Phần 1)
  • Hướng Dẫn Sử Dụng Bootstrap Popover (Tooltip)
  • Lệnh Create Trigger Trong Mysql
  • Giới Thiệu Typeof Trong Javascript Cho Người Mới Bắt Đầu
  • Cách Thêm Jquery Trong Tệp Js
  • React.JS là một thư viện Javascript dùng để xây dựng giao diện người dùng. Với cá nhân tôi cũng như nhận xét chung của cộng đồng về ReactJS thì nó nhanh, dễ học và vui.

    Tiếp theo chúng ta sẽ bắt đầu đến với những khái niệm.

    React được xây dựng xung quanh các component, chứ không dùng template như các framework khác. Bạn có thể tạo ra một component bằng các gọi phương thức createClass của đối tượng React, điểm bắt đầu khi tiếp cận với thư viện này.

    Ví dụ.

    Phương thức createClass nhận vào một tham số, là đối tượng mô tả đặc tính của component. Đối tượng này bao gồm tất cả các phương thức để hình thành nên component. Phương thức quan trọng nhất là render, phương thức này được trigger khi component đã sẵn sàng để được render lên trên page.

    Trong hàm đó, bạn sẽ trả về một mô tả cho việc bạn muốn React render cái gì lên trên page. Như trong ví dụ ở trên, đơn giản tôi muốn render một button.

    Chú ý: Hàm render chính là mô tả cụ thể của UI tại bất cứ thời điểm nào. Vì thế nếu dữ liệu thay đổi, React sẽ take care việc update UI với dữ liệu tương ứng. Các bạn có thể hiểu đơn giản là, khi dữ liệu thay đổi, React sẽ tự động gọi hàm render để update lại UI.

    Đây đơn giản là một syntax extension của Javascript. Với nó bạn có thể viết Javascript với những tag giống như XML (XML-like). Về bản chất, các tag thực sự là những lời gọi hàm, sẽ được chuyển đổi trong React code và end up dưới dạng HTML và Javascript trong cây DOM.

    Nhưng với những gì bạn biết ở hiện tại, chỉ cần hiểu đơn giản nó giống như là HTML/XML với một số khả năng khác.

    Nếu bạn muốn lồng nhiều component vào nhau, bạn sẽ làm điều này trong lệnh return của phương thức render.

    Ví dụ.

    Phía trên, tôi đang lồng Form component vào trong App component. Đây là một dạng quan hệ cha con (parent-child) mà bạn có thể dễ dàng nhận thấy trong HTML.

    Phương thức React.render() như các bạn thấy ở trên nhằm mục đích kickstart việc render, và render thừ root component, trong trường hợp trên là App vào trong DOM với container cụ thể là element có id là app

    Nguồn https://kipalog.com

    Hai thẻ thay đổi nội dung bên dưới.

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

  • Sự Kiện Onload Trong Javascript
  • Cách Tốt Nhất Để Kích Hoạt Sự Kiện Thay Đổi Trong Phản Ứng Js Là Gì
  • Promise Api Trong Javascript ” Cafedev.vn
  • Cách Lấy Vị Trí Người Dùng Trong Javascript Với Geolocation Api
  • Quản Lý State Trong React Với React Context Api
  • 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