Reactjs: Hello World.
Chào các bạn, từ rất lâu rồi tôi có mong muốn là tìm hiểu về reactjs. Tuy nhiên bắt đầu của tôi thực sự rất kém về kiến thức cơ bản như npm, component, webpack..... Trên con đường tôi đi đến học js thì vấp phải những cái chưa biết bao giờ như trên vì vậy để bắt đầu với Reactjs thì bạn cần biết ...
Chào các bạn, từ rất lâu rồi tôi có mong muốn là tìm hiểu về reactjs. Tuy nhiên bắt đầu của tôi thực sự rất kém về kiến thức cơ bản như npm, component, webpack..... Trên con đường tôi đi đến học js thì vấp phải những cái chưa biết bao giờ như trên vì vậy để bắt đầu với Reactjs thì bạn cần biết trước đến những thứ như vậy. Bạn có thể tìm kiếm định nghĩa của các vấn đề trên ngạy tại trang Viblo này hoặc có thể biết đến với google.
1. Định nghĩa về React
Vâng bắt đầu một cái mới thì bạn nên biết Reacjs là ai sáng tạo ra? Và các được các ông lớn nào dùng?
Theo wikipedia thì Reac được viết bởi "Jordan Walke" và hiện nay đang được phát triển bởi facebook, instagram và một cộng đồng develop lớn trên thế giới.
Hiện nay, React được dùng bởi rất nhiều ông lớn trên thế giới như https://www.facebook.com/, https://www.instagram.com/ Netflix, Imgur, Buffer, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, Walmart ....... rất là nhiều trang web được dùng, phát triển bằng reactjs.
Vậy tại sao react lại được phát triển?
Như bạn để ý hai mạng xã hội lớn nhất hiện nay là facebook, instagram đều đang dùng react và phát triển nó. "Mạng xã hội" là một cổng thông tin luôn cần thay đổi dữ liệu, và dữ liệu cần cập nhật liên tục mà không cần load lại toàn bộ cả trang => cái này giúp cho trang web load được nhanh hơn.
Và nguyên nhân tiếp theo, là do React chia nhỏ các phần của một website để người development có thể dễ dang trong việc nâng cấp view cho tương đồng.
Điều thứ 3 cái này làm tôi thích thú nhât khi biết đến React và làm cho tôi muốn học nó. Theo định nghĩa tại chính trang chủ của Reactjs https://facebook.github.io/react/ thì React là một ngôn ngữ học một lần và viết cho tất cả. React Native là ngôn ngữ được phát triển trên React và có thể ứng dụng được trong mobile app. Rất đơn giản nếu bạn biết một react cho website thì react native là bước tiếp theo mà bạn không mất quá nhiều thời gian cho môt app của mình. Bây giờ là thời đại của công nghệ vì vậy có một website thì vân chưa đủ mà App cũng là một cái cần có, vì vậy React Native cũng là một lựa chọn.
2. Bắt đầu với "hello world" reactjs
1. Chuẩn bị
-
Yêu cầu thứ 1, bạn nên biết về component là gì. Phần này hiện tại bạn tìm hiểu sẽ có rát nhiều nguồn cho bạn biết rất rõ ràng. Còn theo mình hiểu thì component là một phần tử do chính bản thân bạn định nghĩa ra. Nó tương đương như 1 thẻ trong HTML như(<h1>, <div> ......). Chỉ khác một điều là thẻ này do bạn là người tạo ra, và bạn là người quyết định nội dung trong nó.
-
Như tiêu đề tôi đã nói, thì học react bạn cần biết được npm và webpack. Vì vậy bạn cần cài đặt được NPM trên máy của mình, để có thể bắt đầu với reactjs.
-
Webpack: thực sự thì webpack cũng không phải là thực sự bắt buộc trong reac, nhưng react là một thư viện được tạo ra từ rất nhiều thư viện khác nhau. Chúng ta có thể sử dụng rất nhiều thư viện ngoài để trợ giúp trong việc lập trình đơn giản hơn trong react. Vì vậy bạn nên tìm hiểu qua một chút về webpack.
2 yêu cầu cuối cùng là không bắt buộc khi tạo một reactjs bắt đầu. Tuy nhiên để đi sâu vào vấn đề thì nó là quan trong và cần được biết đến.
2. Bắt đầu
Vâng tạo một helloworld với reactjs là rất đơn giản. Tôi chắc chắn là vậy. Có thể bạn đọc xong lệnh helloworld react của tôi có thể bảo sao lại thế đc. hoặc câu tương tự như tôi hiểu sai vấn đề bạn muốn biết. Tuy nhiên tôi chắc chắn nó không sai, chỉ là nó quá đơn giản và hiện tại helloworld này chưa đáp ứng được nhu cầu bạn cần với js.
Đầu tiên bạn cần chèn link javascript cdn của reacjs mà bạn cần. Trong đó thì reactjs cần đến 2 thằng chính. Đó là: "react" vs "react-dom". Và một trình biên dịch mã giúp bạn viết ngắn gọn code hơn đó là "babel".
<!DOCTYPE html> <html> <head> <title>Reactjs</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script> </head> <body> <div id="root"> </div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script> </body> </html>
Vâng với đoạn mã trên. khi bạn copy vào và chạy thì chắc chắn với bạn răng bạn sẽ có một helloworld.
và cũng với đoạn trên khi bạn chỉ cần thay đổi đoạn mã trong <script type="text/babel"> thì nội dung reacjs cũng có sự thay đổi. bây giờ bạn có thể vào document của reacjs và đọc để copy một số đoạn mã thay với đoạn trên để trải nghiệm.
Vd:
<!DOCTYPE html> <html> <head> <title>Reactjs</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script> </head> <body> <div id="root"> </div> <script type="text/babel"> function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); </script> </body> </html>
vâng nó chính là đoạn mã trong trang doc của react: https://facebook.github.io/react/docs/rendering-elements.html
và hoàn toàn chạy đc. Bạn có nên thử không nhỉ
