React使用JSX代替常规JavaScript进行模板化。不必要使用它,但是,下面是一些附带的优点。
-
它更快,因为它在将代码编译为JavaScript时执行优化。
-
它也是类型安全的,大多数错误都可以在编译期间捕获。
-
如果您熟悉HTML,则可以更轻松快捷地编写模板。
使用JSX
在大多数情况下,JSX看起来像常规HTML。查看App.jsx中返回div的代码。
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
尽管它与HTML相似,但是在使用JSX时我们需要牢记一些注意事项。
嵌套元素
如果要返回更多元素,则需要用一个容器元素包装它。注意我们如何将div用作h1,h2和p元素的包装器。
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;
属性
除了常规的HTML属性和属性外,我们还可以使用自己的自定义属性。当我们要添加自定义属性时,我们需要使用数据前缀。在以下示例中,我们添加了data-myattribute作为p元素的属性。
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
<h2>Content</h2>
<p data-myattribute = "somevalue">This is the content!!!</p>
</div>
);
}
}
export default App;
javaScript表达式
JavaScript表达式可以在JSX内部使用。我们只需要用大括号{}来包装它。
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>{1+1}</h1>
</div>
);
}
}
export default App;
我们不能在JSX中使用if else语句,而是可以使用条件(三元)表达式。在下面的示例中,变量i等于1,因此浏览器将呈现true,如果将其更改为其他值,它将呈现false。
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;
css
React建议使用内联样式。当我们想要设置内联样式时,我们需要使用camelCase语法。React也将在特定元素上的数字值后自动附加px。下面的示例演示如何将myStyle内联添加到h1元素。
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;
注释
编写注释时,如果要在标签的子代部分中编写注释,则需要使用大括号{}。最好在编写评论时使用{},因为我们希望在编写应用程序时保持一致。
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;
命名约定
HTML标签始终使用小写标签名称,而React组件以Uppercase开头。
注意 -您应该使用className和htmlFor作为XML属性名称,而不是class和for。
这在React官方页面上解释为-
由于JSX是JavaScript,因此不建议将诸如class和for的标识符用作XML属性名称。相反,React DOM组件需要DOM属性名称,例如className和htmlFor。