Tìm hiểu rails, reactjs

LOGO KHOA CƠNG NGHỆ THƠNG TIN Bài thuyết trình Phát triển phần mềm hướng Framework Giảng viên hướng dẫn: Th.S Nguyễn Thái Cường Nhóm : 20 Thành viên : Lã Văn Bắc Trần Công Định Vũ Hải Hà 1/10 I Đề tài cơng cụ phát triển Đề tài:Tìm hiểu Rails, Reactjs ứng dụng 2/10 Nội dung thực I Tìm hiểu Rails II Tìm hiểu React III Ứng dụng 5/10 I Tìm hiểu Rails 1/23 II Tìm hiểu ReactJS Tổng quan Reactjs Dom ảo (Virtual Dom) gì? JSX gì? Component, Props state Vịng đời component 1/23 II Tìm hiểu ReactJS Tổng quan Reactjs Reactjs công cụ phổ biến để lập trình Fontend javascript Được Facebook cơng bố thức vào tháng năm 2013 Đã phát hành 53 phiên phiên 16.2 phát hành vào 28/11/2017 1/23 II Tìm hiểu ReactJS  React chủ yếu lập trình tảng javascript ES6  ES6 phiên javascript phê duyệt vào tháng năm 2015 nên thường gọi ES2015  Nhưng lập trình phiên khác hay Typescript (phát triển Microsoft) 1/23 II Tìm hiểu ReactJS  ES6 cung cấp nhiều tính hỗ trợ so với ES5 như:  Block – Scoped construct let and const  Arrow function  Classes  Default Parameters … 1/23 II Tìm hiểu ReactJS Dom ảo (Virtual Dom) gì?  Dom (Document Object Model) mơ hình đối tượng html Mà tất thẻ html quản lý document  Dom ảo đối tượng chứa thông tin cần thiết để tạo DOM,  Ta tạo, sửa, thao tác mà khơng cần tác động trực tiếp đến DOM 1/23 II Tìm hiểu ReactJS  Với framwork js khác thường sử dụng phương thức data-binding AngularJS model thay đổi, xác nhận event View Object liên quan đến thay đổi đo, từ tác động vào phân tử DOM View phản ánh sư thay đổi  Với React dùng Virtual-DOM, VirtualDOM vừa đối tượng vừa view, khơng cần thao tác trực tiếp với DOM View để phản ánh thay đổi 1/23 II Tìm hiểu ReactJS JSX  JSX (JavaScript XML) cú pháp mở rộng dàng cho ngôn ngữ JS viết theo kiểu XML  Để tạo thành phần VirtualDOM React dùng phương thức React.createElement  Nhưng khó nhìn, khó hiểu với developer chun nghiệp 1/23 II Tìm hiểu ReactJs JSX: Scores ; JavaScript tương đương: React.createElement( DashboardUnit, {"data-index": "2"}, React.createElement("h1", null, "Scores"), React.createElement(Scoreboard, {className: "results", scores: gameScores}) ); 1/23 II Tìm hiểu JSX  Việc sử dụng JSX khiến cho code dễ dàng quản lý hơn, có cấu trúc giống XML  Với viết gần với thẻ HTML, giúp deloper hiểu dễ dàng hơn, từ dó viết sửa code khơng gặp q nhiều khó khăn 1/23 II Tìm hiểu ReactJS  Nhưng thực tế trình duyệt khơng hỗ trợ cú pháp code JSX  Nên cần thư viện chuyển đổi JSX javascript tương ứng babel  Nó khơng hồn tồn giống html thơng thường mà có phương thức khác biệt như: xác định class css thẻ JSX className 1/23 II Tìm hiểu ReactJS Component, props state  React chia thành component để quản lý tái sử dụng chúng  Để component thay đổi thuộc tính component khác ta truyền vào props, props number, string hay function  Để thay đổi trạng thái component React sử dụng state thay đổi bên component 1/23 II Tìm hiểu ReactJS Vòng đời component 1/23 III Ứng dụng 1/23 Cảm ơn thầy tất bạn ý lắng nghe 9/10 ... phát triển Đề tài :Tìm hiểu Rails, Reactjs ứng dụng 2/10 Nội dung thực I Tìm hiểu Rails II Tìm hiểu React III Ứng dụng 5/10 I Tìm hiểu Rails 1/23 II Tìm hiểu ReactJS Tổng quan Reactjs Dom ảo (Virtual... 1/23 II Tìm hiểu ReactJS  ES6 cung cấp nhiều tính hỗ trợ so với ES5 như:  Block – Scoped construct let and const  Arrow function  Classes  Default Parameters … 1/23 II Tìm hiểu ReactJS. .. ảo (Virtual Dom) gì? JSX gì? Component, Props state Vịng đời component 1/23 II Tìm hiểu ReactJS Tổng quan Reactjs ? ?Reactjs công cụ phổ biến để lập trình Fontend javascript Được Facebook cơng bố