JSX上下文何时开始？

Question

如果我的问题似乎难以理解，请原谅我。 因此，我目前正在FreeCodeCamp学习React，我发现何时应该使用花括号来包含javascript令人困惑。 因此，为了简短起见，我每次在{ }之类的标记之间时都使用<h1></h1>。 包含JSX的文件应为file.js还是file.jsx。 如果它是file.js，由于js语法，我们如何无法得到错误。

Answer 1

每当您想引用某些变量或执行一些简单的JS逻辑时，都可以使用花括号{ }。从技术上讲，JSX文件中的所有内容都在JSX上下文中。 JSX是Javascript的扩展，它使我们可以编写类似于html（如h1标签）的代码，但实际上，代码仍是Javascript。在运行时，看起来像html的代码将转换为Javascript。并且文件应命名为file.jsx而不是file.js。

Answer 2

无论何时要在react组件的HTML中使用javascript，都应使用花括号。有时，您可能遇到这样的情况：您有一些外部html元素，然后有花括号来执行一些逻辑，然后再执行另一个html元素。例如：

render( <div>{ this.listOfItems.map(item => <h1>{item}<h1> ) }</div> )

通常，圆括号允许您编写html，大括号允许您编写javascript。

此外，约定是react编写在.jsx文件中，但是.js文件在大多数IDE中都可以正常工作。