Mỗi Lập trình viên Front end và Lập trình viên web đều biết việc viết cùng một đoạn code ở nhiều nơi là không tốt.
Nếu cần thêm một button ở nhiều trang, họ buộc phải thực hiện rất nhiều code. Họ phải đối mặt với những thách thức để làm lại hầu hết code ngay cả khi tạo các component thay đổi thường xuyên.
Các lập trình viên muốn có một Framework hoặc thư viện cho phép họ chia nhỏ các thành phần phức tạp và sử dụng lại code để hoàn thành dự án của họ nhanh hơn.
Đây là lúc React xuất hiện và giải quyết vấn đề này.
React là thư viện javascript phổ biến nhất để xây dựng giao diện người dùng. Nó nhanh, linh hoạt và nó cũng có một cộng đồng trực tuyến mạnh mẽ để giúp bạn mọi lúc.
Điều thú vị nhất là React dựa trên các thành phần (components), bạn chia code phức tạp của mình thành các phần riêng lẻ, tức là các component và điều đó giúp các lập trình viên tổ chức code của họ theo cách tốt hơn.
Rất nhiều công ty đang chuyển sang React và đó là lý do mà hầu hết những người mới bắt đầu học lập trình và các lập trình viên có kinh nghiệm bắt đầu học ReactJS.
Tuy nhiên, tìm hiểu thư viện cũng khá khó nhằn đấy..
Có nhiều người đã từng bị quá tải khi cố gắng tìm hiểu React.js mà không biết lộ trình học từng bước.
Thế nên ở đây, mình đưa ra một lộ trình học ReactJS đầy đủ bao gồm cả các điều kiện tiên quyết cơ bản để bắt đầu đi vào học ReactJS.
Bắt đầu nào…
Điều kiện tiên quyết để học ReactJS
-
Kiến thức cơ bản về HTML, CSS và JavaScript.
-
Một số tính năng ES6 của Javascript như: Let và Const, Arrow Function, Class và từ khóa this.
-
Các nguyên tắc cơ bản về NodeJS và Code Editor
1. HTML, CSS và JavaScript
Nếu bạn là một lập trình viên có kinh nghiệm thì hãy bỏ qua phần này. Đây là phần dành cho những người mới bắt đầu học lập trình.
Hầu hết các Lập trình viên Web hay Lập trình viên Front end đều bắt đầu hành trình của họ với ba thứ này.
Đây là nền tảng cơ bản của nền tảng lập trình web và tất cả chúng làm việc cùng nhau để tạo ra ứng dụng web / trang web có đầy đủ chức năng.
Hãy coi cơ thể người như một trang web hoặc ứng dụng web.
-
HTML có thể được coi là cấu trúc hay “Bộ xương”, của cơ thể cho biết điều gì phải đến ở đâu.
-
CSS xác định kiểu là “Da, Thịt, Quần áo”, cho biết một phân đoạn cụ thể sẽ trông như thế nào với Màu sắc, Chiều cao, Chiều rộng, v.v.
-
JavaScript định nghĩa chức năng là một phần của “Bộ não, Hệ thần kinh, Mạch máu” cho biết mỗi bộ phận phải làm gì.
> Tự học lập trình JavaScript ngay!
> Note: Để đủ khả năng tự học React.js bạn không cần học HTML, CSS quá kỹ đâu. Tìm hiểu cơ bản về các tính năng phổ biến sau đó có thể chuyển ngay lên JavaScript và React.js.
2. Tính năng ES6 của JavaScript
ES6 là một phiên bản của JavaScript và có rất nhiều tính năng nổi bật.
Để bắt đầu với ReactJS, bạn cần biết về Arrow Functions, Let và Const, Class và từ khóa ‘this’.
Arrow Function là tính năng cho phép bạn viết cú pháp hàm ngắn hơn. Nó làm cho code của bạn sạch sẽ và dễ đọc hơn.
Thử kiểm tra đoạn code bên dưới…
// Trước ES6
// Bạn có thể viết hàm như thế này
function phuongThuc1()
{
console.log('niithanoi.edu.vn');
}
// Hoặc
var phuongThuc2 = function(){
console.log('niithanoi.edu.vn');
}
// Từ ES6+
var phuongThuc3 = () => {
console.log('niithanoi.edu.vn');
}
Let và Const: Để quản lý code tốt hơn, từ ES6 bạn sẽ sử dụng từ khóa let và const thay vì từ khóa var. Cả hai đều khác với var, nói một cách đơn giản…
-
let là từ khóa xác định một biến cục bộ giới hạn phạm vi của chúng đối với khối mà chúng được khai báo.
-
const cũng giống let, nhưng dùng để xác định một biến hằng số có giá trị không thể thay đổi.
Class và từ khoá this: Bạn sẽ phải học các khái niệm Lập trình hướng đối tượng như Class, Medthod, Object trong ES6.
Bạn có thể đã học về các khái niệm này bằng các ngôn ngữ khác như C ++ hoặc Java.
Đọc bài viết Class trong JavaScript để hiểu hơn về lập trình hướng đối tượng với JS.
Và xem thêm các tính năng mới của phiên bản ES6
Còn về từ khóa this trong JS, bạn có thể hiểu đơn giản là nó dùng để đại diện cho đối tượng hiện tại đang được thực thi.
Đảm bảo rằng bạn hoàn toàn làm chủ khái niệm về this, bởi nó rất quan trọng nhưng lại khá khó hiểu.
Cùng với đó, bạn cần tìm hiểu thêm về các phương thức call, apply và bind (dùng để ràng buộc / kết nối từ khóa this với một đối tượng).
3. Học Nodejs và Code Editor
Hiểu biết về các nguyên tắc cơ bản của NodeJS là rất quan trọng để làm việc với ReactJS.
Theo ngôn ngữ đơn giản, NodeJS là một môi trường thực thi cho javascript. Nhiều người cho rằng đó là một ngôn ngữ lập trình nhưng điều đó không đúng sự thật.
Mọi trình duyệt đều có JavaScript Engine được nhúng vào các trình duyệt, ví dụ: Chrome có V8 Engine và Mozilla Firefox có SpiderMonkey.
Nhưng, bạn vẫn không thể thực hiện bất kỳ thao tác nào bên ngoài trình duyệt như thao tác với tệp, thao tác với hệ điều hành, mạng và vì thế NodeJS đã ra đời.
NodeJS cho phép bạn thực hiện tất cả các thao tác này bên ngoài trình duyệt. Nó được nhúng với V8 Engine của chrome.
Bây giờ bạn có thể đã khá quen thuộc với NodeJs vì vậy chúng ta hãy thảo luận về tất cả các tính năng của Node bạn phải biết để học React.
Đầu tiên, NPM (Node Package Manager): NPM là một trình quản lý package để cài đặt Packages và Node modules vào dự án của bạn giống như PIP cho python.
Tiếp theo, từ khóa IMPORT và EXPORT.
-
Import: Sau khi bạn cài đặt Node module bằng NPM trong dự án của mình, bạn sẽ phải sử dụng từ khóa import để sử dụng module đó.
-
Export: Sử dụng từ khóa này khi bạn đang tạo một module / component và bạn chỉ phải return một phần, không phải tất cả các phương thức và biến.
Bạn có thể sử dụng bất kỳ trình soạn thảo code nào để làm việc trên React. Tuy nhiên, rất nhiều lập trình viên web thích làm việc với Visual Studio Code - VS CODE - (Rất khuyến khích), Sublime Text hoặc Atom.
Đến đây, bạn đã học đủ kiến thức tiên quyết để bắt đầu tiếp tục học Reactjs.
Nhưng nên nhớ, vận dụng kiến thức của các công nghệ trên để làm một dự án web để tổng hợp lại kiến thức, vận dụng nhuần nhuyễn chúng nhé.
4. Bắt đầu học Reactjs
Để học Reactjs bạn cần tập trung vào từng chủ đề, lần lượt như sau.
4.1. Nguyên tắc cơ bản của Reactjs
Tất cả những điều chúng ta đã thảo luận ở trên là điều kiện tiên quyết của ReactJS. Bây giờ khi bạn đã học được tất cả những điều trên, đã đến lúc bắt đầu sử dụng React.
Hãy hiểu khái niệm cơ bản về React trước. Mình sẽ cung cấp cho bạn một cái nhìn tổng quan ở đây.
Reactjs là một thư viện Javascript do Facebook phát triển để xây dựng các Giao diện người dùng tương tác.
Nó tuân theo kiến trúc dựa trên components.
Có nghĩa là bạn sẽ chia toàn bộ phần giao diện người dùng của mình thành các thành phần có thể sử dụng lại, tất cả đều được tạo riêng biệt và cuối cùng được lắp ghép vào một component cha và sau đó được render.
Dưới đây là một số nguyên tắc cơ bản, quan trọng cần học trong ReactJS…
-
State: Về cơ bản ‘state’ giữ biến đồng bộ. Nếu bạn thay đổi giá trị của một biến state thì thay đổi sẽ được phản ánh ngay lập tức ở tất cả những nơi mà biến cụ thể được sử dụng.
-
Props: Giống như các đối số được truyền trong một hàm hoặc phương thức. Trong React, Props (đối số) được chuyển vào thẻ HTML làm đối số đầu vào.
-
Functional Components, Class Components.
-
Tạo kiểu (CSS) trong React.
-
Tìm hiểu cách kết nối với các API với ứng dụng React.
Bạn có thể tìm hiểu kỹ càng những điều này ở trên trang chủ của React. Khi bạn đã hiểu cơ bản về React, bạn có thể bắt đầu xây dựng một số dự án cơ bản như…
-
Ứng dụng máy tính đơn giản
-
Hiển thị thống kê người dùng của GitHub bằng GitHub API
4.2. React Router
React Router sẽ giúp bạn hiểu cách hoạt động của routing trong một ứng dụng của React. Cách tải nội dung của một trang cụ thể hoặc cách chuyển hướng đến một trang cụ thể bằng React Router.
Ví dụ: Để chuyển hướng từ trang ‘home’ sang trang ‘blog’, bạn sẽ phải đặt định tuyến để nó chỉ có thể hiển thị nội dung của trang ‘blog’.
Một khi bạn đã hiểu về React Router, bạn có thể thực hiện một số dự án như Một ứng dụng CURD đơn giản hoặc sao chép Hacker News
4.3. Tìm hiểu về Webpack
Webpack là một module trong Javascript giúp bạn duy trì các phần phụ thuộc dưới dạng tệp tĩnh cho dự án của mình để các lập trình viên không phải làm điều đó. Webpack cũng đi kèm với bộ tải (Loaders).
Loaders giúp chạy các tác vụ cụ thể xung quanh dự án của bạn. Bạn có thể đọc để hiểu thêm trại Trang chủ của Webpack.
4.4. Server Rendering
Học khái niệm về Server Rendering sẽ giúp bạn tạo các thành phần trong máy chủ và hiển thị thành phần đó dưới dạng HTML trong trình duyệt của bạn và khi tất cả các Module JavaScript được tải xuống trong trình duyệt, tiếp theo là giai đoạn React thực hiện việc của mình.
Đó là một trong những tính năng thú vị nhất của React và nó có thể được sử dụng với bất kỳ công nghệ back-end nào.
4.5. Tìm hiểu về Redux
Trong một ứng dụng phức tạp, bạn sẽ phải quản lý trạng thái giữa các thành phần. Redux là một thư viện javascript giải quyết vấn đề này và nó giúp bạn duy trì trạng thái ứng dụng.
Trong Redux, bạn lưu trữ tất cả các trạng thái của mình trong một nguồn duy nhất.
Tóm lại về lộ trình học Reactjs
Như vậy, mình đã giới thiệu cho bạn tất cả về lộ trình học Reactjs ngay từ đầu. Đây là những thứ bạn cần phải học qua:
-
Nguyên tắc cơ bản của Reactjs: Kiến trúc, State, Props, Fucntional / Class components, CSS trong Reactjs, APIs
> Hiểu rõ nhu cầu tuyển dụng, học tập React.js ngày càng cao. NIIT - ICT Hà Nội triển khai KHÓA HỌC FRONT END (với React.js) để giúp bạn nhanh chóng hoàn thành lộ trình học React.js này từ đầu. Tham gia ngay nếu bạn thực sự muốn học sớm.
Hoặc nếu bạn muốn học cả Front end và Back end, đặt nền móng cực kỳ vững chắc thì hãy HỌC LẬP TRÌNH (Full stack) với lộ trình dài hơi hơn.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp