React app là gì

Bài viết được sự cho phép của tác giả Võ Xuân Phong

Nội dung chính Show

Mô-đun và Npm package
Môi trường
Server Side Rendering
Bảo trì dự án
Tổng kết
Tham khảo:

Khi làm việc với ReactJS, chúng ta đã nghe khá nhiều về 2 cái tên Webpack với Create React App. Vậy Webpack với Create React App khác nhau như thế nào? Chúng ta sẽ cùng nhau tìm hiểu ở bài viết này nhé.

Webpack với mục đích chung nhất là để đóng gói, nó dùng để chuyển đổi code React + ES6 sang Javascript thuần (plan-vanilla JS), nó cực kỳ hữu ích và mềm dẻo, nó có thể được cấu hình để bao gồm những thứ mà khi xây dựng một ứng dụng React có thể cần, nhưng nó tốn nhiều thời gian để developer hiểu và cấu hình thiết lập. Webpack cũng hoạt động tốt với Angular, Vue, NodeJS và kể cả là Web Assembly.

Vì lý do trên, mà Facebook đã tạo ra Create React App, chứa Webpack ở bên trong. Mọi thứ đã được cấu hình sẵn, developer chỉ cần tập trung vào việc code, chứ không phải việc ngồi cấu hình cho dự án. Nhưng với Create React App, để cấu hình một cách linh hoạt như Webpack thì đó là một điệu cực kỳ khó khăn.

Bên dưới đây, là một số so sánh cụ thể hơn nữa về Create React App Và Webpack.

Tuyển dụng lập trình React các công ty HOT

Mô-đun và Npm package

Để dễ hiểu thì npm package là một thư mục hoặc một file có chứa hoặc sử dụng nhiều mô-đun.

Các bạn có thể tham khảo link này để biết sự khác biệt giữa mô-đun và npm package:

https://docs.npmjs.com/about-packages-and-modules

Webpack là một mô-đun đóng gói trong khi react-script là một npm package, nó chứa các dependency (gói thư viện) cần để khởi tạo nhanh một project ReactJS như “babel” và “webpack” cũng có trong danh sách các dependency của react-script.

Môi trường

Create React App không có file build cấu hình vì thế chúng ta không thể cấu hình cho nó. Nếu bạn muốn điều chỉnh một số thứ bạn phải sử dụng đến lệnh “npm run eject” để nó xuất ra cho bạn các file cấu hình để bạn điều chỉnh. Mà bạn biết rồi đấy code hay cấu hình của một ai đó sẽ khiến bạn khó hiểu và bối rối mỗi khi xem chúng.

Với Webpack bạn có toàn quyền cấu hình môi trường phát triển cho dự án của bạn, và cấu hình theo cái mà bạn mong muốn.

Server Side Rendering

Để cấu hình và thiết lập SSR với Create React App thì rất đau đầu, với Webpack thì mọi chuyện sẽ dễ dàng hơn.

Bảo trì dự án

Trong khi sử dụng Webpack, thì bạn sẽ hoàn toàn dễ dàng, thoải mái chỉnh sửa cấu hình của Webpack, khi có sự thay đổi hoặc bạn muốn nâng cấp dự án.

Với Create React App thì tất cả được quản lý bởi cộng đồng React.

Tổng kết

Create React App phù hợp nhất cho các dự án nhỏ, nó không phù hợp cho các dự án lớn và phức tạp.

Sử dụng Create React App, sẽ tiết kiệm được thời gian khởi tạo và thiết lập dự án cho các bạn mới học React. Các bạn có thể tập trung vào học cách code React mà không cần lo lắng hay quan tâm “babel” là gì hay các thiết lập phức tạp khác trong file cấu hình Webpack.

Kiến thức về Webpack như là một kỹ năng cần có.

Tham khảo:

https://medium.com/@imbudhiraja/webpack-vs-create-react-app-cb72c47f8100
https://stackoverflow.com/questions/52177318/webpack-build-vs-react-scripts-build

Bài viết gốc được đăng tải tại anhlamweb.com

Có thể bạn quan tâm:

Làm sao để không bị “ngộp” khi học cái mới?
Laravel 5.5 và Reactjs: Xây dựng CRUD (Create, Read, Update, Delete) từ đầu
Top 22 công cụ cho lập trình viên React 2019

Xem thêm Việc làm IT hấp dẫn tại TopDev

Trong bài React dành cho AngularJS developer tôi đã có một số so sánh cũng như hướng dẫn sơ lược về ReactJS dành cho những bạn đã có background về AngularJS. Vậy còn với những bạn chỉ có căn bản về Javascript? Hôm nay tôi sẽ giới thiệu với các bạn những kiến thức cơ bản về ReactJS mà các bạn đã có căn bản về Javascript có thể hiểu được và làm quen dần với ReactJS.

Tôi sẽ chia loạt bài này làm ba phần, như vậy có nghĩa là các bạn sẽ phải đọc hết mỗi bài viết và hiểu nó trong vòng 5 phút, cố gắng nhé. Hehehe.

Hy vọng sau khi đọc xong ba bài viết, mất khoảng 15 phút, chỉ tính thời gian đọc không tính thời gian load page nhé), bạn đã có thể bắt đầu code application với ReactJS một cách thoải mái.

React.JS là một thư viện Javascript dùng để xây dựng giao diện người dùng. Với cá nhân tôi cũng như nhận xét chung của cộng đồng về ReactJS thì nó nhanh, dễ học và vui.

Tiếp theo chúng ta sẽ bắt đầu đến với những khái niệm.

React được xây dựng xung quanh các component, chứ không dùng template như các framework khác. Bạn có thể tạo ra một component bằng các gọi phương thức createClass của đối tượng React, điểm bắt đầu khi tiếp cận với thư viện này.

Ví dụ.

var Button = React.createClass({
    render: function(){
        return (
            
        );
    }
});

Phương thức createClass nhận vào một tham số, là đối tượng mô tả đặc tính của component. Đối tượng này bao gồm tất cả các phương thức để hình thành nên component. Phương thức quan trọng nhất là render, phương thức này được trigger khi component đã sẵn sàng để được render lên trên page.

Trong hàm đó, bạn ẽ trả về một mô tả cho việc bạn muốn React render cái gì lên trên page. Như trong ví dụ ở trên, đơn giản tôi muốn render một button.

Chú ý: Hàm render chính là mô tả cụ thể của UI tại bất cứ thời điểm nào. Vì thế nếu dữ liệu thay đổi, React sẽ take care việc update UI với dữ liệu tương ứng. Các bạn có thể hiểu đơn giản là, khi dữ liệu thay đổi, React sẽ tự động gọi hàm render để update lại UI.

Đây đơn giản là một syntax extension của Javascript. Với nó bạn có thể viết Javascript với những tag giống như XML (XML-like). Về bản chất, các tag thực sự là những lời gọi hàm, sẽ được chuyển đổi trong React code và end up dưới dạng HTML và Javascript trong cây DOM.

Nhưng với những gì bạn biết ở hiện tại, chỉ cần hiểu đơn giản nó giống như là HTML/XML với một số khả năng khác.

Nếu bạn muốn lồng nhiều component vào nhau, bạn sẽ làm điều này trong lệnh return của phương thức render.

Ví dụ.

var Form = React.createClass({
    render: function(){
        return (
            
                
                You have pressed the button {this.props.counter} times!
            
        );
    }
});

var App = React.createClass({
    getInitialState: function(){
        return {
            counter: 0
        }
    },
    onUserClick: function(){
        var newCount = this.state.counter += 1;
        this.setState({
            counter: newCount
        });
    },
    render: function(){
        return (
            
                 Welcome to the counter app!
                
            
        );
    }
});

React.render(,  document.getElementById("app"));

Phía trên, tôi đang lồng Form component vào trong App component. Đây là một dạng quan hệ cha con (parent-child) mà bạn có thể dễ dàng nhận thấy trong HTML.

Phương thức React.render() như các bạn thấy ở trên nhằm mục đích kickstart việc render, và render thừ root component, trong trường hợp trên là App vào trong DOM với container cụ thể là element có id là app

Hết 5 phút, mời các bạn nghỉ ngơi và chờ 5 phút tiếp theo về Prop và State.

Có hai kiểu của data trong React đó là props và state. Sự khác biệt giữa hai kiểu thì hơi khó khăn để hiểu ngay từ ban đầu, ít nhất là về mặt khái niêm. Nhưng một khi bạn bắt đầu code, bạn sẽ nhanh chóng tách biệt được hai loại.

Điểm mấu chốt của sự khác nhau là state thì private và chỉ có thể được thay đổi bên trong bản thân component. Props thì mang tính external, và không bị kiểm soát bởi bản thân component. Nó được truyền từ component cao hơn theo phân cấp, hay có thể hiểu đơn giản là truyền từ component cha xuống component con, cái mà điều khiển dữ liệu trước khi truyền xuống.

Vì thế trong khi một component không thể thay đổi props của nó một cách trức tiếp (điều này có thể làm một cách gián tiếp nhưng hãy để nó vào những phần sau), thì nó có thể tự thay đổi state của bản thân.

Chúng ta sẽ bắt đầu xem xét kỹ hơn về props, cũng như hiểu về data flow một chiều trong React, điều này vô cùng quan trọng.

Nào cùng cài đặt app của chúng ta đã làm trong bài trước với một ít dữ liệu, sử dụng props nhé. Đầu tiên chúng ta cần lấy dữ liệu từ một nơi nào đó. Đó có thể là Ajax call để lấy một số dữ liệu từ API, tuy nhiên chúng ta sẽ hard code nó như một variable.

var text = "Click the button";

Cách để đưa props vào một component nhìn rất giống cách mà chúng ta khai báo attribute cho một HTML element.

Lý do chúng ta sử dụng cặp ngoặc nhọn là vì chúng ta cần nói cho JSX biết rằng đó là một Javascript expression.

Một khi App component được cài đặt như thế này, nó có thể truy xuất vào biến text mà ta đã khai báo ở trên thông qua lời gọi this.props.text. Tuy nhiên, nó không thể trực tiếp thay đổi dữ liệu. Từ góc nhìn của component, props của nó là bất biến (immutable). Nó chỉ là thông tin được cài đặt cho component.

Đây là ví dụ.

var text = "Click the button";

var Form = React.createClass({
    render: function(){
        return (
            
                {this.props.text}
                
            
        );
    }
});
var App = React.createClass({
    render: function(){
        return (
            
                 Welcome to my app!
                
            
        );
    }
});
React.render(,  document.getElementById("app"));

Như các bạn thấy, props được truyền vào trong App component trong phương thức React.render(). Sau đó App component có thể truy xuất biến text thông qua lời gọi this.props.text. Nó cũng có thể truyền dữ liệu xuống component con của nó như chúng ta thấy cách mà Form component được App component cài đặt props trong ví dụ.

Khi dữ liệu đến được Form component, chúng ta thấy đây là điểm kết thúc, dữ liệu sẽ được render ra thẻ h3 như trên.

Đây là cách mà dữ liệu được luân chuyển trong React thông qua props.

Một cách khác để storing dữ liệu trong React là state. Không giống như props, bất biến dưỡi góc nhìn của component thì state có thể thay đổi (mutable).

Vì thế nếu bạn muốn dữ liệu trong ứng dụng thay đổi, ví dụ như dựa trên tương tác người dùng, thì dữ liệu phải được lưu trữ trong component state.

State là private và được quản lý bởi chỉ duy nhất một component, nó không thể truyền xuống cho component con. Nếu bạn muốn truyền xuống cho component con thì bạn phải truyền nó như là một props.

Để cài đặt state, đơn giản chúng ta cài đặt hàm getInitialState() vào component, và trả về bất cứ gì bạn muốn cài đặt trong state của component đó.

Để thay đổi state, đơn giản ta gọi hàm this.setState(), và truyền vào state mới như là một tham số.

Ví dụ.

var App = React.createClass({
    getInitialState: function(){
        return {
            active: true
        }
    },
    handleClick: function(){
        this.setState({
            active: !this.state.active
        });
    },
    render: function(){
        var buttonSwitch = this.state.active ? "On" : "Off";
        return (
            
                Click the button!
                
                {buttonSwitch}
            
        );
    }
});

React.render(,  document.getElementById("app"));

Đoạn code trên cũng cho bạn làm quen với hệ thống event trong React, rất đơn giản. Chúng ta hook một event listener vào trong button, ở trên là onClick. Khi nó được trigger, chúng ta gọi hàm handleClick, cái mà đã được cài đặt trước đó, và luôn sẵn sàng được gọi thông qua từ khóa this.

Trong hàm handleClick, chúng ta gọi this.setState(), cái mà sẽ thay đổi trạng thái của component.

Chú ý: React event được wrap để chạy trên tất cả các browser, có nghĩa là React giúp bạn đảm bảo event của bạn chạy được trên tất cả các trình duyện.

Chúng ta nên giữ state ở đâu?

Bạn nên cố gắng giữ số lượng các stateful component ít nhất có thể, và thậm chí giữ tối thiểu lượng dữ liệu trong state. Nếu component cấp dưới cần truy xuất dữ liệu từ state, thì hãy truyền nó thông qua props.

Lưu ý: Stateful component thì luôn luôn là higher level, trong khi Stateless component thường là lower level trong hệ thống phân cấp.

Để hình dung việc state được giữ ở đâu, bạn hãy hỏi bản thân một vài câu hỏi, những câu hỏi này được lấy từ React docs:

Xác định mỗi component mà render thông tin gì đó dựa trên state.
Tìm một component mà nó chủ sở hữu chung của các component khác (một component nằm bên trên tất cả các component khác trong hệ thống phân cấp thì cần có state)
Hoặc là những component là chủ sở hữu chung hoặc là những component nằm trên hệ thống phân cấp sẽ nên giữ state.
Nếu bạn không thể tìm ra component nào phù hợp, hãy tạo một component mới đơn giản giữ nhiệm vụ lưu trữ state và đặt nó đâu đó nằm bên trên các component là chủ sở hữu chung trong hệ thống phân cấp.

Chúng ta đã nói rất nhiều về việc làm thế nào luồng dữ liệu chỉ có một chiều trong React, từ cha đến con. Điều này thật ra không hoàn toàn đúng, vẫn có cách để thêm một dòng dữ liệu theo hướng ngược lại (Inverse data flow).

Bạn sẽ cần điều này khi mà một component nằm sâu bên trong cây phân cấp cần phải thay đổi trạng thái của cha nó.

Dưới đây là một ví dụ về việc làm thế nào để khi click vào button trong Form component mà nó sẽ trigger việc thay đổi trạng thái (state change) trong App component, cái nằm bên trên nó, cũng như việc có thể truy xuất vào phương thức onUserClick.

var Form = React.createClass({
    render: function(){
        return (
            
                
                You have pressed the button {this.props.counter} times!
            
        );
    }
});

var App = React.createClass({
    getInitialState: function(){
        return {
            counter: 0
        }
    },
    onUserClick: function(){
        var newCount = this.state.counter += 1;
        this.setState({
            counter: newCount
        });
    },
    render: function(){
        return (
            
                 Welcome to the counter app!
                
            
        );
    }
});

React.render(,  document.getElementById("app"));

Như bạn có thể thấy, chúng ta chỉ đơn giản truyền xuống phương thức onUserClick như là một props, đã có thể kích hoạt việc tương tác ngược từ Form component lên App component, và trigger một trong số những method của nó.

Thỉnh thoảng, bạn có thể sẽ muốn tiếp cận cây DOM, và làm một số thay đổi, nhưng không cần thiết phải sử dụng state hay là props. Trong những tình huống như thế này, bạn sẽ cần lấy các node như mong muốn.

Thật may mắn, React cung cấp cho bạn một cách thủ công để có thể lấy DOM node. Đơn giản bạn gọi phương thức React.findDOMCode(component), và truyền vào component mà bạn mong muốn.

Để lấy được tham chiếu của component đã chọn bạn có thể sử dụng thuộc tính refs. Đơn giản thêm một ref vào trong phần tử như thế này.

Từ đó bạn có thể tham chiếu thành phần input khai báo như trên thông qua this.refs.textField.

Ví dụ.

var Form = React.createClass({
  focusOnField: function(){
      React.findDOMNode(this.refs.textField).focus();
  },
  render: function(){
      return (
          
              
              
          
      );
  }
});
var App = React.createClass({
  render: function(){
      return (
          
               Welcome to the focus app!
              
          
      );
  }
});
React.render(,  document.getElementById("app"));

Kết quả của đoạn code trên là thành phần input sẽ được focus khi bạn click button.

Khi bạn tạo các component một cách dynamically, mỗi thành phần đều cần thuộc tính key, và thuộc tính này là duy nhất (unique). Trong suốt quá trình rendering, các component sẽ bị xáo trộn, chúng cũng có thể bị destroy hay recreate tùy vào sự khác nhau của mỗi giải thuật, việc gán cho nó một key để định danh và đảm bảo rằng các component đều ở đúng vị trí của nó, tối ưu hóa việc rendering.

Như thế này.

var App = React.createClass({
    getInitialState: function(){
        return {
            todos: ["eat","code","sleep"] 
        }
    },
    render: function(){
        var todos = this.state.todos.map(function(todo,index){
            return {todo}
        });             
        return (
            
                 Welcome to the ToDo list!
                
                    {todos}     
                
            
        );
    }
});

Thật ra nói về React thì có khá nhiều thứ đề học, tuy nhiên nếu hiểu được hết các khai niệm tôi đã đưa ra thì bạn đã biết đủ để có thể viết được một ứng dụng từ React. Bạn cũng nên tìm hiểu Redux là gì vì nó rất là qua trọng.

Việc làm Reactjs giờ lương toàn nghìn đô không. Anh em vào tham khảo thêm.

TopDev via Kipalog

React app là gì

Mô-đun và Npm package

Môi trường

Server Side Rendering

Bảo trì dự án

Tổng kết

Tham khảo:

You have pressed the button {this.props.counter} times!

Welcome to the counter app!

{this.props.text}

Welcome to my app!

You have pressed the button {this.props.counter} times!

Welcome to the counter app!

Welcome to the focus app!

Welcome to the ToDo list!

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội