Chuyển đến nội dung chính

Bài 2: ReactJS - Tìm hiểu JSX


Tiếp tục với serires Hướng dẫn ReactJS. Hôm nay chúng ta sẽ tìm hiểu về JSX. React sử dụng JSX làm quy chuẩn khi lập trình thay cho Java Script thông thường. Bạn không nhất thiết phải sử dụng JSX nhưng việc sử dụng chúng đem lại khá nhiều lơi ích, bạn đọc thêm ở đây để hiểu rõ hơn về JSX.

Using JSX

JSX khá giống với HTML, nên bạn sẽ không mấy khó khăn khi làm quen với nó. Chúng ta vừa gặp qua nó ở bài 1: ReactJs-Environment Setup. Ta cùng xem lại file App.js trong folder src:

App.js

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;
Nhìn rất giống HTML bình thường ta code phải không? Nhưng có vài điều chúng ta cần lưu ý khi làm việc với JSX

Nested Elements

Nếu chúng ta muốn return nhiều elements, chúng ta cần bọc nó với 1 container.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}
export default App;
ReactJs

JavaScript Expressions

JavaScript Expressions có thể được sử dụng trong JSX, ta chỉ cần  bao nó với 2 dấu ngoặc nhọn {}
import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}
export default App;
ReactJs JavaScript Expressions
Chúng ta không thể sử dụng If Else trong JSX, thay vào đó ta có thể sử dụng:
import React from 'react';

class App extends React.Component {
   render() {
      var i = 1;
      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

Styling

Để sử  dụng inline styles trong React chúng ta nên dùng camelCase syntax. React cũng sẽ tự động thêm 'px' vào sau các giá trị số cho các element, cụ thể như: 'font-size, width, height...' Các bạn xem ví dụ sau:
import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;
Styling trong ReactJs

Comments

Để thêm comments trong React ta làm như sau:
import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;
Các bạn cũng có thể bỏ 2 dấu ngoặc {} nhưng React khuyên chúng ta nên có nó để cho code được đồng nhất gì đó mình cũng không hiểu chỗ này lắm :)).

Bài 3: ReactJS - Components

Nếu có thắc mắc hay lỗi gì về React các bạn để lại comment nha, mình sẽ trả lời trong vòng 24h.

Nhận xét

  1. {//End of the line Comment...} SAO MÌNH LÀM THEO COMMENT BỊ LỖI !

    Trả lờiXóa
  2. Tự tin đón Tết, "xoá sạch" mụn thâm cùng Thẩm mỹ viện Ula
    Mụn là nỗi ám ảnh của nhiều người, không chỉ ảnh hưởng đến thẩm mỹ mà đôi lúc còn khiến chúng ta cảm thấy mất tự tin. Nếu bạn đang gặp phải những rắc rối về mụn, hãy đến Thẩm mỹ viện Ula để "xóa sạch" mụn, tự tin đón Tết với làn da sáng mịn.
    Nguyên nhân không nên tự ý trị mụn tại nhà
    Mụn luôn là "kẻ thù" xấu xí của làn da. Vì thế, khi thấy những nốt mụn đáng ghét xuất hiện, chúng ta thường có thói quen dùng tay hoặc cây nặn mụn để loại bỏ chúng ngay lập tức.
    Nguồn:https://suckhoedoisong.vn/tu-tin-don-tet-xoa-sach-mun-tham-cung-tham-my-vien-ula-169211209112117884.htm
    Nguồn: https://thammyvienula.vn/


    Trả lờiXóa

Đăng nhận xét

Bài đăng phổ biến từ blog này

Tổng hợp danh sách các trang web lấy backlink cực tốt (P.1)

Đi backlink  trong SEO là điều mà ai cũng phải biết và đầu tư cho nó nhiều nhất. Dưới đây, mình chia sẻ các trang web có thể đi backlink khá tốt cho mọi người. Mỗi ngày các bạn tạo 1 bài post sau đó post lên 10 trang trong tổng số 40 trang này, hôm sau cũng viết 1 bài khác rồi post lên 10 trang kế, khi hết thì quay vòng lại 10 trang đầu, mình sẽ update thêm các website nên các bạn cứ yên tâm không lo hết. (Các bạn nhớ bookmark lại kẻo quên trang mình nha :) ) Nếu các bạn không rõ về DA PA IN-EXTERNAL Links thì xem ở đây:  Các chỉ số quan trọng cần biết khi làm SEO ID URL DA PA Internal Links External Links Alexa Global Rank Alexa Local Rank 1 http://diendan.zing.vn/ 63,17 54,5 168 19 701 9 2 http://vatgia.com/ 62,61 57,34 984 23 8086 71 3 http://forum.ueh.edu.vn/ 49,82 38,88 555 43 92060 774 4 http://www.5giay.vn/ 47,12 55,72 445 12 43

Viết game flappy bird bằng HTML và JavaScript (P.1)

Hôm nay chúng ta sẽ viết một game tương tự flappy bird bằng HTML và JavaScript một cách đơn giản, bài viết không chỉ giúp bạn nâng cao khả năng lập tình HTML JS mà còn tạo ra 1 sản phẩm thú vị cho nên các bạn chịu khó theo dõi nha. Các bạn xem demo sản phẩm khi chúng ta hoàn thành trên fiddle:  Demo  đây chỉ là demo cơ bản thôi, khi xem xong bài viết này các bạn có thể làm hay hơn thế nữa :)). Nào ta bắt đầu thôi. HTML Canvas Đầu tiên để tạo game chúng ta cần tạo background cho nó, chúng ta sẽ dùng HTML Canvas , Canvas là một element tuyệt vời cho việc thiết kế game trong HTML. Chúng ta sẽ dùng Js để vẽ trên Canvas. Nếu các bạn chưa biết về Canvas mình có để link phía dưới để các bạn tìm hiểu nên hiện giờ cứ yên tâm mà xem tiếp nha. Bây giờ các bạn tạo 1 file html và nhập đoạn code sau: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas {

Xdebug, PhpStorm and Docker - Why it not working?

  Lately, i start new job with Magento, and while setup IDE for project i face problem with Xdebug, PhpStorm and Docker. It took me a lot of hours to find out and make it work. So i write this post to save some step for you guys also me some way to solve the stuck when we got. 1. How Xdebug work: Link  i founded this article with quite easy understand explanation how xdebug work, so spend some minutes to read it, we need to understans the thing we do to easy to solve it. 2: Define Xdebug is installed on server: With php -v you should see Xdebug showed. And with phpinfo() If you dont see it showed, it mean you have not installed it or it not enable Checking if you have enable extension from your php ini. Or if you have not installed it, consider its document: Link . 3. Now if you make sure xdebug installed but your break point at PhpStorm not break, continue these steps: In phpinfo(), make sure  xdebug.remote_enable is On cause you are using docker container, also checking  xdebug.remot