Tìm ra rằng một nghề nghiệp linh hoạt, được trả lương cao như một nhà phát triển web là giấc mơ là một phần dễ dàng. Điều khó khăn hơn là tìm ra chính xác những kỹ năng bạn cần để có được một công việc. Nếu bạn dự định xây dựng trang web để kiếm sống, bạn có thể biết rằng mình sẽ cần học các ngôn ngữ lập trình như HTML, CSS và JavaScript, nhưng bạn cũng sẽ nhận thấy danh sách công việc của nhà phát triển yêu cầu các kỹ năng ít quen thuộc hơn
Một kỹ năng thú vị mà bạn sẽ thấy bật lên là “React JS. ” Nhưng React JS là gì?
Để trả lời các câu hỏi của bạn và giúp bạn bắt kịp tốc độ với công cụ dành cho nhà phát triển web có giá trị này, chúng tôi đã tập hợp một hướng dẫn hữu ích về React JS là gì
Mục lục
- Phản ứng JS là gì?
- JavaScript là gì?
- Thư viện JavaScript là gì?
- React JS được sử dụng để làm gì?
- JSX
- DOM ảo
- Phản ứng ví dụ về JS
- Tài nguyên cộng đồng React JS
- BẠN có nên học React JS không?
Phản ứng JS là gì?
React JS là một thư viện JavaScript được sử dụng trong phát triển web để xây dựng các yếu tố tương tác trên trang web. Nhưng nếu bạn không quen thuộc với JavaScript hoặc thư viện JavaScript, thì đó không phải là một định nghĩa hữu ích. Vì vậy, hãy lùi lại một bước và giải quyết các điều khoản đó trước
[trở lại đầu trang]
JavaScript là gì?
Bạn có thể đọc tất cả về JavaScript trong hướng dẫn JavaScript Tech 101 đầy đủ của chúng tôi, nhưng đây là TLDR
- JavaScript [hoặc JS] là ngôn ngữ kịch bản được sử dụng để tạo và kiểm soát nội dung web động
- Nội dung web động bao gồm những thứ như đồ họa hoạt hình, trình chiếu ảnh và biểu mẫu tương tác
- Bất cứ khi nào bạn truy cập một trang web nơi mọi thứ di chuyển, làm mới hoặc thay đổi trên màn hình của bạn mà không yêu cầu bạn tải lại trang web theo cách thủ công, thì rất có thể JS là ngôn ngữ làm cho điều đó xảy ra
Hoặc thử định nghĩa một câu này. JavaScript là ngôn ngữ lập trình cực kỳ quan trọng được sử dụng để thêm các tính năng động và tương tác vào các trang web hoặc ứng dụng web [ngoài các cấu trúc cơ bản, tĩnh được tạo bởi các ngôn ngữ như HTML và CSS]
[trở lại đầu trang]
Thư viện JavaScript là gì?
Từ định nghĩa trên, bạn có thể thấy JavaScript đóng vai trò quan trọng như thế nào trong việc phát triển trang web và ứng dụng web. Nhưng có những lúc bạn cần JavaScript để thực hiện các chức năng lặp đi lặp lại—những thứ như hiệu ứng hoạt hình có sẵn hoặc tính năng thanh tìm kiếm tự động hoàn thành. Mã hóa lại các chức năng này mỗi khi chúng xảy ra sẽ trở thành tình huống “phát minh lại bánh xe”. khó chịu. Đây là nơi các thư viện JavaScript xuất hiện
Thư viện JavaScript là bộ sưu tập mã JavaScript viết sẵn có thể được sử dụng cho các tác vụ JS thông thường, cho phép bạn bỏ qua quy trình viết mã thủ công tốn nhiều thời gian [và không cần thiết]. Nếu có một chức năng JavaScript bình thường mà bạn tiếp tục cần viết mã [và các nhà phát triển khác trước khi bạn cần cho các dự án của riêng họ] thì có thể có một thư viện JS để giảm bớt khó khăn cho bạn. Có lý?
OK, vậy hãy quay lại React. Có rất nhiều thư viện JS khác nhau và React JS là một trong số đó—nhưng điều gì khiến nó trở nên độc đáo?
[trở lại đầu trang]
Tại sao các nhà phát triển JavaScript sử dụng React JS?
React là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giao diện người dùng hoặc UI. Về trang web và ứng dụng web, giao diện người dùng là tập hợp các menu trên màn hình, thanh tìm kiếm, nút và bất kỳ thứ gì khác mà ai đó tương tác để SỬ DỤNG trang web hoặc ứng dụng
Ghi chú. độc giả thường hỏi "React JS frontend hay backend?" . chắc chắn giao diện người dùng. Bạn có thể hiểu rõ điều này bằng cách ghi nhớ khía cạnh “trên màn hình” của giao diện người dùng—React được sử dụng riêng cho lập trình “phía máy khách” [xây dựng những thứ mà người dùng sẽ thấy trên màn hình trong cửa sổ trình duyệt của họ], điều này biến React JS thành một thư viện giao diện người dùng
Trước React JS, các nhà phát triển gặp khó khăn khi xây dựng giao diện người dùng bằng tay với “vanilla JavaScript” [nhà phát triển tự nói ngôn ngữ JavaScript thô] hoặc với những người tiền nhiệm React ít tập trung vào giao diện người dùng hơn như jQuery. Điều đó có nghĩa là thời gian phát triển lâu hơn và nhiều cơ hội cho lỗi và lỗi. Vì vậy, vào năm 2011, kỹ sư Jordan Walke của Facebook đã tạo ra React JS đặc biệt để cải thiện quá trình phát triển giao diện người dùng
Ngoài việc cung cấp mã thư viện React có thể tái sử dụng [tiết kiệm thời gian phát triển và giảm khả năng mắc lỗi mã hóa], React còn có hai tính năng chính làm tăng thêm sức hấp dẫn cho các nhà phát triển JavaScript
- JSX
- DOM ảo
Để hiểu rõ hơn về React JS và lý do tại sao bạn nên sử dụng nó, chúng ta hãy xem xét cả hai
[trở lại đầu trang]
JSX
Trọng tâm của bất kỳ trang web cơ bản nào là các tài liệu HTML. Trình duyệt web đọc những tài liệu này và hiển thị chúng trên máy tính, máy tính bảng hoặc điện thoại của bạn dưới dạng trang web. Trong quá trình này, các trình duyệt tạo một thứ gọi là Mô hình Đối tượng Tài liệu [DOM], một cây biểu diễn về cách sắp xếp trang web. Sau đó, các nhà phát triển có thể thêm nội dung động vào dự án của họ bằng cách sửa đổi DOM bằng các ngôn ngữ như JavaScript
JSX [viết tắt của JavaScript eXtension] là một tiện ích mở rộng của React giúp các nhà phát triển web dễ dàng sửa đổi DOM của họ bằng cách sử dụng mã kiểu HTML đơn giản. Và—vì hỗ trợ trình duyệt React JS mở rộng cho tất cả các trình duyệt web hiện đại—JSX tương thích với mọi nền tảng trình duyệt mà bạn có thể đang làm việc với
Tuy nhiên, đây không chỉ là vấn đề thuận tiện—việc sử dụng JSX để cập nhật DOM dẫn đến những cải tiến đáng kể về hiệu suất trang web và hiệu quả phát triển. Làm sao?
[trở lại đầu trang]
DOM ảo
Nếu bạn không sử dụng React JS [và JSX], trang web của bạn sẽ sử dụng HTML để cập nhật DOM của nó [quá trình khiến mọi thứ “thay đổi” trên màn hình mà không cần người dùng phải làm mới trang theo cách thủ công]. Điều này hoạt động tốt đối với các trang web tĩnh, đơn giản nhưng đối với các trang web động liên quan đến tương tác nhiều của người dùng, nó có thể trở thành một vấn đề [vì toàn bộ DOM cần tải lại mỗi khi người dùng nhấp vào một tính năng yêu cầu làm mới trang]
Tuy nhiên, nếu một nhà phát triển sử dụng JSX để thao tác và cập nhật DOM của mình, thì React JS sẽ tạo ra một thứ gọi là Virtual DOM. Virtual DOM [như tên ngụ ý] là một bản sao của DOM của trang web và React JS sử dụng bản sao này để xem những phần nào của DOM thực tế cần thay đổi khi một sự kiện xảy ra [chẳng hạn như người dùng nhấp vào nút]
Giả sử người dùng nhập nhận xét vào biểu mẫu bài đăng trên blog và nhấn nút “Nhận xét”. Nếu không sử dụng React JS, toàn bộ DOM sẽ phải cập nhật để phản ánh thay đổi này [sử dụng thời gian và sức mạnh xử lý cần thiết để thực hiện cập nhật này]. Mặt khác, React quét Virtual DOM để xem những gì đã thay đổi sau hành động của người dùng [trong trường hợp này là một nhận xét được thêm vào] và chỉ cập nhật có chọn lọc phần đó của DOM
Kiểu cập nhật có chọn lọc này tốn ít sức mạnh tính toán hơn và ít thời gian tải hơn, điều này nghe có vẻ không nhiều khi bạn đang nói về một nhận xét trên blog, nhưng—khi bạn bắt đầu nghĩ về tất cả các động lực và cập nhật liên quan đến thậm chí hơi phức tạp
[trở lại đầu trang]
Mã React JS trông như thế nào?
Nếu tất cả những điều này đều hợp lý nhưng bạn vẫn đang thắc mắc, “mã React IS là gì?” . Mỗi dự án được liệt kê ở đây đưa ra ý tưởng về những gì có thể xảy ra với React JS và xem mã nguồn được sử dụng để xây dựng dự án đó
Trong khi đó, nếu bạn vẫn đang tự hỏi chính xác “có thể làm gì với React JS?”
Và cuối cùng, nếu bạn đang tìm hướng dẫn về React JS cùng với các ví dụ về React JS cho người mới bắt đầu, bạn có thể truy cập thẳng vào nguồn với ReactJS. org's Intro to React, hướng dẫn về React JS không yêu cầu kinh nghiệm hoặc kiến thức trước đó. Cho dù bạn đã làm việc với thư viện React hay bạn vẫn đang tìm cách cài đặt React, thì đây là một nơi tuyệt vời để bắt đầu
[trở lại đầu trang]
Hệ sinh thái React JS
Người ta thường thấy React JS được mô tả vừa là thư viện JavaScript VÀ khung JavaScript, vậy đó là gì?
Tại Skillcrush, nhóm chương trình giảng dạy của chúng tôi định nghĩa React JS là một thư viện JavaScript chứ không phải một framework. Đây là một dấu hiệu đặc biệt quan trọng
Sự khác biệt giữa các thư viện JavaScript [như React] và các khung JavaScript [như Angular] nằm ở chỗ—trong trường hợp thư viện—nhà phát triển áp dụng mã thư viện trong các phiên bản riêng lẻ yêu cầu nó. Tuy nhiên, khi nói đến các khung, khung này tạo ra một giàn giáo sắp xếp trang web hoặc ứng dụng của bạn và cung cấp các khu vực dành riêng cho mã khung được cắm vào
Để tìm hiểu sự khác biệt giữa một thư viện như React JS vs Angular [khung], bạn có thể nghĩ mã từ thư viện Javascript về nội thất và đồ trang trí cho ngôi nhà bạn đã xây dựng, trong khi khung là mẫu nhà mẫu
React JS đôi khi bị nhầm với một framework toàn diện vì hệ sinh thái mạnh mẽ và khả năng mở rộng của nó khiến nó trở thành một thư viện JavaScript đa năng. Hãy nhớ rằng, khi bạn sử dụng React JS để xây dựng trang web và giao diện người dùng ứng dụng web, bạn có quyền truy cập vào
- Các đoạn mã và thành phần phản ứng [xây dựng các khối mã React được sử dụng để tạo các phần cụ thể của giao diện người dùng]
- Tùy chọn sử dụng JSX để thao tác trực tiếp với DOM của bạn
- DOM ảo để cải thiện hiệu suất trang web của bạn
Nhưng trên hết, React JS là một dự án mã nguồn mở, nghĩa là bất kỳ ai cũng có thể tải xuống và sửa đổi mã nguồn của nó miễn phí. Điều này cũng có nghĩa là, bất kể chức năng giao diện người dùng cụ thể nào mà bạn muốn xử lý bằng React JS, sẽ có một thư viện React đáp ứng nhu cầu của bạn. Kích thước thư viện React của bạn có thể tăng theo cấp số nhân với các tiện ích bổ sung thư viện do cộng đồng React quản lý, từ bộ sưu tập các tính năng UI riêng lẻ đến các mẫu React JS hoàn chỉnh để xây dựng UI từ đầu
[trở lại đầu trang]
Tôi có nên học React JS không?
Nếu bạn muốn làm việc với tư cách là nhà phát triển web giao diện người dùng [có nghĩa là xây dựng giao diện người dùng], câu trả lời là CÓ
Tìm kiếm thành công trong phát triển web có nghĩa là sử dụng các công cụ phù hợp để làm cho mã của bạn hiệu quả và hiệu quả nhất có thể. Và—khi nói đến việc xây dựng giao diện người dùng—React JS là một công cụ bạn cần biết cách tận dụng
Nếu bạn đã sẵn sàng với React [cộng với các kỹ năng quan trọng khác của nhà phát triển web như JavaScript, HTML và CSS], bạn có thể đăng ký ngay hôm nay cho Khóa học Skillcrush Front End Developer + React JavaScript của chúng tôi. Khóa học trực tuyến này được thiết kế để hoàn thành trong bốn tháng bằng cách chỉ dành một giờ mỗi ngày cho các tài liệu
[trở lại đầu trang]
Công nghệ có phù hợp với bạn không?
Bạn sẽ học. Nghề công nghệ có phù hợp với bạn không Nghề công nghệ nào phù hợp với thế mạnh của bạn Bạn cần có những kỹ năng gì để đạt được mục tiêu của mình
Scott Morris
Scott Morris là nhà văn và nhà sản xuất nội dung của Skillcrush. Giống như tất cả các thành viên trong nhóm của Skillcrush, anh ấy làm việc từ xa [trong trường hợp của anh ấy là từ Napa, CA]. Anh ấy tin rằng nội dung đáng đọc [và khán giả của bạn có thể tìm thấy. ] tạo thương hiệu mà mọi người theo dõi. Anh ấy có kinh nghiệm viết về các chủ đề bao gồm việc làm và công nghệ, tiếp thị kỹ thuật số, trục xoay nghề nghiệp, bình đẳng giới, nuôi dạy con cái và văn hóa đại chúng. Trước khi bắt đầu sự nghiệp của mình với tư cách là một nhà văn và nhà tiếp thị nội dung, anh ấy đã dành 10 năm làm cha mẹ toàn thời gian cho hai cô con gái Veronica và Athena