Tên thành phần ReactJS phải bắt đầu bằng chữ in hoa?

Tôi đang chơi xung quanh với khung ReactJS trên JSBin .

Tôi đã nhận thấy rằng nếu tên thành phần của tôi bắt đầu bằng một chữ cái viết thường thì nó không hoạt động.

Ví dụ, các mục sau không hiển thị:

var fml = React.createClass({
  render: function () {
    return <a href='google.com'>Go</a>
  }
});

React.render(<fml />, document.body);

Nhưng ngay sau khi tôi thay thế fmlbằng Fmlnó sẽ kết xuất.

Có một lý do tôi không thể bắt đầu các thẻ với các chữ cái nhỏ?

Trong JSX, tên thẻ chữ thường được coi là thẻ HTML. Tuy nhiên, tên thẻ chữ thường có dấu chấm (bộ truy cập thuộc tính) thì không.

Xem các thẻ HTML so với các thành phần React .

• <component />biên dịch thành React.createElement('component')(thẻ html)
• <Component /> biên dịch thành React.createElement(Component)
• <obj.component /> biên dịch thành React.createElement(obj.component)

@Alexandre Kirszenberg đã đưa ra một câu trả lời rất hay, chỉ muốn thêm một chi tiết khác.

React được sử dụng để chứa danh sách trắng các tên thành phần nổi tiếng như divvv, được sử dụng để phân biệt giữa các thành phần DOM và các thành phần React.

Nhưng vì việc duy trì danh sách đó không thú vị lắm và vì các thành phần web cho phép tạo các thành phần tùy chỉnh, nên chúng đặt ra một quy tắc là tất cả các thành phần React phải bắt đầu bằng chữ in hoa hoặc chứa dấu chấm .

Từ tài liệu tham khảo React chính thức :

Khi một loại phần tử bắt đầu bằng một chữ cái viết thường, nó đề cập đến một thành phần tích hợp như hoặc và dẫn đến một chuỗi 'div' hoặc 'span' được truyền cho React.createEuity. Các loại bắt đầu bằng chữ in hoa như biên dịch thành React.createEuity (Foo) và tương ứng với một thành phần được xác định hoặc nhập trong tệp JavaScript của bạn.

Cũng lưu ý rằng:

Chúng tôi khuyên bạn nên đặt tên các thành phần với một chữ in hoa. Nếu bạn có một thành phần bắt đầu bằng một chữ cái viết thường, hãy gán nó cho một biến viết hoa trước khi sử dụng nó trong JSX.

Có nghĩa là người ta phải sử dụng:

const Foo = foo;trước khi sử dụng foolàm thành phần Thành phần trong JSX.

Phần đầu tiên của JSXthẻ xác định loại phần tử React, về cơ bản có một số quy ước Viết hoa, viết thường, ký hiệu dấu chấm .

Các kiểu viết hoa và ký hiệu dấu chấm cho biết JSXthẻ đang tham chiếu đến thành phần React, vì vậy nếu bạn sử dụng trình <Foo />biên dịch JSX để biên dịch React.createElement(Foo)
OR và tương ứng với một thành phần được xác định hoặc nhập trong tệp JavaScript của bạn.
<foo.bar />React.createElement(foo.bar)

Trong khi kiểu chữ thường chỉ ra một thành phần tích hợp như <div>hoặc <span>và dẫn đến một chuỗi 'div'hoặc 'span'được truyền cho React.createElement('div').

React đề nghị đặt tên các thành phần với một chữ in hoa. Nếu bạn có một thành phần bắt đầu bằng một chữ cái viết thường, hãy gán nó cho một biến viết hoa trước khi sử dụng nó JSX.

Trong JSX, các lớp React được viết hoa để tương thích với XML, do đó nó không bị nhầm với thẻ HTML. Nếu các lớp phản ứng không được viết hoa, thì đó là thẻ HTML dưới dạng cú pháp JSX được xác định trước.