Ebook lap tring react that don gian

Trang 1 Trang 2 MỤC LỤC LỜI NÓI ĐẦU 4 NỘI DUNG CUỐN SÁCH 5 AI NÊN ĐỌC CUỐN SÁCH NÀY? 6 Yêu cầu trình độ 6 Cách học đúng cách 6 Liên hệ tác giả 7 GIỚI THIỆU 8 Ưu điểm của React 8 TỔNG QUAN REACT 11 Vir.

Trang MỤC LỤC LỜI NÓI ĐẦU NỘI DUNG CUỐN SÁCH AI NÊN ĐỌC CUỐN SÁCH NÀY? Yêu cầu trình độ Cách học cách Liên hệ tác giả GIỚI THIỆU Ưu điểm React TỔNG QUAN REACT 11 Virtual DOM .11 DOM gì? .11 Vấn đề DOM gì? 11 Cơ chế hoạt động Virtual DOM .12 CÀI ĐẶT REACT 13 Cách 1: Viết React trực tiếp HTML 13 Cách 2: Sử dụng Create-React-App CLI 17 Cài đặt Code Editor extension cần thiết 20 XÂY DỰNG ỨNG DỤNG TODOS 26 Giới thiệu ứng dụng Todos .26 Những kiến thức React 27 Tạo components 32 Tạo Header component thêm Styles cho ứng dụng Todo 37 Thêm State 39 Tạo component hiển thị danh sách Todos 42 Controlled Component 46 Gửi xử lý kiện - Handle Events 48 Cập nhật giá trị state sử dụng hàm setState() 51 Sử dụng Destructuring 53 Trang Xóa Todo 54 Thêm Todo .56 Cập nhật Todo vào danh sách 60 FETCHING DỮ LIỆU TỪ API 64 Lý thuyết Request Network 64 Giới thiệu API cung cấp cho ứng dụng Todo 66 Vòng đời Component React 67 Cài đặt axios 68 Lấy danh sách Todos GET request 69 Thêm Todo POST request 71 Xóa Todo DELETE request 72 REACT HOOKS 74 Tìm hiểu Hooks .74 Refactoring mã nguồn Todo App sử dụng Hooks 78 QUẢN LÝ STATE VỚI REDUX 83 nguyên tắc Redux 83 Khi sử dụng Redux? 83 Thành phần Redux 84 Thực hành sử dụng Redux Todo App 85 DEPLOY ỨNG DỤNG REACT .94 Deploy ứng dụng React lên Github Pages .95 BÀI TẬP 100 Project task 101 Đáp án tập tham khảo 103 KẾT NỐI VỚI VNTALKING 105 THÔNG TIN VỀ TÁC GIẢ 106 CUỐN SÁCH KHÁC CỦA VNTALKING .107 Trang LỜI NĨI ĐẦU Nói đến front-end khơng thể không nhắc tới ReactJS Một thư viện Javascript chống lưng ông lớn Facebook Lướt qua trang tuyển dụng lớn, bạn thấy nhu cầu tuyển người biết ReactJS lớn Bạn biết CMS tiếng Wordpress khơng? Từ Wordpress 5.0, hẳn bạn nghe tới trình soạn thảo Gutenberg tích hợp sẵn, xây dựng React Thêm ví dụ nữa, Gatsby, trình tạo trang web tĩnh tiếng, xu hướng mà nhiều nhà phát triển bắt đầu chuyển sang Và nhiều ứng dụng tiếng khác sử dụng React như: chotot, Shopee, Lazada, MyTV Điều cho thấy rằng, việc lựa chọn ReactJS lựa chọn thông minh thời điểm Với mục đích xây dựng tảng bắt đầu học ReactJS, cho đời sách Trong sách này, bạn không học nguyên tắc ReactJS, mà bạn ứng dụng chúng để tự xây dựng ứng dụng ReactJS đại triển khai miễn phí lên Internet Ngồi ra, sách, giới thiệu kỹ thuật hỗ trợ bạn xây dựng ứng dụng ReactJS dễ dàng Ví dụ quản lý mã nguồn với GIT, lựa chọn cài đặt Code Editor phù hợp với ReactJS.v.v Nếu bạn người thích chi tiết tỉ mỉ sách dành cho bạn Hãy tiếp tục đọc nghiền ngẫm, bạn cảm thấy yêu thích sách Mình đảm bảo! Trang NỘI DUNG CUỐN SÁCH Chào mừng bạn đến với sách: "Lập trình React thật đơn giản" Mình tin rằng, bạn nghe khơng nhiều ngơn ngữ lập trình web HTML, Javascript, CSS Về bản, để tạo ứng dụng web (ám front-end), bạn cần biết thứ: HTML, Javascript, CSS Tất công nghệ, thư viện, frameworks dù đao to búa lớn xoay quanh ngơn ngữ mà Thế giới web đại ngày nay, không đơn xây dựng website cung cấp thơng tin chiều mà cịn có ứng dụng web, mà người dùng tương tác, thay đổi nội dung, thay đổi giao diện mà tải lại trang (chính ứng dụng web dạng Single Page Applications - gọi tắt SPA) Và mảnh đất để thư viện ReactJS tung hoành Trong sách này, bạn học thực hành:       Cách cài đặt bắt đầu làm việc với ReactJS (2 cách) Học kiến thức tảng React:  React component  Props State  Class Component Functional component  Truyền liệu components  Sử dụng Style ứng dụng React  Xử lý kiện ứng dụng React  React Hooks cách sử dụng  Redux - cách quản lý state Cách lấy liệu từ API hiển thị lên ứng dụng React Triển khai ứng dụng React lên Internet Thực hành bước xây dựng ứng dụng Todos Bài tập: Xây dựng ứng dụng Meme Generator Để đảm bảo bạn tập trung hiểu rõ khái niệm, kiến thức tảng ReactJS, khơng sử dụng thư viện 3rd xây dựng ứng dụng, ngoại trừ axios redux Trang AI NÊN ĐỌC CUỐN SÁCH NÀY? Cuốn sách phù hợp với tất quan tâm đến việc phát triển ứng dụng ReactJS Với bạn định hướng nghiệp trở thành front-end developer sách dành cho bạn Đây sách "No Experience Require", tức khơng u cầu người có kinh nghiệm ReactJS Tất hướng dẫn từ số Yêu cầu trình độ Do ReactJS thư viện Javascript xây dựng để tạo ứng dụng web, nên tốt bạn có:    Kiến thức HTML CSS Javascript (Object, Arrays, điều kiện.v.v ) Đã biết tới Javascript ES6 (arrow function.v.v ) Nếu bạn bỡ ngỡ với Javascript, không sao! Đọc xong sách bạn hiểu Javascript Cách học cách Cuốn sách chia nhỏ nội dung thành nhiều phần, phần giới thiệu chủ đề riêng biệt, kèm thực hành Mục đích để bạn chủ động lịch học, không bị dồn nén nhiều Với phần lý thuyết, có ví dụ minh họa code ln vào dự án Vì vậy, cách học tốt vừa học vừa thực hành Bạn nên tự viết lại dịng code kiểm tra trình duyệt Đừng copy đoạn code sách, điều hạn chế khả viết code bạn, làm bạn nhiều khơng hiểu code bị lỗi "Nhớ nhé, đọc đến đâu, tự viết code đến đó, tự build kiểm tra đoạn code chạy khơng" Ngồi ra, sách biên soạn theo mơ hình: phần sau xây dựng từ phần trước Do vậy, bạn đừng đọc lướt mà bỏ sót đoạn Trang Tất mã nguồn sách up lên Github: https://github.com/vntalking/ebook-reactjs-that-don-gian Trong trình bạn đọc sách, code bạn không chạy chạy khơng ý muốn, bạn kiểm tra so sánh với mã nguồn Github Nếu khơng đừng ngần ngại đặt câu hỏi Group: Hỏi đáp lập trình - VNTALKING Liên hệ tác giả Nếu có vấn đề q trình học, code bị lỗi khơng hiểu, bạn liên hệ với qua hình thức đây:      Website: https://vntalking.com Fanpage: https://facebook.com/vntalking Group: https://www.facebook.com/groups/hoidaplaptrinh.vntalking Email: support@vntalking.com Github: https://github.com/vntalking/ebook-reactjs-that-don-gian Trang PHẦN GIỚI THIỆU ReactJS (đôi lúc gọi React.JS, React - cả) thư viện Javascript giúp bạn nhanh chóng xây dựng giao diện ứng dụng React xây dựng website hoàn toàn sử dụng Javascript (để thao tác với HTML), tối ưu hiệu kỹ thuật VirtualDOM (mình giải thích chi tiết phần sách) React Facebook giới thiệu vào năm 2011, họ quảng bá thư viện cho phép developer tạo dự án ứng dụng web lớn, có giao diện UI phức tạp từ đoạn mã nguồn nhỏ độc lập Một số diễn đàn, React coi Framework khả behaviors (hành vi) Nhưng mặt kỹ thuật, thư viện Không giống Angular hay Vue định nghĩa framework Với React, bạn cần phải kết hợp sử dụng nhiều thư viện để tạo thành giải pháp hoàn chỉnh Điều khiến React tập trung vào rendering (kết xuất - nghĩa xuất thứ cho người dùng nhìn thấy) đảm bảo đồng hóa với State ứng dụng Đó tất mà React thực Đọc khái niệm cao siêu khó hiểu nhỉ? Đừng hoảng nhé! Bạn hiểu rõ bắt tay vào thực hành xây dựng ứng dụng React phần sach - bình tĩnh Ưu điểm React Để tìm thư viện/framework front-end, bạn cần vào Google gõ nhẹ hàng tá luôn, kể tên đình đám như: Angular, Vue, React, Jquery, Emberjs.v.v Do đó, phải sử dụng React, hẳn bạn băn khoăn: Thư viện React có ưu điểm mà phải dùng? Trang Ở đây, chia thành mục đưa lý ngắn gọn sử dụng React cần thiết bạn cân nhắc đến việc xây dựng ứng dụng web đại Ok bắt đầu Component độc lập - tái sử dụng Trong React, giao diện xây dựng từ việc kết hợp components Bạn hiểu đơn giản component hàm, nhận giá trị bạn truyền vào trả số đầu Và giống function, component tái sử dụng đâu Vì vậy, tái sử dụng lại, hợp component để tạo thành giao diện người dùng phức tạp Trong sách này, bạn biết cách làm xây dựng giao diện ứng dụng phức tạp, nhiều tầng, nhiều lớp thông qua component React làm cho front-end javascript dễ sử dụng hơn, nhanh cách sử dụng Virtual DOM Khi bạn làm việc với vanilla Javascript, bạn phải tự làm nhiệm vụ thao tác với DOM Nhưng với React khác Với React, bạn cần thay đổi state UI (bạn biết khái niệm phần sách), React tự động cập nhật DOM để phù hợp với state Kỹ thuật React sử dụng Virtual DOM Điều cho phép React cập nhật cần thiết (kiểu phần trang web) thay phải tải lại tồn trang Việc sử dụng Javascript để tạo mã HTML cho phép React có đối tượng HTML ảo — VirtualDOM Khi bạn tải trang web sử dụng React, VirtualDOM tạo lưu nhớ Mỗi state thay đổi, cần phải có đối tượng HTML để hiển thị lên trình duyệt Thay tạo lại tồn cây, React sử dụng thuật tốn thơng minh để tạo lại thành phần khác biệt cũ Bởi hai HTML cũ lưu nhớ, trình xử lý diễn siêu nhanh Dễ dàng làm việc nhóm Nếu bạn làm việc theo nhóm, React thư viện tuyệt vời Bởi vì, việc chia task, chia hình ứng dụng đơn giản, người định làm thành phần Các thành phần độc lập với nhau, việc ghép nối thành phần thực dễ dàng Trang React đảm bảo Facebook Khi bạn lựa chọn thư viện/framework, việc phải xem bảo chứng ai? Bởi thư viện/framework khơng bảo chứng tổ chức, cơng ty uy tín, không phát triển lâu dài, không mở rộng maintain thư viện/framework phát sinh bugs Với React, bạn hồn tồn n tâm, Facebook chống lưng, theo cộng đồng React tuyệt vời Ngồi ra, tài liệu hướng dẫn chủ chi tiết, đầy đủ Nói chung, nguồn gốc, cộng đồng, tài liệu, bạn hồn tồn có n tâm gửi gắm dự án cho React Nhu cầu tuyển dụng cao Như đề cập trên, React kỹ web có nhu cầu tuyển dụng cao thời điểm Hầu nhà tuyển dụng cần tuyển front-end developer yêu cầu phải biết React Vì vậy, việc thành thạo React điểm sáng CV bạn, hội việc làm rộng mở nhiều Ngồi ra, React có API so với thư viện/framework khác, việc học React dễ hơn, đặc biệt bạn thành thạo Javascript Trên ưu điểm React mà tổng hợp hệ thống lại Giờ lúc chinh phục React Let's go! Trang 10 Tổng kết Phần tìm hiểu thư viện Redux, cách ứng dụng Redux để quản lý State ứng dụng Việc sử dụng thành thạo Redux kỹ cần thiết React developer, ứng dụng React cần tới nhiều Các bạn tham khảo mã nguồn phần đây: https://github.com/vntalking/ebook-reactjs-that-don-gian/tree/master/phan7/todo-app Nếu bạn có thắc mắc chỗ chưa hiểu, đừng ngại liên hệ với qua: support@vntalking.com Trang 93 PHẦN DEPLOY ỨNG DỤNG REACT Về bản, ứng dụng React tạo website tĩnh, tức gồm có HTML, CSS, JS Sau xây dựng ứng dụng xong, bạn build dự án triển khai lên môi trường Internet Mình xin giới thiệu cách để triển khai ứng dụng React: Cách 1: Build dự án, sau triển khai lên static server Tại hình terminal dự án, gõ lệnh: npm run build Hình 5.1: Lệnh build dự án Khi lệnh build chạy thành cơng, tạo thư mục build dự án bạn Hình nội dung thư mục build tạo sau thực lệnh build Trang 94 Hình 8.1: Nội dung thư mục build ứng dụng Todo Bạn chạy ứng dụng trực tiếp cách mở tệp index.html trình duyệt Bởi React sử dụng client-side routing nên khơng chạy với file:// URL Cơng việc bạn copy toàn files thư mục build đẩy lên static server Static server bạn tự xây dựng cách sử dụng Nginx, Apache Hoặc sử dụng dịch vụ static server như: Gatsby, AWS Amplify, Heroku Cách 2: Triển khai lên static server trực tiếp từ mã nguồn để github Cách thứ gần tương tự với cách thứ nhất, khác bạn triển khai dự án trực tiếp từ mã nguồn Github Ưu điểm phương pháp dự án triển khai nhanh chóng miễn phí Trong khn khổ sách này, hướng dẫn bạn cách deploy thứ Cụ thể dịch vụ satic server Github Pages Deploy ứng dụng React lên Github Pages Github Pages cho phép bạn deploy static website (trang web tĩnh) lên với source code từ Github repository Trang 95 Đầu tiên, mã nguồn đầy đủ ứng dụng Todo đặt đây: https://github.com/vntalking/ebook-reactjs-that-don-gian/tree/master/phan7/todo-app Nếu bạn thực hành đầy đủ bước theo sách mã nguồn giống thơi Ngồi ra, deploy trực tiếp từ repository Nhưng để bạn hiểu quy trình cách đầy đủ, làm từ bước tạo repository Github, từ deploy sang Github Pages Bắt đầu thơi! Bước 1: Tạo Github Repository Github Tạo Github Repository Github Phần khơng hướng dẫn chi tiết, bạn tham khảo viết VNTALKING: Cách tạo Repository Github hình ảnh Giả sử, vừa tạo repository có tên là: reactjs-todo-app cho ứng dụng Todo, có đường dẫn là: https://github.com/vntalking/reactjs-todo-app.git Bạn ghi nhớ tên repository lại, để tý cịn cấu hình cho URL ứng dụng Github Pages Bước 2: Đồng ứng dụng React local lên Github repository Trước mắt, clone repository rỗng mà tạo local $ git clone git@github.com:vntalking/reactjs-todo-app.git Ở dùng SSH để clone nên không cần nhập mật đăng nhập Github Nhưng làm theo cách bạn phải tạo SSH public key thêm vào tài khoản Github bạn Cịn khơng bạn chọn kiểu clone qua HTTPS nhập username mật bình thường Bước tiếp theo, copy toàn mã nguồn ứng dụng Todo vào thư mục vừa tạo clone repository rỗng từ Github Các bạn copy nhớ bỏ qua hai thư mục (nếu có mã nguồn):   node_modules build Trang 96 Ngoài ra, có cảnh báo ghi đề file gitignore hay README.md tùy bạn Chọn replace hay ignore Hình 8.2: Copy tồn mã nguồn ứng dụng todo vào thư mục sau clone Tiếp theo đẩy toàn mã nguồn lên repository cách gõ câu lệnh sau: # Thêm tất file vào git $ git add * # Commit thay đổi $ git commit -m "add todo app" # Push file lên Github $ git push origin Hình 8.3: Đẩy toàn mã nguồn Todo app lên Github Trang 97 Bạn xem tồn mã nguồn push lên Github: https://github.com/vntalking/reactjs-todo-app Bước 3: Cài đặt gh-pages Sau đẩy thành cơng tồn mã nguồn ứng dụng lên Github Bước cài đặt gh-page module để hỗ trợ deploy ứng dụng trực tiếp từ repository sang Github Pages Bạn sử dụng NPM yarn để cài đặt gh-page Vẫn cửa sổ terminal lúc trước, bạn gõ lệnh: $ npm install save gh-pages Chờ đợi chút để npm cài đặt Bước 4: Sửa file package.json Bạn mở package.json để thay đổi số thông tin liên quan deploy Như ứng dụng Todo, có package.json đây: { "name": "my-todo-app", "version": "0.1.0", "private": true, "homepage": "https://vntalking.github.io/reactjs-todo-app/", "dependencies": { "axios": "^0.19.2", "gh-pages": "^3.1.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "predeploy": "npm run build", "deploy": "gh-pages -d build" } } Trang 98 Trong đó:    homepage: Là địa ứng dụng sau deploy, có dạng: https://[youruser-name].github.io/[your-repo-name]/ predeploy: xác định câu lệnh để build ứng dụng trước deploy deploy: Xác định câu lệnh để deploy ứng dụng Bước 5: Chạy câu lệnh deploy ứng dụng $ npm run deploy Như ứng dụng Todo kết hình bên Hình 5.5: Kết gõ lệnh deploy thành công Sau deploy ứng dụng React thành công, bạn cần chờ vài phút, truy cập vào địa ứng dụng theo địa định nghĩa homepage package.json (ví dụ: https://vntalking.github.io/reactjs-todo-app) để kiểm tra thành Trang 99 PHẦN BÀI TẬP Với mục đích để bạn tự thực hành củng cố kiến thức React học phần trước Mình tạo tập nhỏ nhỏ để bạn tự thực hành Tại đây, hướng dẫn bạn thực hành cách chia dự án thành task nhỏ để bạn thực Trong task, có gợi ý giải thích cụ thể nhiệm vụ cần thực Bạn có sẵn sàng để thực dự án không? Nếu sẵn sàng bắt đầu thơi! Đây ứng dụng mà xây dựng Hình 9.1: Giao diện ứng dụng Meme Generator Ứng dụng làm gì? Ứng dụng Meme Generator nhận dòng text người dùng nhập vào, sau tạo hình ảnh ngẫu nhiên nhấn vào nút "Generate" Ảnh lấy từ Internet thông qua HTTP request Cũng đơn giản phải không? Giờ bạn bắt tay vào xây dựng ứng dụng Trang 100 Project task Dưới gợi ý task cần thực làm ứng dụng Task 1: Phân tích UI Dựa giao diện ứng dụng, bạn cần phân tích UI chia thành component, giống làm với ứng dụng Todo App Ví dụ, bạn chia thành component như: MemeApp, Header, MemeGenerator Mỗi người có cách phân tích UI khác nhau, tùy bạn tự chọn, hợp lý Task 2: Tạo dự án với files cần thiết, render lên hình Ở phần này, bạn bắt đầu tạo dự án React, đặt tên meme-generator, sử dụng cộng cụ create-react-app phần trước Nếu sử dụng cơng cụ create-react-app xóa hết files thư mục src, để lại file index.js với nội dung sau: import React from "react"; import ReactDOM from "react-dom"; const element = React Meme Application; ReactDOM.render(element, document.getElementById("root")); Sau đó, bạn cần tạo tệp component phân tích task Ví dụ: MemeApp.js, header.js, MemeGenerator.js Cơng việc cuối task thêm MemeApp component vào index.js Task 3: Thêm child component vào MemeApp hiển thị Sau bạn tạo component rỗng task 2, bạn include component vào component chính, kết phân tích UI task Ví dụ: Mình tạo child component đặt thư mục src/components: Header MemeGenerator Trang 101 Trong đó:   Header: Chỉ đơn giản hiển thị tiêu đề ứng dụng MemeGenerator: Hiển thị input field hình ảnh sau tạo meme Theo phân tích UI component xuất component MemeApp Kiểu sau: import React from "react"; import Header from "./Header"; import MemeGenerator from "./MemeGenerator"; const MemeApp = () => { return ( ); }; export default MemeApp; Task 4: Thêm input fields hiển thị ảnh mặc định MemeGenerator Ở phần này, bạn tiến hành thêm input field để người dùng nhập text Tất nhiên bạn cần xử lý logic cho input field Ví dụ sử dụng onChange() để gửi event lên MemeApp Tiếp theo, bạn cần hiển thị ảnh lên hình MemeGenerator Mình ví dụ link ảnh: https://i.imgflip.com/26am.jpg Lưu ý, chưa cần phải tạo HTTP request để hiển thị ảnh task Bạn cần thêm link ảnh vào thẻ src tag Thêm CSS để dịnh dạng ứng dụng giống với giao diện yêu cầu ban đầu Task 5: Tạo request để lấy danh sách ảnh Đến bước này, bạn cần tạo request tới API để lấy danh sách URL ảnh Đây API mà gợi ý sử dụng: https://api.imgflip.com/get_memes Trang 102 Hình 9.2: Response API Để tạo request, bạn sử dụng thư viện Axios native api Javascript Task 6: Generate ảnh ngẫu nhiên Sau bạn danh sách URL ảnh, người dùng nhập text nhấn nút "Generate" bạn cần hiển thị ngẫu nhiên ảnh danh sách Đáp án tập tham khảo Sau hoàn thành task bạn hồn thành ứng dụng Meme Generator Bước tiếp theo, bạn publish ứng dụng lên Github Pages để chia sẻ với bạn bè Cách deploy ứng dụng Meme tương tự làm với ứng dụng Todo Cuối mã nguồn ứng dụng Meme Generator để bạn tham khảo: https://github.com/vntalking/ebook-reactjs-that-don-gian/tree/master/phan9/memegenerator Trong q trình thực hành có thắc mắc, khó khăn cần giúp đỡ lên Group để hỗ trợ: https://www.facebook.com/groups/hoidaplaptrinh.vntalking Trang 103 GREAT! Xin chúc mừng bạn hoàn thành nội dung sách! Bây giờ, bạn hồn tồn tự tin để phát triển ứng dụng React từ đầu, cho lúc triển khai ứng dụng Nhờ kiến thức tảng, tư phát triển ứng dụng, bạn hồn tồn tự tìm hiểu thêm kiến thức chuyên sâu, tính nâng cao React Thay mặt bạn đội ngũ VNTALKING, xin chúc bạn điều tốt đẹp hành trình trở thành lập trình viên React chuyên nghiệp Hi vọng bạn thích sách này, muốn tìm hiểu thêm giới lập trình Trong q trình biên soạn sách khơng tránh khỏi thiếu sót Mình mong nhận phản hồi từ bạn, gửi email tới support@vntalking.com Cuốn sách phần dự án học lập trình VNTALKING Mong bạn ủng hộ website hướng dẫn học lập trình tại: https://vntalking.com Hẹn gặp lại sách sau VNTALKING! Trang 104 PHỤ LỤC KẾT NỐI VỚI VNTALKING VNTALKING đánh giá cao khả nỗ lực bạn, chứng tỏ việc bạn đọc hết sách đọc đến tận trang sách Cám ơn bạn nhiều ^_^ Đặc biệt, VNTALKING vui đồng hành bạn đường học để trở thành lập trình viên chuyên nghiệp nói chung React nói riêng Vì vậy, bạn cần tư vấn, có thắc mắc hay khó khăn "trút bầu tâm sự" với VNTALKING Liên hệ với VNTALKING hình thức     Website: https://vntalking.com Fanpage: https://facebook.com/vntalking Group: https://www.facebook.com/groups/hoidaplaptrinh.vntalking Email: support@vntalking.com Trang 105 PHỤ LỤC THÔNG TIN VỀ TÁC GIẢ VNTALKING.COM website thành lập từ 25/12/2016 vận hành nhóm Dương Anh Sơn (một developer “kì cựu” – chuẩn bị quê chăn lợn) Bọn ln hướng tới trải nghiệm miễn phí mà hiệu Bọn gồm thành viên muốn đem đến cho độc giả kiến thức, kinh nghiệm thực tiễn, cập nhật nhanh Đồng hành VNTALKING để khám phá niềm đam mê lập trình bạn Thơng tin thêm tác giả Tên đầy đủ Dương Anh Sơn, gọi tắt Sơn Dương ^_^ Tốt nghiệp ĐH Bách Khoa Hà Nội Mình bắt đầu nghiệp coder trường khơng xin việc chun ngành Mình tin có chia sẻ kiến thức cách học tập nhanh Trang 106 PHỤ LỤC CUỐN SÁCH KHÁC CỦA VNTALKING Đến thời điểm tại, VNTALKING hoàn thành dự án sách học lập trình Sách học React sách thứ mà VNTALKING thực Nếu bạn muốn tìm hiểu nhiều back-end, cụ thể Node.JS, tham khảo sách: Lập trình Node.JS thật đơn giản (https://vntalking.com/sach-hoc-lap-trinh-node-js-that-don-gianhtml) Hi vọng thời gian tới, VNTALKING tiếp tục nhận ủng hộ độc giả Thành cơng bạn động lực để VNTALKING cho nhiều sách với chất lượng tốt nữa, đáp ứng nhu cầu học lập trình người Trang 107 ... https://facebook.com/vntalking Group: https://www.facebook.com/groups/hoidaplaptrinh.vntalking Email: support@vntalking.com Github: https://github.com/vntalking /ebook- reactjs -that- don- gian Trang... tạo công cụ create -react- app, có tệp index.js có nội dung sau: import React from "react" ; import ReactDOM from "react- dom"; const element = Hello from Create React App; ReactDOM.render(element,... dụng Style ứng dụng React  Xử lý kiện ứng dụng React  React Hooks cách sử dụng  Redux - cách quản lý state Cách lấy liệu từ API hiển thị lên ứng dụng React Triển khai ứng dụng React lên Internet