viblo.asia

Immutable data trong ReactJs và cách xử lý immutable đơn giản hơn.

I. Mở đầu Khi mới làm quen với React hay Redux, khái nhiệm Immutable ít nhiều đều gây cho chúng ta một chút bối rối, hiểu đơn giản thì Immutable ám chỉ việc không thay đổi trực tiếp state của app mà thay vào đó, chúng ta luôn return giá trị mới của state mỗi khi cần update một phần hay toàn bộ state. Immutable ít nhiều đã khiến mình bối rối khi làm quen với React, điều đó cũng tương tự khi ta làm việc với state trong Redux. function...

viblo.asia

Tìm hiểu và sử dụng React Portal

Trong bài viết này, mình sẽ chia sẻ về Portal trong Reactjs, đây là một API nghe có vẻ khá xa lạ và ít được sử dụng, tuy nhiên mình dám chắc là trong quá trình phát triển ứng dụng web với React bạn đã sử dụng nó rồi, mà chưa để ý thôi. Vậy Portal là gì, theo document của React, Portal cho phép chúng ta render một phần HTML đôc lập với commponent tree, để mình giải thích chút nhé: Bình thường trong project reactjs ta có file index.html <html> ...

viblo.asia

Sử dụng React Hook chia sẻ logic giữa các React component.

Mở đầu Component, State, Props, Component Lifecycle,... là những thuộc tính quan trọng nhất của React, mình tin chắc là bạn không thể tạo ra ứng dụng tốt với React nếu không nằm lòng và vận dụng linh hoạt chúng. Để sử dụng đầy đủ các tính năng trên, component mà chúng ta xây dựng phải là một class component, với cú pháp quen thuộc sau: import React from 'react' class App extends React.Component { state = { name: '' } ...

viblo.asia

Sử Dụng Destructuring Assignment Trong Javascript

Giới thiệu Trong bài viết này, mình xin chia sẻ về Destructuring Assignment - một cú pháp Es6 cực kỳ hữu dụng của Javascript mà mình gần như dùng nó hàng ngày, mỗi khi làm việc với JS. Theo định nghĩa chính thức trên MDN, "Destructuring Assignment là một biểu thức Javascript cho phép lấy giá trị (value) từ bên trong mảng (array) hay thuộc tính (properties) trong object và gán cho các biến (variable) mới". Trong quá trình phát triển ứng dụng JS,...

viblo.asia

Phân biệt function declaration và function expression

Trong bài viết này mình xin chia sẻ về function declaration và function expression trong javascript, chúng ta có thể hiểu đó là 2 cách khác nhau để tạo nên một function. Điểm khác biệt: tên của function khi bạn tạo ra một function có tên, đó gọi là function declaration Function Declaration: function handleClick() { console.log("clicked") } Function Expression: const handleClick = function() { console.log("clicked") } Hoặc sử dụng cú pháp es6 tạo ra...

viblo.asia

Tự Setup Reactjs Project Cơ bản Với Webpack 4 và Babel 7 (phần 2)

Mở Đầu Trong phần trước Tự Setup Reactjs Project Cơ bản Với Webpack 4 và Babel 7 (phần 1), mình đã giới thiệu đến các bạn các bước cơ bản để tự xây dựng một react project hiện đại với các công cụ webpack và babel. Trong phần tiếp theo mình sẽ giới thiệu tiếp cách xây dựng project của chúng ta trở nên hoàn thiện và đầy đủ hơn. Production mode và Development mode Hiện trạng của project là ta đã có các thiết lập cơ bản trong...

viblo.asia

Xử lý event click-out-side trong Reactjs

1. Mở đầu Trong bài viết này, mình xin trình bày phương pháp viết function xử lý sự kiện (event) Click Outside trong Reactjs. Trong ứng dụng Web chúng ta thường gặp function này trong các khối UI như Tooltip, Modal hay Dropdown, và thường được xử lý sẵn bởi các Library như Bootstrap, Material-ui,... 2. Ý tưởng Đầu tiên hãy ngừng nghĩ về điều này nhé, vì chẳng có event nào như thế này cả. class App extends React.Component { handleClickOutside = () =>...

viblo.asia

Tìm Hiểu về Render Props trong React

1. Giới thiệu về render props Render props không phải là một API của React, mà là một kĩ thuật xử lý việc chia sẻ logic giữa các React Component bằng cách sử dụng prop có value như một function. Hiểu đơn giản thì render props là một phương pháp có mục đích tương tự với phương pháp sử dụng Higher Order Component, giúp chúng ta sử dụng lại logic trên nhiều component. Render Props được dùng để tạo nên thư viện vô cùng nổi tiếng trong hệ...

viblo.asia

Giới thiệu về React Hooks trong React 16.7-alpha

Mở đầu 2018 là năm mà React thật sự chuyển mình quá mạnh mẽ, chúng ta chào đón React Fiber - kiến trúc mới trên phiên bản React 16, cùng một loạt những thay đổi về lifecycle và nhiều API mới liên tục xuất hiện trong những phiên bản nhỏ gần đây như Context API, Fragment, React Lazy, ForwarRefs,... Khi mà chưa kịp làm quen với mớ API mới ở trên thì tại Hội nghị React cuối tháng 10 vừa qua, Hooks được giới thiệu trên phiên bản React...

viblo.asia

Giới thiệu ngôn ngữ lập trình Go (Golang)

Golang là một ngôn ngữ khá mới Ngôn ngữ lập trình Go, cũng thường được gọi là Golang, là một ngôn ngữ lập trình được phát triển bởi một nhóm chuyên gia tại Google. Cụ thể ngôn ngữ Golang được hình thành vào tháng 9 năm 2007 bởi Robert Griesemer, Rob Pike và Ken Thompson. Sau đó Golang Lần đầu tiên được giới thiệu vào tháng 11 năm 2009 và phiên bản đầu tiên của nó được phát hành vào tháng 12 năm 2012. Trang web chính thức ngôn ngữ...

viblo.asia

Một vài lưu ý khi sử dụng React-router

React-router là thành phần quan trọng bậc nhất trong hệ sinh thái React, vì hầu như ứng dụng React-Single-Page nào cũng đều cần điều hướng (routing) và tương tác với Browser history cả. React-router thật sự mạnh mẽ và là lựa chọn tốt nhất cho nhiệm vụ này. React-router cũng hoàn toàn dễ để sử dụng và nắm bắt, bạn sẽ chẳng tốn nhiều công sức để áp dụng ngay vào ứng dụng của mình. Bài viết này xin được chia sẻ một vài lưu ý...

viblo.asia

Một vài Tips với Reactjs Dev

1. Bạn có yêu thích React ? Chắc hẳn bạn biết React không phải là hệ sinh thái duy nhất, cũng không dám chắc chắn là tốt nhất cho việc phát triển ứng dụng Web. Nhưng tôi tin chắc React thực sự tốt, ổn định và mạnh mẽ trong lĩnh vực này. Nếu bạn đã từng sử dụng,hoặc trải qua vài Project với React, tôi sẽ đưa ra vấn đề về việc bạn có thật sự yêu thích nó, vì chỉ có tình yêu hay sự đam mê mới giúp chúng ta có thêm...

viblo.asia

Tại sao chúng ta nên sử dụng Angular

Mở đầu Nếu đã từng xây dựng một vài ứng dụng Web, chắc hẳn bạn đã từng nghe đến cái tên Angular, một Frameworks Javascript giúp chúng ta xây dựng ứng dụng Web đầy đủ tính năng từ phía Client. Angularlần đầu được phát hành bởi gã khổng lồ Google vào năm 2010 với phiên bản AngularJS, sau đó đã có chỗ đứng khá vững chắc trong một thời gian dài, phiên bản Angular 2 phát hành năm 2016 mang đến một bước chuyển mình vượt bậc,...

viblo.asia

Hai phương pháp điều hướng (Navigation) trong ứng dụng React-Native

Mình là một reactjs - developer và mới tìm hiểu React-Native, React-Native thực sự là dễ để làm quen, đặc biệt là việc xây dựng giao diện với phương pháp code khá tương đồng với CSS (Nếu bạn sử dụng thư viện styled-components thì dev phần giao diện sẽ càng gần gũi với CSS hơn) Trong bài viết này, mình xin phép chia sẻ hai phương pháp điều hướng giao diện (Navigate Screen) trong ứng dụng React-Native. Khởi tạo Project Mình thường dùng...

viblo.asia

Giới thiệu về Progressive Web Apps

Progressive Web App (PWA) là xu hướng mới nhất trong phát triển ứng dụng di động sử dụng công nghệ Web. Đã được ứng dụng khá phổ biến trên thiết bị Android, tuy nhiên phải mãi đến phiên bản 11.3, Apple mới cho phép PWA trên hệ điều hành IOS. Thực chất PWA không phải là một công nghệ mới, mà là một khái niệm để chỉ một nhóm các kĩ thuật với mục đích tạo ra trải nghiệm tốt hơn đối với các ứng dựa trên nền web...

viblo.asia

Tìm hiểu Next - Framework phát triển ứng dụng React Server-side Rendering (P1)

Phần Một: Giới thiệu Nextjs là một framework cho phép xây dựng ứng dụng Reactjs theo hướng server-side rendering. Như đã biết, các ứng dụng web SPA (single-page-application) được xây dựng nên từ các framework phổ biến hiện nay như reactjs, angular hay vuejs... là các ứng dụng client-side rendering, giả sử khi ta mở một ứng dụng reactjs hay vuejs, ta sẽ nhận về từ server một file html "rỗng" với chỉ một phần tử DOM duy nhất, thường là...

viblo.asia

Những điểm mới trong React phiên bản 16.3.0

Việc ứng dụng React để xây dựng ứng dụng web đã trở nên rất phổ biến. React khá là dễ sử dụng, cú pháp khá gần với Javascript so với các thư viện khác, hiệu năng cao và có cộng đồng sử dụng rất phong phú. Và một điều quan trọng đó là Facebook rất chú ý trong việc làm cho đứa con của mình ngày một hoàn thiện hơn với những bản cập nhật định kỳ. Chỉ mới vài tháng trước, React phiên bản 16.0 đã mang đến rất nhiều...

viblo.asia

Điều bạn cần tập trung khi bắt đầu học lập trình Web.

Có một người bạn gần đây nhờ tôi giúp đỡ. Anh ta đã tự học lập trình web trong 18 tháng nhưng vẫn cảm thấy hoang mang, thiếu tự tin bởi vì anh ta thấy có quá nhiều bài hướng dẫn, kiến thức mới trên mạng. Và rồi anh ta bị kẹt trong mớ những thắc mắc như: "Tôi nên học Angular hay React?", "Nên theo Front-end hay là Back-end đây?",... Điều này gợi ra trong tôi nhiều cảm xúc mà mình từng trải qua, và chắc hẳn nhiều...

viblo.asia

Build on/off toggle state function in Rails

Xây dựng chức năng chuyển trạng thái on-off trong Rails app. Trong quá trình làm trang web với Rails, mình cần làm một chức năng là người dùng click thay đổi trạng thái on/off và lưu ngay vào database. Có rất nhiều cách làm cho chức năng này, ở đây mình sử dụng ajax để gửi data lên server và cập nhật view sau khi update trên server thành công. Bài toán Bài toán đặt ra là mình có một bảng option_groups, bảng này có một trường lưu trữ trạng thái...

viblo.asia

Thao tác với Forms trong Rails 4

Khi phát triển ứng dụng web nói chung và với Rails nói riêng, có thể có khi chúng ta gặp trường hợp khi chúng ta dùng nested form với @post has_many comments mà chúng ta cần submit lưu các comments tại 1 tab sau đó submit tab form @post chính thì cần lưu các comments vừa save thuộc vào @post. Chú ý là chỉ có tab chính của form @post mới submit theo dạng html hoặc ajax, tất cả các tabs còn lại đều submit dùng JS. (bởi vì chỉ khi submit form chính để tạo...