React API design questions - from a beginner

Hi, I do not have any experience on react/jsx, but I was involved in many other Node.js and frontend projects. When going through the react.dev tutorials, I cannot help asking the following questions. I consulted ChatGPT before posting, but I was not satisfied by its answers. 1. Is it really necessary to rename attribute class to className? A common argument for that is class being a reserved keyword in JS. However, it's perfectly fine to pass it as a dict key. Also, break-assignment can be renamed when catching class attribute in function arguments: function Component({ class: className }) { ... } Is there any other fundamental issue blocking the use of class as an attribute? Can we accept both class and className attributes in base DOM elements in a future version of react? 2. Why mixing children with other props? // Instead of function Component({ children, ...props }) { ... } // Why not function Component({ ...props }, ...children) { ... } I just feel sad knowing that children works different as other keys in the same level... I know there probably exist a ton of discussions on these topics, please feel free to shoot me links in case you know where to find them.

Apr 1, 2025 - 01:03

React API design questions - from a beginner

Hi,

I do not have any experience on react/jsx, but I was involved in many other Node.js and frontend projects.

When going through the react.dev tutorials, I cannot help asking the following questions. I consulted ChatGPT before posting, but I was not satisfied by its answers.

1. Is it really necessary to rename attribute `class` to `className`?

A common argument for that is class being a reserved keyword in JS. However, it's perfectly fine to pass it as a dict key.

Also, break-assignment can be renamed when catching class attribute in function arguments:

function Component({ class: className }) { ... }

Is there any other fundamental issue blocking the use of class as an attribute? Can we accept both class and className attributes in base DOM elements in a future version of react?

2. Why mixing `children` with other props?

// Instead of
function Component({ children, ...props }) { ... }

// Why not
function Component({ ...props }, ...children) { ... }

I just feel sad knowing that children works different as other keys in the same level...

I know there probably exist a ton of discussions on these topics, please feel free to shoot me links in case you know where to find them.