【React】JSX的语法规则和组件

2 年 ago
科, 雅
1 minute

这篇文章的目的是什么？

    • Reactの理解とアウトプット、振り返り用

 

    Reactでよく使われている基本的な技術を言語化できるようする

JSX语法规则

// Reactコンポーネントを書く場合、お作法としてreactのインポートが必要（React17のアップデートでJSXを使用するだけの場合は記述不要になった）
import React from "react";
// htmlにコンポーネントを反映するために、react-domをインポートする
import ReactDom from "react-dom";

// Reactでは関数を使用して画面の要素であるコンポーネントを表現していけるので、アロー関数を書いていく
const App = () => {
 return (
  <> 
   <h1>ReactJSX記法のルール</h1>
   <p>React学習中</p>
  </>
 );
};
// Appをコンポーネントとしてレンダリングする
// 第一引数にレンダリングしたいコンポーネント、第二引数に反映箇所を指定する
ReactDom.render(<App />, document.getElementById("root"));

JSX语法规则总结

    • jsxはjavascriptの中にHTMLを書いていく。

 

    • ファイル拡張子はjsxとする。

 

    • returnの内容が複数になる場合は（）で囲う必要がある。

 

    returnしていく内容は1つのタグで囲わないとエラーになるので、フラグメント（<>>）で囲ってあげる。

组件

组件：在React中用于在屏幕上显示的部分，将显示所需的数据和处理等汇总为一个对象。通过创建用于显示屏幕的组件，可以随时轻松地将其集成并重复使用。

import React from "react";
import ReactDom from "react-dom";

const App = () => {
  return (
    <> 
   　<h1>ReactJSX記法のルール</h1>
   　<p>React学習中</p>
    </>
  );
};

// コンポーネントをエクスポートして、他のファイルでインポートできるようにする。
export default App;

组件汇总

组件是画面元素的一个单位。从大（一个屏幕）到小（一个文本框）多种多样。
组件名称必须以大写字母开头。
可以将组件导出，以便在其他文件中导入使用。

请参考文献

React官方文件
React官方教程

bannerAds