Hivelab Vina

https://reactjs.org/ Tiếp nối Part2. Tạo một project lần trước, trong Part này chúng ta sẽ lấy data item sản phẩm và tạo các màn hình sau. Layout thì hãy tham khảo item list . Demo: http://fe.hivelab.co.kr/itemlist Kiểm tra thông số kỹ thuật / thiết kế cấu trúc folder Phát triển bằng cách chia nhỏ và cấu trúc hóa Component theo từng tính năng hoặc theo từng UI. Page: item list page (lp.js), cart page (cart.js) Chức năng: thay đổi phương thức sắp xếp, filter, xem các item / thêm, xoá giỏ hàng react-itemlist // Project name │ └ src ├ layout ─ header.js //Header (page navigation) │ ├ page ┬ components ┬ itemcard.js // Product item layout │ │ ├ cartitem.js // Cart Item Layout │ │ ├ sort.js // Sort │ │ ├ filter.js // Filter layer │ │ └ viewtype.js // Select a product view method │ │ │ ├ lp.js // Item list page │ └ cart.js //...

https://reactjs.org/ Từ part này, chúng ta sẽ cùng xem những gì cần thiết đặt để bắt đầu lập trình React và cấu trúc folder/code cơ bản của app React.. 1. Thiết lập môi trường 1.1. Cài đặt Node Node.js cần cho package manager npm/yarn của node - cần thiết để dễ dàng cài đặt các library liên quan đến React. https://nodejs.org/en/ 1.2. Cài đặt Yarn/npm Yarn là npm phiên bản cải tiến hơn. Mỗi loại đều có ưu và nhược điểm, hãy chọn package manager bạn muốn. * Guide này dựa trên yarn package manager. // git bash brew install yarn 1.3. Cài đặt và sử dụng create-react-app create-react-app là công cụ tạo app React. yarn -g add create-react-app // Install create-react-app create-react-app --version // Version Check create-react-app Folder name // Create project folder cd Folder name // Move to the created folder yarn start // Execution Khi hình thành project folder và chạy app React, local page sẽ tự động load trong trình duyệt Chrome và màn hình sau xuất hiện. 1.4. Trường...

https://reactjs.org/ Thông tin series [React.js trong thực tiễn] Part1. Hiểu khái niệm [React.js trong thực tiễn] Part2. Bắt đầu một project [React.js trong thực tiễn] Part3. Tạo list [React.js trong thực tiễn] Part4. Biểu hiện Filter, sort [React.js trong thực tiễn] Part5. Cho vào giỏ Part này gồm những lý thuyết cơ bản cho những người lần đầu nhập môn React. Nếu bạn muốn thực hành làm bài luôn, tôi khuyên bạn nên bắt đầu từ [React.js trong thực tiễn] Part2. Bắt đầu một project. Tại sao Facebook lại tạo React? React là một library Front-end được cung cấp bởi Facebook. Ngay cả trước khi Facebook tạo React, đã có rất nhiều framework tồn tại như AngularJS, Backbone.js, Knockout.js, Ember.js Các framework trên cấu tạo hóa application bằng các pattern như MVC pattern hoặc MVVM (View Model),v...v... Model View – ViewModel pattern ( https://docs.microsoft.com/en-gb/xamarin/xamarin-forms/enterprise-application-patterns/mvvm ) Tức là, khi một event xảy ra, Model sẽ xử lý dat...

Chúng ta đã bàn về Vue.js và Express ở Part1 , Express và MySQL ở Part2 . Và cuối cùng ở Part3 này, tôi sẽ giải thích những code chủ yếu để tạo tính năng đăng ký thành viên và login đơn giản bằng việc sử dụng cả Vue.js, Express, MySQL. Đăng ký Đây là form đơn giản để nhận 3 data là ID, tên, password. Ở front-end sẽ tạo component SignUp.vue. Ở mỗi trang nhập thì đều cho v-model directive rồi binding data nhận được. Khi phát sinh click event tại button đăng ký thì sẽ tiến hành signUp method. <div class="input_row"> <label for="id">ID</label> <input type="text" id="id" v-model="user.userid"> </div> <div class="input_row"> <label for="name">Name</label> <input type="text" id="name" v-model="user.name"> </div> <div class="input_row"> <label for="password">Password</labe...

Ở Part 1 chúng ta đã xử lý cách trao đổi thông tin giữa Front-end và Back-end bằng Vue.js và Express. Ở part này tôi sẽ giới thiệu một ví dụ để có thể nhập thông tin đơn giản của người dùng bằng việc liên kết MySQL trên Express, ngoại trừ Vue.js. Step1. Cài đặt và chạy MySQL Workbench Có nhiều cách để chạy MySQL server tuy nhiên MySQL Workbench được tạo bằng GUI nên có ưu điểm là tương đối dễ thiết lập. Có thể down MySQL Workbench tại địa chỉ dưới đây. https://dev.mysql.com/downloads/workbench/ Trong quá trình cài đặt sẽ nhận được password của tài khoản Root, bạn nhất định phải nhớ password đã nhập tại thời điểm này. Nếu như chạy Workbench đã cài đặt hoàn thành thì sẽ nhìn thấy màn hình dưới đây. Chạy mySQL server bằng tài khoản admin đã setting trong quá trình cài đặt. Màn hình đầu tiên tiến hành MySQL Workbench Step2. Tạo DB DB (Schema) mới sẽ được tạo ra khi ấn vào button có hình ổ đĩa (disk). Nhập tên DB và Charset. Màn hình tạo DB(Schema) Nếu ấn vào button Apply,...

Trước khi vào bài… Series này không chỉ giới thiệu quá trình xử lý Front-end bằng Vue.js mà còn có quá trình liên kết data thông qua API bằng cách sử dụng Express và MySQL. Tôi đã xây dựng sao cho người mới nhập môn Vue.js cũng có thể dễ dàng hiểu được, và đã ghi lại ở bên dưới một số tài liệu tham khảo trong quá trình này. Series được chia làm ba phần. Part1. Hiểu về trao đổi thông tin giữa Front-end và Back-end bằng Vue.js + Express Part2. Liên kết DB bằng Express + MySQL Part3. Mix All — Phát triển chức năng Log In / Đăng ký thành viên Đây là Part1, một ví dụ đơn giản giúp bạn có thể hiểu được Front-end và Back-end trao đổi data như thế nào bằng Vue.js + Express. Step1. Setting môi trường phát triển Front-end (Vue.js) Ta lập một folder để thực hành. Trong bài này tôi sẽ gọi là ‘movie’. Thực hiện lệnh sau trong folder movie và setting môi trường project Vue Cli 3.x npm install -g yarn npm install -g @vue/cli vue create frontend // create frontend folder cd frontend npm ...

Bối cảnh xây dựng Khi bạn càng phát triển markup nhiều, dần dần sẽ phát sinh những công việc phiền toái như là gắn một khối lượng text đồ sộ như điều khoản sử dụng vào từng tag. Tôi nghĩ rằng những công việc như vậy có thể trở nên dễ dàng hơn một chút nếu ta sử dụng markdown mà text format tương đối đơn giản. Tất nhiên có rất nhiều Markdown to HTML Converter (dưới đây gọi là Md2HTML) có thể sử dụng ngay. Tuy vậy, với mong muốn đơn thuần rằng “Liệu có thể cho cả class vào để áp dụng style hay không?”, tôi đã tạo ra Md2HTML sử dụng Vue.js. Step1. Markup HTML được tạo nên từ 3 vùng lớn. (1) Khai báo v-model=”md_text” để nội dung đã nhập tại chỗ nhập markdown chứa biến số md_text . Và tiếp theo, kết quả parsing sẽ được chứa trong previewText , sẽ có nơi khai báo bằng {{previewText}} và có nơi hiện kết quả rendering HTML sau khi dùng (3) v-html directive để có thể hiện ra (2) HTML y nguyên. &lttextarea class="viewer__cont" rows="16" v-model="md_text...

Step 1: News - More Tiếp nối nội dung đã được xây dựng ở Part2 , lần này chúng ta sẽ thêm tính năng xử lý với button Xem thêm (More). Cú pháp chính Cryptocurrency.vue // HTML template syntax <article> <div class="h_area"> <h2>Recent News</h2> </div> <ul> <li v-for="item in news" :key="item.id"> <a :href="item.url"> <div class="bx_thumb"> <img :src="item.imageurl" width="60" height="60" :alt="item.body"> </div> <dl> <dt>[{{item.published_on | moment}}] {{item.title}} </dt> <dd> <p>{{item.body}}</p> </dd> </dl> </a> </li> </ul> ...

Step 1: Ratio Tiếp nối nội dung đã được xây dựng ở Part1 , lần này chúng ta sẽ thêm data lượng giao dịch 24 giờ. Vì data giá (PRICE) và data tỷ lệ biến động 24 giờ (CHANGEPCT24HOUR) của data phản hồi API ở trong cùng một node nên sẽ tham khảo code xây dựng PRICE và thêm code vào. Nếu sử dụng Finder để tìm kiếm và trực quan hóa JSON Path phức tạp thì việc tạo code sẽ thuận lợi hơn. Cú pháp chính Cryptocurrency.vue // ① HTML 템플릿 구문 <tr> <td>{{cryptoPrice.BTC}}</td> <td>{{cryptoPrice.ETH}}</td> <td>{{cryptoPrice.XRP}}</td> </tr> <tr> <td>{{cryptoRatio.BTC}}</td> <td>{{cryptoRatio.ETH}}</td> <td>{{cryptoRatio.XRP}}</td> </tr> // ② 데이터 객체 data() { return { cryptoPrice: { BTC: 0, ETH: 0, XRP: 0 }, cryptoRatio: { BTC: 0, ETH: 0, XRP: 0 } } }, // ③ ...