Nhận thấy các cấu hình, cài đặt môi trường mới cho dự án sử dụng React quá phức tạp, đội ngũ Facebook cùng cộng đồng mã nguồn mở đã cùng nhau tạo ra dự án hạt giống “Create React App” đã bao gồm:

• Webpack
• ESLint
• Babel

Những công cụ trên giúp cho bạn tập trung vào việc lập trình, phát triển dự án thay vì phải mất công sức nghiên cứu. Giờ đây bạn có được những tính năng như: Hot Module Replacement, Code checking, Transform ES6 -> ES5… mà không cần phải làm bất cứ thao tác gì. Không những vậy, dự án hạt giống này đã thu gọn tinh giản các thông báo từ các công cụ đi kèm, làm sao đơn giản nhất có thể, chỉ hiển thị những thứ gì cần thiết.

Có thể nói, đây là dự án mầm tốt, mặc dù cũng sẽ khó để phù hợp với tất cả mọi người, nhưng đa phần sẽ giúp cho bạn tập trung vào việc học react, cũng như lập trình hoàn thành dự án đơn giản và nhanh chóng hơn. Sau đó, nếu có thời gian hãy nghiên cứu thêm webpack và babel.

Nếu quay lại thời gian bắt đầu học react, mình ước có được cái này ngay lúc đó, khỏi cần suy nghĩ đến Webpack là khỉ khô gì. Mặc dù nghiên cứu webpack cũng mang lại nhiều thú vị, nhưng nó không phải là yếu tố quan trọng để sử dụng Reactjs.

The post Hướng dẫn bắt đầu với React cách đơn giản nhất appeared first on Fullstack Station.

Các bài viết khác liên quan nền tảng nên đọc:

• ES6 là gì?
• ReactJs là gì?
• Vòng đời của 1 component ReactJs trong ES6
• Hướng dẫn cấu trúc thư mục và cách viết ReactJs chuẩn

Cũng có bài viết hướng dẫn cài đặt Webpack cho React + Meteor, nhưng do phụ thuộc nhiều Meteor nên cũng hạn chế người dùng.

Những điểm lợi của ES6

Có thể nói sau 1 thời gian sử dụng ES6, viết code nhanh hơn và cấu trúc tập tin nhìn cũng gọn gàng hơn, sau đây là điểm qua một số điểm lợi mà mình trải nghiệm thực sự:

• Hàm Arrow (=>): đây có lẽ là cách viết được sử dụng nhiều của ES6. Gọi là cách viết tắt hàm, nhưng bản chất giữa hàm Arrow và hàm bình thường có sự khác nhau về ngữ cảnh hàm this. Có thể nói đơn giản thì hàm bình thường có this còn hàm Arrow thì không có this, this bên trong hàm Arrow là this của nơi khai báo hàm Arrow.
• Xử lý chuỗi dễ dàng hơn:

  `Bạn không thể
  xuống hàng 
  như vậy với "ES5" được.`
  

• Giá trị mặc định cho tham số: function(a = 12, b =”chuỗi”)
• Truyền tham số không xác định số lượng: cái này dùng nhiều khi gọi component <ChildComponent {…this.props} /> hoặc function(x, …y)
• let và const: được sử dụng thay thế hoàn toàn cho var, vì nó kiểm tra biến đã được khai báo chưa.
• class: cái này quan trọng nhé, trong ES6 bạn có thể kế thừa từ class khác: ví dụ “MyComponent extends React.Component”
• module: sử dụng từ khoá import và export để khai báo và sử dụng module

Việc sử dụng ES6 đặc biệt là cho React là rất thích hợp, về phía AngularJs đã chọn TypeScript để viết chính cho dự án dùng AngularJs, TypeScript có nhiều điểm tương đồng với ES6, và đều là cách để nâng hiệu quả của dự án, tốc độ lập trình lên cả nên bạn nên sử dụng cho dù tốn chút thời gian để làm quen.

Webpack là gì

Hiện tại cũng có một số bài viết giới thiệu webpack rồi nên mình không đi vào chi tiết, đơn giản là nó đóng gói, biến code viết bằng A (js, jade, coffee, less, sass, png) thành B(js, css,png) , và cộng thêm nhiều tính năng hữu ích khác. Trong bài này thì là sử dụng Babel Compiler để biến ES6 => ES5, cụ thể hơn là React ES6 => React ES5 !!!

Tự nhiên phải mất công viết bằng ES6 rồi chuyển thành ES5 chi vậy? Chắc có bạn cũng sẽ thắc mắc chỗ này: đó là bởi vì ES6 sẽ xu thế tất yếu nhưng các trình duyệt lại không hỗ trợ hết các tính năng của ES6, sẽ cần một khoảng thời gian nữa để các trình duyệt web hỗ trợ hết các tính năng ES6, khi đó thì không cần phải chuyển nữa. Nói như vậy không có nghĩa là không dùng Webpack đâu nha, Webpack cũng là công nghệ hay giúp cho việc lập trình nhanh hơn, sử dụng trong bài viết này đây cũng chưa tới 1/10 tính năng của webpack nữa.

Phần 1: cài đặt webpack

Đơn giản là bạn cần cài đặt Nodejs và NPM trước khi tiến hành, tuy nhiên nếu bạn đã đọc đến đây chắc không cần nhắc tới nó nữa

Bước 1

mkdir react-hello-world
cd react-hello-world
npm init

Rất đơn giản, tạo thư mục mới và khởi tạo dự án, điền vài thông tin liên quan là xong.

Bước 2

npm i webpack -S

Cài đặt webpack với tham số -S để lưu vào trong package.json

Bước 3

Tạo file webpack.config.js như bên dưới

var webpack = require('webpack');
var path = require('path');
//Thư mục sẽ chứa tập tin được biên dịch
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
//Thư mục chứa dự án - các component React
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }
};

module.exports = config;

Qua mấy dòng code trên, bạn cũng dễ dàng nhận thấy cấu trúc thư mục sẽ là:

src/
src/client
src/client/public
src/client/app

Nếu cấu trúc thư mục của bạn muốn thì vẫn thay đổi bình thường, chỉ cần sửa lại cho phù hợp trên webpack.config.js là được.

Bước 4

// ./src/client/app/index.jsx
console.log("Hello world")

Sau đó, tại thư mục react-hello-world, chạy lệnh sau:

./node_modules/.bin/webpack -d

Sau khi chạy xong, trong thư mục ./src/client/public sẽ xuất hiện file bundle.js, nghĩa là phần cài đặt đã hoạt động bình thường. Chỉ với dòng code đơn giản, bạn sẽ chưa thấy hứng thú gì đúng không? Hãy kiên nhẫn xem tiếp nhé!

Bước 5

Tạo file ./src/client/index.html với nội dung như bên dưới:

<!-- ./src/client/index.html -->
<html>
  <head>
    <meta charset="utf-8">
    <title>React.js using NPM, Babel6 and Webpack</title>
  </head>
  <body>
    <div id="app" />
    <script src="public/bundle.js" type="text/javascript"></script>
  </body>
</html>

Trong file index.html này không hề sử dụng các file trong thư mục app là index.jsx, đây chính là điểm quan trọng của webpack.

Bạn mở file index.html bằng trình duyệt, và mở Developer Tools -> Console, sẽ thấy “Hello world”.

Phần 2: cài đặt Babel Loader

Như phần đã nói ở trên, ES6 không được hỗ trợ đầy đủ từ các trình duyệt hiện nay, nên mã phải được biên dịch ra ES5 thì mới chạy được. Do vậy cần chuyển đổi từ ES6 => ES5, tương ứng React ES6 => React ES5, và Babel Loader là công cụ để chúng ta thực hiện điều đó.

Webpack sử dụng Babel Loader để thực hiện việc chuyển đổi, sau đó đóng gói lại như bình thường. Babel Loader sẽ chuyển đổi code sử dụng ES6 như class, let, const, arrow, … thành React.CreateClass(…), hay React.CreateElenement(‘a’, …), được diễn tả như mô hình sau:

Cài đặt Babel Loader và các preset: react và es6

npm i babel-loader babel-preset-es2015 babel-preset-react babel-core -S

Tạo file ./.babelrc với nội dung như bên dưới

{
  "presets" : ["es2015", "react"]
}

Và sửa lại file webpack.config.js như sau:

var webpack = require('webpack');
var path = require('path');
//Thư mục sẽ chứa tập tin được biên dịch
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
//Thư mục chứa dự án - các component React
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
//Thêm 
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader'
      }
    ]
  }
//Kết thúc Thêm
};

module.exports = config;

Cài đặt React

npm i react react-dom -S

Mở tập tin, index.jsx, xóa hết và viết 1 component đơn giản như sau:

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
  render () {
    return <p> Hello React!</p>;
  }
}

render(<App/>, document.getElementById('app'));

Chạy lại lệnh để build

./node_modules/.bin/webpack -d

Phần 3: tối ưu

Ở phần trên, cứ mỗi lần có thay đổi, chúng ta phải gõ lệnh để cho webpack build lại, như vậy không chuyên nghiệp chút nào, mà cũng không có được tính năng HMR tuyệt vời nữa. Vậy nên phần này sẽ là phần tối ưu các thiết lập cho webpack, chỉ cần gõ lệnh thêm tham số như sau là xong:

./node_modules/.bin/webpack -d --watch

Chỉ đơn giản vậy thôi, nhưng chúng ta cần làm thêm 1 chút nữa để hoàn thiện, bạn mở file package.json, và thêm đoạn mã sau:

{
  // ...phần đã có, nhớ thêm dấu ,
  "scripts": {
    "dev": "webpack -d --watch",
    "build" : "webpack -p"
  },
  // ...phần đã tồn tại khác
}

Như vậy, kể từ giờ, mỗi lần bắt đầu mỗi ngày làm việc, bạn chỉ cần gõ `npm run dev` để thực hiện lập trình, và `npm run build` để build thành file bundle.js.

Kết

Mình biết các bạn đa phần tiếp cận React bằng ES5 vì theo tài liệu chính thức trên trang chủ là sử dụng ES5, nhưng đó là bởi vì ReactJs ra đời trước khi ES6/ES2015 được chính thức ra mắt, nên họ vẫn còn sử dụng ES5 trong tài liệu vì cộng đồng. Còn trên thực tế, đa phần các dự án đều sử dụng ES6 sau đó biên dịch lại thành ES5, cách làm này vừa giúp lập trình nhanh (ES6), vừa giúp cho dự án có tính thành phẩm có chất lượng cao (webpack).

Chú ý là một số function stateless thì nên sử dụng function bình thường sẽ tốt hơn là class với component lifecycle. Nếu component có lifecycle thì nên sử dụng ES6 và đa số trường hợp khác.

The post Hướng dẫn cài đặt Webpack để viết Reactjs/ES6 appeared first on Fullstack Station.

Cập nhật: do meteor-webpack không còn được duy trì phát triển, nên meteor-webpack không tương thích với Meteor đã cập nhật lên phiên bản 1.4 (chỉ tương thích 1.2 và 1.3)

Giới thiệu

Trước khi bắt đầu xây dựng web app realtime với Meteor, React, Webpack chúng ta sẽ lần lượt lướt qua các công nghệ này và tìm hiểu xem là công nghệ fullstack đã thay đổi như thế nào!

Trong bài viết này, Meteor là chính, tiếp theo là React, còn Webpack là để biến chúng trở nên hoàn hảo với nhau! Tuy nhiên, nếu bạn chưa biết gì về webpack, bạn nên đọc Những rủi ro khi sử dụng Webpack với Meteor ở cuối bài.

Meteor

Trang chủ: www.meteor.com

Nên đọc: Điều gì khiến Meteor 1.3 trở nên đặc biệt

Đây là một fullstack framework dùng để viết App (Web/Mobile) realtime rất mạnh, dễ dàng. Mặc dù mặc định để build cho mobile là hybrid (sử dụng Phonegap), tuy nhiên bạn hoàn toàn có thể sử dụng React Native để kết nối với Meteor.

React

Trang chủ: https://facebook.github.io/react/

Nên đọc: React Js là gì

Nên đọc: Hướng dẫn học React Js

Webpack

Webpack là một cách đơn giản để cấu trúc mã nguồn của dự án, đồng thời cung cấp khả năng Hot Load (Hot Module Replacement – HMR) mà mình rất thích, và đưa vào Meteor để nâng cao khả năng tốc độ làm việc.

Nên đọc: Webpack là gì

Nên đọc: Giới thiệu webpack

Gói thư viện sẽ sử dụng: Meteor Webpack

Vấn đề của Meteor

Ưu điểm

• Cơ chế Xuất bản (Publications) và Đăng ký (Subscription)
  • Bảo vệ xuất bản dữ liệu một cách đơn giản
  • Giao thức DDP giúp đồng bộ client dễ dàng và nhanh chóng (Hỗ trợ React Native)
• Cơ chế xác thực: sử dụng tài khoản với mật khẩu hay sử dụng OAuth dễ dàng
• Từ 1.2 đã hỗ trợ ReactJs và Angular Js
• Từ 1.3
  • Đã sử dụng hoàn toàn ES6/ES2015
  • Đã sử dụng NPM

Còn nhiều ưu điểm khác để sử dụng Meteor để xây dựng ứng dụng realtime, tuy nhiên bài viết này mình không tập trung nói về Meteor.

Khuyết điểm

Bài viết này mình tập trung vào khuyết điểm nặng nhất của Meteor đó là chính công cụ build của Meteor: nó chậm kinh khủng! Bất kỳ mỗi động tác Save file nào, Meteor sẽ build lại “toàn bộ mã nguồn”, mặc dù sau đó nó tự động kích hoạt Client để refresh với mã nguồn mới, tuy nhiên mình mất quá nhiều thời gian cho lập trình, trong khi Webpack lại có cơ chế HMR quá hay!

Một số bài viết nói về khuyết điểm của Meteor liên quan đến NPM và ES6/ES2015 là đã cũ, từ Meteor 1.3 đã khắc phục các vấn đề này rồi.

Giải quyết vấn đề khuyết điểm

Hot Module Replacing – HMR

Như đã nói ở trên, mình muốn giải quyết vấn đề build lâu của Meteor, nhưng HMR là gì? Bạn lập trình web thì biết mỗi lần sửa file gì, mình phải refresh lại trang, để cho trình duyệt nạp lại các tập tin mới.

Meteor thực hiện việc refresh này một cách tự động, nhưng do cơ chế của Meteor, bất kỳ 1 thay đổi nào của file cũng sẽ kích hoạt quy trình build phức tạp của Meteor, việc xử lý này mất khá nhiều thời gian từ 20-30s đối với dự án lớn (Khi bắt đầu thì thấy thay đổi rất nhanh, nhưng với cấu trúc dự án lớn thì khá chậm), sau khi build xong Meteor sẽ gởi tín hiệu xuống client và kích hoạt refresh để lấy code mới. Với cách này thì Meteor làm cũng khá ổn rồi, nhưng vẫn chậm!

Webpack -sử dụng cơ chế HMR cũng quan sát toàn bộ mã nguồn, nhưng khi thay đổi file nào, nó chỉ build lại file đó, và gởi xuống trình duyệt chỉ những thành phần/module thay đổi, việc này giúp cho quá trình lập trình tăng lên. Chỉ cần thay đổi code, Save và liếc qua màn hình có chứa trình duyệt, hoặc thêm mobile web bạn sẽ thấy code thay đổi gần như ngay lập tức (1-3s)

Những cách giải quyết phức tạp – không hay cho người mới

Cũng có một vài repo dùng để kickstart dự án:

https://github.com/thereactivestack/kickstart by@benoit_tremblay

https://github.com/jedwards1211/meteor-webpack-react by jedwards

Tuy nhiên, những repo này lại có những vấn đề khác:

• Thiết lập cấu trúc code theo cách của họ, vì vậy khi bạn sử dụng các hướng dẫn từ trang chủ của Meteor nó rất khác, gây khó hiểu.
• Đưa vào những thành phần, công nghệ không/chưa cần thiết như: Redux, ReactRouter, FlowRouter…

Cách giải quyết vấn đề đơn giản nhất

Theo quan điểm của mình, sử dụng bài viết hướng dẫn của Meteor ngay tại trang chủ là tốt nhất, bởi vì nó dành cho người mới bắt đầu, còn những bài viết khác đa phần là dành cho người đã có kinh nghiệm.

Do vậy, chúng ta chỉ cần sử dụng: Build Todo App with Meteor + React

Hướng dẫn ở trên do chính Meteor soạn thảo đã rất đơn giản và dễ hiểu về Meteor + React, chúng ta không nên đi lung tung. Mình chỉ thêm 1 bước 2a, một bước rất nhỏ để cài Webpack, sau đó bạn có thể tiếp tục với các bước hướng dẫn khác của Meteor.

Bắt đầu

Yêu cầu

NodeJs 0.12 hoặc 4.0+, NPM

Chú ý: ở mục này các bạn có thể theo phần hướng dẫn viết TODO App với React của www.meteor.com, mình chỉ viết lại để tiện theo dõi hơn, chỉ cần chú ý bước cài Webpack là được.

Cài đặt Meteor

MacOS:

curl https://install.meteor.com/ | sh

Window:

https://install.meteor.com/windows

Khởi tạo dự án (Bước 1 – Create an app)

meteor create simple-todos

Sau khi chạy lệnh trên, bạn sẽ có được cấu trúc thư mục như sau:

client/main.js        # a JavaScript entry point loaded on the client
client/main.html      # an HTML file that defines view templates
client/main.css       # a CSS file to define your app's styles
server/main.js        # a JavaScript entry point loaded on the server
package.json          # a control file for installing NPM packages
.meteor               # internal Meteor files
.gitignore            # a control file for git

Chạy Meteor

cd simple-todos
meteor npm install
meteor

Như vậy là bạn đã chạy được webapp bằng Meteor

Khởi tạo React (Bước 2 – Components)

meteor npm install --save react react-dom

….

Bạn vui lòng sử dụng bước 2 tại đây, chỉ cần copy code lại sửa đúng file là được:

https://www.meteor.com/tutorials/react/components

Cài đặt Webpack (Bước 2a – Webpack)

Ở thư mục gốc của dự án simple-todos bạn chạy các dòng lệnh sau:

// Xoá gói build emacscript mặc định của Meteor
meteor remove ecmascript
// Cài đặt webpack - chú ý là webpack của meteor, không phải webpack từ npm
meteor add webpack:webpack
meteor add webpack:react
meteor add webpack:less
meteor

//Sau khi chạy xong lệnh trên, meteor sẽ yêu cầu chạy npm install các gói
npm install

Sau khi chạy xong, bạn sửa file package.json, thêm các dòng sau:

{
  "name": "simple-todos",
   ...
  "main": "server/entry.js", => Dòng 1
  "browser": "client/entry.js" => Dong 2
   ...
}

Như vậy là đã xong rồi, rất đơn giản phải không?

meteor

Chạy lệnh trên, bạn sẽ nhìn thấy webpack và meteor hoạt động cùng nhau, đây là kết quả từ màn hình console:

=> Started proxy.
=> Started MongoDB.
webpack built c439f6a9efa3849e1c17 in 8174ms \
=> Started your app.

=> App running at: http://localhost:3000/
webpack building...lication                  /
webpack built a9141ae180f4e253c8e1 in 1684ms /
=> Meteor server restarted

Bạn hãy thử mở file import/ui/App.jsx hoặc import/ui/Task.jsx để sửa một cái gì đó bất kỳ rồi save lại, ví dụ sửa “Todo List” => “Simple Todo List”, bạn sẽ thấy console log chạy như sau:

webpack building...ing packages              \
webpack built 2a3c1684ae68400daecc in 1059ms |
=> Meteor server restarted
webpack building...lication                  |
webpack built e6e7c13e3e84258156fc in 536ms  /

Và ngay lập tức, trình duyệt sẽ thay đổi theo ngay, một số thay đổi chỉ mất dưới 1s. Ngay từ ban đầu, nếu bạn làm theo hướng dẫn của Meteor – không dùng Webpack, kết quả không khác nhau nhiều. Nhưng khi số file của dự án tăng lên thì sự khác biệt ngày càng lớn, trường hợp của mình gặp phải là khoảng thời gian build của Meteor mất từ 20s :(. Việc Meteor từ phiên bản 1.3 chuyển qua viết theo dạng module cũng có thể là sự chuẩn bị cho việc dùng Webpack.

Bước 3 đến 12

Như vậy là bạn đã xong bước 2a, bạn hãy tiếp tục sử dụng Bước 3 – Collection trong loạt hướng dẫn của Meteor để tiếp tục vọc Meteor. Mình hi vọng qua bài viết này, những bạn mới bắt đầu học Meteor kết hợp React sẽ dễ dàng phát triển hơn, sẽ rất tốt nếu bạn làm theo hướng dẫn của Meteor rồi sau đó tham khảo bài viết này một cách sớm nhất có thể. Sẽ khó cho bạn nếu bạn sử dụng Meteor + React sau một thời gian rồi mới bắt đầu sử dụng Webpack, vì khi đó việc cài đặt Webpack sẽ gặp nhiều khó khăn hơn.

Rủi ro khi sử dụng Webpack trong dự án Meteor

• Việc sử dụng thêm Webpack khiến dự án của bạn gặp nhiều rủi ro hơn vì phải học cả 3 thứ: Meteor, React, Webpack. Bạn có thể hi sinh thời gian để học thêm được Webpack – thay vì mất thời gian cho việc chờ Meteor build, tuỳ thuộc vào bạn!
• Webpack không được hỗ trợ chính thức từ Meteor Core team (MDG) vì lời hứa backwards compatibility, hơn nữa nó mất thời gian cho việc hỗ trợ cộng đồng Webpack + Meteor mà đó không phải là mục đích của họ khi tạo ra Meteor
• Webpack không đơn giản, bạn sẽ mất thời gian để nghiên cứu, nhiều hay không còn tuỳ thuộc vào vấn đề bạn gặp phải là gì. Tuy nhiên, việc sử dụng bộ thêm Webpack có điểm lợi là sau này nếu bạn sử dụng React cho dự án khác mà không cần sử dụng Meteor, bạn sẽ thấy bộ đôi React + Webpack sẽ rất lợi hại.

Tham khảo

Meteor with Webpack, React and Redux in Practice

BulletProof Meteor by Kadira

React & ES6/ES2015

React with Webpack and Meteor as a Backend (Cám ơn bạn Khanh đã bổ sung)

The post Hướng dẫn thiết lập môi trường cho Meteor + React + Webpack appeared first on Fullstack Station.

Nếu bạn mới làm quen với React (hoặc phần front-end nói chung) thì bạn sẽ thấy hệ sinh thái tương đối khó hiểu, đó là lý do vì sao có bài viết hướng dẫn học reactjs sao cho hiệu quả này, bài viết này được lấy các ý chính từ một bài viết mà tác giả là một trong những thành viên đầu tiên của nhóm Facebook tham gia xây dựng và triển khai mã nguồn mở thư viện React này. Hơn nữa, vì tác giả đó không còn làm ở Facebook nữa, nên có được cái nhìn khách quan không phụ thuộc Facebook nữa.

Bài viết giả sử là bạn đã từng có kinh nghiệm xây dựng web với HTML, CSS và Javascript.

Làm thế nào để tương tác với hệ sinh thái của React

Tất cả các phần mềm đều được xây dựng dựa trên một tập hợp các nền tảng công nghệ, và bạn cần phải hiểu rõ về chúng đủ để xây dựng ứng dụng. Nguyên nhân khiến cho công cụ trong hệ sinh thái của React trở nên phức tạp là vì luôn bị giải thích sai thứ tự.

Bạn nên  học, theo thứ tự này, không cần học trước hoặc học đồng thời:

• Thư viện React
• ES2015/ES6
• npm/yarn
• JavaScript “bundlers”
• Routing
• Flux/Redux

Bạn không cần phải học tất cả những thứ này để có thể làm việc hiệu quả với React. Chỉ nên chuyển sang bước tiếp theo nếu như bạn thấy có vấn đề cần được giải quyết. Riêng với ES2015, thì bạn cần học gần như song song vì nó đã trở nên phổ biến tại thời điểm bạn đọc bài này (2017+).

Thêm nữa, có vài chủ đề thường được nhắc đến trong cộng đồng React mà khá “nóng hổi”. Những chủ đề dưới đây khá là thú vị nhưng khó để có thể hiểu được và ít phổ biến hơn so với các chủ đề trên và không cần thiết khi xây dựng ứng dụng.

• Inline styles
• Server side rendering
• Immutable.js
• Relay, Falcor, Graphql, …

Tìm hiểu về React

Có một điều hay bị hiểu nhầm đó là bạn sẽ phí phạm nhiều thời gian trong việc thiết lập công cụ để bắt đầu học React. Trong tài liệu chính thống bạn sẽ thấy copy-paste HTML template là bạn chỉ cần lưu lại một file định dang .html và có thể bắt đầu ngay được. Không cần bất cứ công cụ nào ở bước này, và đừng bắt đầu học các công cụ bổ sung cho tới khi nào bạn cảm thấy thoải mái với React một cách cơ bản. 

Ở bước này, bạn sẽ hiểu cơ chế về DOM ảo của React là như thế nào, cách hoạt động của luồng dữ liệu trong mỗi component của React. Mặc dù bước học React thông qua html cũng không được sử dụng thực tế sau này, nhưng nó quan trọng để bạn hiểu cơ bản.

Mình cho rằng cách học React đơn giản nhất đó là tài liệu chính thống, đọc các tài liệu một cách đầy đủ thì sẽ nắm React tốt. Mặc dù tài liệu tiếng Anh, nhưng bạn cố gắng đọc hiểu từ từ, các bài viết tiếng Việt mà ngay cả là bài viết của mình cũng sẽ không bao giờ đầy đủ và hệ thống được.

Tìm hiểu về ES2015

Ngoài JSX (mà bạn học trong các hướng dẫn về React), bạn sẽ thấy nhiều cú pháp thú vị trong các ví dụ, có thể bạn chưa gặp nó khi làm với javascript thì có thể đó là ES2015 (tên không chính thức là ES6). Vì còn quá mới nên chưa được hỗ trợ hoàn toàn trên các trình duyệt, bạn có thể đọc bài viết về ES2015 tại đây, nhưng các công cụ đóng gói sẽ kết hợp thực hiện phiên dịch với cấu hình đúng cho bạn để có thể sử dụng được trên trình duyệt, còn gọi là transform (biến hình – như phim Transformer) từ mã viết bằng ES2015 sang ES5 mà tất cả các trình duyệt đều hỗ trợ.

Ở phiên bản đầu của tài liệu trước 2016, đều sử dụng React.createClass() để tạo component, điều này giờ đã không còn đúng nữa, khi toàn bộ các component (stateful) đều sử dụng bằng class của ES2015, vì vậy giờ đây ES2015 gần như là điều bắt buộc để đi tiếp không chỉ với React mà còn thế hệ javascript hiện tại nữa.

Tìm hiểu về npm, yarn

npm là công cụ quản lý package của Node.js và là phương pháp phổ biến nhất để các lập trình viên front-end và các nhà thiết kế chia sẻ mã nguồn Javascript. Nó bao gồm một hệ thống quản lý module gọi là CommonJS và cho phép bạn cài đặt bất cứ công cụ command-line nào được viết bằng Javascript. Hãy đọc bài này để biết vì sao CommonJS là cần thiết với các trình duyệt, hoặc CommonJS Spec Wiki để biết thêm về CommonJS API.

Hầu hết các components, thư viện và công cụ tái sử dụng trong hệ sinh thái của React đều được triển khai như là thành các module CommonJS và có thể cài đặt thông qua npm.

yarnlà bộ quản lý các gói thư viện theo mình đánh giá là tốt hơn npm, và cũng đã có bài viết giới thiệu về yarn, mình nghĩ yarn sẽ gần thay thế npm. Mặc dù quản lý công cụ này cũng tương đối đơn giản, nhưng không thể thiếu, bạn hãy dành thời gian tìm hiểu nhé.

Tìm hiểu về các công cụ đóng gói (bundlers) Javascript

Vì một vài lí do kĩ thuật mà module CommonJS (ví dụ, các thư viện trên npm) không thể sử dụng native trên trình duyệt. Bạn cần có một “công cụ đóng gói” Javascript để “đóng gói” các modules này thành các files .js mà có thể include được trên trang web qua thẻ <script>.

Một số ví dụ về công cụ đóng gói Javascript bao gồm webpack và browserify. Cả hai đều là sự lựa chọn tốt, nhưng mình thích webpack hơn vì nó có nhiều tính năng hỗ trợ tốt cho việc xây dựng lớn một cách dễ dàng hơn. Vì tài liệu của nó khá khó hiểu, bạn có thể tham khảo template để bắt đầu ngay và và xem thêm bài viết hướng dẫn về webpack với các tình huống sử dụng phức tạp hơn.

Một điều nên nhớ là CommonJS sử dụng hàm require() để nhập liên kết các modules, vì thế nhiều người có thể thắc mắc và nghĩ nó có liên quan gì đó tới một project khác có tên là require.js, bạn không cần phải quan tâm đến thư viện require.js khi làm việc với React.

Tìm hiểu về routing

“Các ứng dụng single-page” trở nên khá rầm rộ ngày nay. Đây là những trang web mà chỉ thực hiện khởi tạo một lần, và khi người dùng ấn vào một đường dẫn hay nút ấn thì Javascript trên trang web sẽ thực thi mà trang web không cần phải reload lại. Việc quản lý địa chỉ trên thanh địa chỉ được thực hiện bở router.

Router được sử dụng phổ biến nhất trong hệ sinh thái React hiện tại là react-router. React Router còn dùng chung được trong React Native với tên gọi react-router-native. Thật sự là không có ứng dụng nào không dùng router cả, trừ khi đó chỉ là 1 vài component đơn giản trong 1 trang duy nhất. Khi bạn mới học React, thì quả thật chưa cần quan tâm đến Router, nhưng rồi bạn cũng sẽ phải học, sử dụng router, chỉ là không nên học khi bạn chưa biết gì về react.

Tìm hiểu về Flux/Redux

Chắc hẳn bạn đã từng nghe về Flux/Redux, có quá nhiều thông tin không đúng về Flux/Redux, mình có bài viết về Redux tại đây.

Hiện tại cũng nổi lên 1 trường phải không sử dụng Redux/Flux trong dự án React, nhưng thiết kế Flux là do chính Facebook tạo ra nên chắc chắn 1 điều là nó sẽ hữu dụng, tất nhiên cũng đã được áp dụng thiết kế này vào chính ứng dụng/website Facebook nhưng với 1 thư viện khác không được công bố. Facebook chỉ công bố thiết kế về Flux, đó là lý do ra đời của Redux với thiết kế tinh giản hơn 1 chút, do thư viện Flux (cùng tên thiết kế) cũng không nổi tiếng và được chăm chút như Redux, nên đa phần mọi người đều dùng Redux, mình cũng khuyến nghị bạn dùng Redux và quên cái tên Flux đi.

Nhiều bạn khi mới bắt đầu React đã nghiên cứu, học ngay Redux, cách tiếp cận này khá nguy hiểm khi bạn chưa hiểu nhu cầu thực tế là gì, tại sao phải dùng Redux. Các bạn cần xây dựng component trước, khi bạn gặp vấn đề về cách giao tiếp dữ liệu giữa các component có quan hệ cha-con con-cha-con, thì nếu không giải quyết được, hoặc giải quyết xong thấy cấu trúc phức tạp thì hãy nghĩ đến Redux.

Nói rõ hơn, các components trong React được sắp xếp phân bậc, phần lớn thời gian, cấu trúc dữ liệu cũng đi theo cấp phân tầng. Một khi component cha thay đổi prop/state thì toàn bộ component con (trên cùng cây) sẽ được cập nhật. Ví dụ bạn có cấu trúc component có n+1 level, khi bạn cập nhật component level 1, và bạn muốn component level n cũng cập nhật, nếu bạn sử dụng React thuần, sẽ gây ra sự lãng phí về tài nguyên không cần thiết khi toàn bộ props để chuyển cho component level n đều được vận chuyển thông qua n component còn lại , và sự phức tạp khi component level n thay đổi và muốn component level 1 thay đổi theo. Hoặc là cấu trúc component không theo tầng, lộn xộn và phức tạp thì lúc này bạn nên sử dụng Redux. Ngược lại, nếu cấu trúc component chỉ cần 2,3 components thì bạn không cần sử dụng Redux. Ở đây 2,3 component trong 1 cây/nhóm component trên cùng 1 trang, không phải là toàn bộ dự án nhé.

Bạn chỉ cần xây dựng component trước, rồi hãy học Redux, đó mới là hướng đi đúng.

Tìm hiểu về inline styles

Trước React, nhiều người tái sử dụng CSS với các định dạng văn bản phức tạp xây dựng qua các tiền xử lý CSS như SASS. Nhưng sau đó React hỗ trợ để tạo các compoents có thể tái sử dụng một cách đơn giản, các định dạng CSS cũng trỏ nên đỡ phức tạp.

Đây có thể là một ý tưởng điên rồ vì mấy lí do. Nó làm cho media queries trở nên khó hơn, và có thể sinh ra hạn chế về hiệu năng khi sử dụng kĩ thuật này. Khi bắt đầu với React, chỉ cần style như bình thường.

Một khi bạn hiểu được React hoạt động thế nào, bạn có thể thử qua các phương pháp khác, một phương pháp phổ biến đó là BEM. Mình khuyên các bạn bỏ các tiền xử lý CSS, vì React hỗ trợ bạn một cách tái sử dụng styles tốt hơn và công cụ đóng gói Javascript có thể sinh ra các stylesheets tối ưu hơn (tham khảo về chia sẻ này tại OSCON). Mặc dù React như bất cứ một thư viện Javascript nào khác, vẫn hoạt động bình thường với các tiền xử lý CSS.

Tìm hiểu về server side rendering

Server side rendering thường được gọi là “toàn bộ” hay “đồng bộ” JS. Điều đó có nghĩa là bạn có thể lấy bất cứ React components nào và render chúng thành HTML tĩnh trên server. Điều này cải thiện được tốc độ ban đầu vì người dùng không cần phải chờ JS thực hiện download để có thể thấy được UI ban đầu, và React có thể tái sử dụng HTML đã được render phía server, vì vậy mà không cần xử lý ở phía client.

Bạn cần sử dụng server side rendering (SSR) khi mà bạn thấy việc render ban đầu trở nên quá chậm hoặc bạn muốn cải thiện thứ hạng tìm kiếm. Mặc dù Google bây giờ đã thực hiện index các nội dung render phía client, nhưng tại thời điểm tháng một 2016, mỗi khi được lấy ra đo lường thì thấy rõ thứ hạng bị ảnh hướng đi xuống, có khả năng là do vi phạm về tốc độ render phía client.

Việc render phía server vẫn có thể sử dụng nhiều công cụ để làm cho nó trở nên chính xác. Vì vậy khi bạn bắt đầu với React thì không  cần quan tâm tới việc render phía server, bạn nên xây dựng ứng dụng trước và quan tâm tới việc render phía server sau. Bạn sẽ không cần thiết phải viết lại tất cả các components để xử lý việc đó khi bạn cần đến SSR.

Hiện tại (2018), nền tảng tốt nhất để có SSR và lập trình React fullstack thì có Next.js, vào thời điểm này thì đã ra mắt Nextjs phiên bản 5, cực kỳ tốt và mình rất yêu thích Nextjs. Mình sử dụng nextjs cho tất cả dự án yêu cầu sử dụng Nodejs, bạn chỉ cần dùng Nextjs thì gần như các vấn đề về SSR, Router, … đều được giải quyết hết. Tuy nhiên, hãy nhớ là học React trước, bạn không nên nhảy vào Nextjs chỉ vì muốn học React, khi nào xong React và chiến dự án hãy dùng Nextjs.

Tìm hiểu về Immutable.js

Immutable.js cung cấp một tập hợp cấu trúc dữ liệu có thể hỗ trợ giải quyết các vấn đề về tối ưu hoá khi xây dựng ứng dụng React. Đấy là một thư viện tuyệt vời, và bạn chắc hẳn sẽ sử dụng khá nhiều khi xây dựng ứng dụng về sau. Tuy nhiên thì nó lại không cần thiết cho tới khi bạn quan tâm tới tối ưu hoá.

Tìm hiểu về Relay, Falcor etc

Đây là những công nghệ giúp bạn giảm số lượng AJAX requests. Những kĩ thuật này vẫn còn khá là mới mẻ, vì vậy, nếu bạn không có vấn đề với quá nhiều AJAX requests thì bạn không cần tới Relay hay Falcor. Nhắc tới Relay thì cũng liên quan mật thiết đến GraphQL, GraphQL giúp cho ứng dụng của bạn linh động và uyển chuyển với nhiều nguồn dữ liệu khác nhau, cũng như cho phép ứng dụng phía client quy định câu truy vấn (Xem thêm bài GraphQL là gì).

Tham khảo: PeteHunt/Github, PeteHouston/Github

Bài viết có cập nhật để phù hợp hơn với một số kỹ thuật mới, và chỉnh sửa các ý đã không còn đúng ở hiện tại (3/2018)

The post Hướng dẫn học React Js appeared first on Fullstack Station.