Tác giả: N.T.A.92

React Context API

React Context API

1. Context API là gì ? Trong các phiên bản trước của React, context được sử dụng như 1 tham số thứ 2 trong constructor của 1 component theo kiểu sau: class MyComponent extends React.Component { constructor(props, context) { super(props, context) } } Tính ứng dụng của context trong các phiên bản trước cũng vô cùng hạn hẹp vì có khuyến cáo nó sẽ bị thay đổi trong tương lai nên việc sử dụng nó cũng được nhiều người cân nhắc. Nhưng từ phiên bản React 16.0.3 mọi thứ đã hoàn toàn thay đổi, khái niệm context đã được cải ... »

Sử dụng Flex trong React Native

Sử dụng Flex trong React Native

1. Khái niệm Flex Khi component khai báo Flex = 1, thì component đó sẽ có kích thước full đầy component cha đang chứa nó. Ví dụ <View style={{flex:1,backgroundColor:black}}> <View style={{flex:1,backgroundColor:red}}></View> <View style={{flex:2,backgroundColor:blue}}></View> </View> View trên ta khai báo flex = 1 => View này sẽ có kích thước full màn hình của thiết bị 2 View còn lại có flex = 1 và flex = 2 là 2 View con. Vì thế View cha màu đen sẽ ... »

Cách tạo một React Component và Publish lên NPM

Cách tạo một React Component và Publish lên NPM

Như bạn đã biết một trong những điểm mạnh của React là tái sử dụng Component, nhất là khi bạn làm việc trong các dự án của Nhật - họ thường xuyên tạo các form với rất nhiều textInput, checkbox, radioButton...vv. Những lúc như vậy bạn sẽ nhận thấy việc tái sử dụng component là vô cùng quan trọng. Thật tuyệt vời nếu ta muốn sử dụng một form upload ảnh hay một form khảo sát hoặc đơn giản là 1 form đăng nhập bao gồm rất nhiều thông tin cần nhập mà chỉ cần gọi một dòng và ... »

Giới thiệu tổng quan về Vue.js

Giới thiệu tổng quan về Vue.js

1. Mô hình MVVM trong Vue.js Vue.js sử dụng mô hình MVVM (Model-View-ViewModel), nhìn vào các chữ đầu viết tắt, chúng ta cũng có thể dễ dàng nhận ra, trong Vue.js có 3 đối tượng cần quan tâm đó là : Model, View, và ViewModel. Ví dụ: Một View : đơn giản là các thẻ html cơ bản, nơi mà chúng ta sẽ render ra dữ liệu để hiển thị cho người dùng. Ở đây, đơn giản nhất mình tạo 1 view đặt tên mà my_view. <div id="my_view"> </div> Một ... »

DESIGNING BEAUTIFUL REST APIs

DESIGNING BEAUTIFUL REST APIs

1. Phân biệt Web và Web service Khi chúng ta truy cập 1 website trên thanh URL của trình duyệt, chúng ta sẽ nhận được 1 trang web. Những thông tin của website sẽ hiển thị ra màn hình để chúng ta đọc được, kết hợp với css và html giúp các thông tin hiển thị đẹp hơn và bắt mắt hơn. Đó là nội dung dành cho người dùng cuối. Trong khi đó, Web Service là 1 dịch vụ web, khái niệm Web Service rộng hơn Web thông thường. Các thông tin Web Service cung cấp là các thông ... »

Vếu JS - Những kiến thức cơ bản

Vếu JS - Những kiến thức cơ bản

VueJs là một thư viện tập trung vào phần view trong mô hình MVVM. VueJs chứa một sức mạnh lớn để xây dựng Single-Page Applications khi được kết hợp với công cụ build và các thư viện/component được xây dựng bởi cộng đồng Mục tiêu của bài hướng dẫn này giúp bạn hiểu được các kiến thức cơ bản nhất, trước khi bước vào thế giới của VueJs. 1. Tạo một thể hiện của Vue. Khi bắt đầu làm quen với VueJs, chúng ta có thể cài đặt VueJs thông qua NPM, Bower hoặc cách đơn giản nhất chỉ ... »

Flexbox layout trong React Native

Flexbox layout trong React Native

Nếu bạn là người thường xuyên làm việc với Web, thường xuyên đau đầu với việc phải chia layout website của mình như thế nào cho phù hợp, đúng như thiết kế. Bạn đã tìm đến rất nhiều cách để dàn layout cho website của bạn như sử dụng các thuộc tính float hoặc kỹ thuật clear float để chia cột cho website, hay lười hơn nữa là sử dụng các CSS Grid Framework để tiết kiệm thời gian. Nhưng với những cách truyền thống này, sẽ rất tốn thời gian hoặc sử dụng framework thì lại không hề tốt ... »

Cải thiện Performance khi render component trong React.js

Cải thiện Performance khi render component trong React.js

React được biết đến với tốc độ thực thi nhanh. Nhưng không có nghĩa là chúng ta không cần tối ưu hóa khi viết code. Một trong những mẹo quan trọng để giúp tăng performance cho ứng dụng react của chúng ta nhanh lên đó chính là optimize hàm render() của react. Chúng ta tạo 1 bài test đơn giản. Để so sánh tốc độ hàm render trong các điều kiện khác nhau. Stateless (functional) components vs stateful (class-based) components Pure component rendering (compnent của react) vs stateless components React 0.14 vs React 15 rendering performance trong môi trường ... »