无法区分react app中js和jsx的区别

Question

我用npx create-react-app和默认扩展名app is.js制作了react项目，它的工作原理与我将其转换为。jsx时相同。我是React的新手，我读JSX更简单，但这里都是js和JSX工作相同。

Answer 1

您可以将JSX看作某种Javascript，它允许您将HTML放入其中。通常，当您编写这样的JSX代码时，它会在底层转换为javascript等效代码，例如

JSX

const Head =  () => (<h1> Hello Wordl </h2>)

Javascript等效

const Head = React.createElement('h1', {}, "Hello world")

反应。createElement(tagsorComponent, attribuborprops, ArraychildrenComponentOrTagsOfStrings)

第一个参数可以是一个元素标签或另一个组件，如React.createElement

第二个参数接受子组件的prop或属性，如id、

第三个参数接受一串标签或子组件

假设你用javascript写所有东西你可能会有这样的东西

const Pet = () => {
return React.createElement("div", {}, [
React.createElement("h1", {}, "Luna"),
React.createElement("h2", {}, "Dog"),
React.createElement("h2", {}, "Havanese"),
]);
};
const App = () => {
return React.createElement("div", {}, [
React.createElement("h1", {}, "Adopt Me!"),
React.createElement(Pet),
React.createElement(Pet),
React.createElement(Pet),
]);
};
ReactDOM.render(React.createElement(App), document.getElementById("root"));

但是对于JSX，你可以简单地这样做

const Pet = (props) => {
return (
<div>
<h1>{props.name}</h1>
<h2>{props.animal}</h2>
<h2>{props.breed}</h2>
</div>
);
};
const App = () => {
return (
<div>
<h1>Adopt Me!</h1>
<Pet name="Luna" animal="dog" breed="Havanese" />
<Pet name="Pepper" animal="bird" breed="Cockatiel" />
<Pet name="Doink" animal="cat" breed="Mix" />
</div>
);
};
render(<App />, document.getElementById("root"));

我认为你更喜欢JSX而不是原始的js等效