一个React初学者随意总结React的内容

2 年 ago

文, 翔

2 minutes

这篇文章是东京的一个软件工程师关于React的简要总结。
虽然我不太擅长编程，但我会尽力去学习，希望能得到大家的教导。

在这篇文章中，我分享了我使用CodeSandbox进行学习的内容。

React是什么？

如果你看过React的官方网站，你就会明白它是一个用于构建用户界面的JavaScript库。
虽然有一个类似的东西叫作框架，比如Angular，但React并不是一个框架。
它可以创建组件，从而高效地构建用户界面。
我认为React就是可以用JS高效地构建用户界面的东西。笑

JSX语法

我认为JSX语法是React的一个重要特征。
JSX语法是在JavaScript中编写HTML的一种方法。

首先，在index.html文件的哪个部分添加React的标记位置。

  <!DOCTYPE html>
  <html lang="en">
<head>
<!-- 省略 -->
</head>
  <body>
    <!-- どの部分にReactを差し込むかを刺す目印 -->
    <div id="root"></div>
  </body>
</html>

然后在index.js中，用箭头函数准备要插入的内容。

import Reactdom from "react-dom";

const App = () => { 
  return　<h1>こんにちわ</h1>　//・・・①
};

ReactDom.render(<App />, document.getElementById("root")); //・・・②

用以上的方式，屏幕上会显示“你好”。

简单说明

用App作为函数名进行定义，并返回HTML标签作为其返回值。
使用ReactDom的render函数将指定的内容渲染到指定位置上。
render(渲染内容, 渲染位置);

在上述的例子中，第一个参数是，但在React中，可以通过将函数名像HTML标签一样包围起来来将其作为组件处理。

JSX的规则

如果return语句后面有多行内容，需要使用（）括起来。

import react-dom from "ReactDom";

const App = () => {
  return　(
　　　　　　　　　　<h1>こんにちわ</h1>
     <p>Hello</p>
  );
};

ReactDom.render(<App />, document.getElementById("root"));

只是用（）括起来会导致错误。
作为规则，
在return之后必须用一个标签括起来。
有三种解决方法。

const App = () => {
  return　(
    <div>
　　　　　　　　　　<h1>こんにちわ</h1>
     <p>Hello</p>
    </div>
  );
};

import {Fragment} from "react";

const App = () => {
  return　(
    <Fragment>
　　　　　　　　　　<h1>こんにちわ</h1>
     <p>Hello</p>
    </Fragment>
  );
};

const App = () => {
  return　(
    <>
　　　　　　　　　　<h1>こんにちわ</h1>
     <p>Hello</p>
    </>
  );
};

如果只是为了避免错误，并且不会生成DOM，那么将②和③与div标签区分开来是一种有效的手段。

「组件是什么意思？」

在React开发中，为了提高可重用性和可维护性，我们将页面元素分解成不同粒度的组件，而不是将它们都写在index.js文件里。因为如果要编写多个页面的话，就会变成成千上万行的代码，这一想法就很可怕（笑）。

组件化是怎么做的？

首先，创建App.js文件。
将之前在index.js中编写的函数写入App.js中。


const App = () => {
  return　(
    <>
　　　　　　　　　　<h1>こんにちわ</h1>
     <p>Hello</p>
    </>
  );
};

export default App;

需要将App.js导出，以便在其他文件中使用。
然后在index.js文件中导入App.js。

import react-dom from "ReactDom";
import App from "./App";


ReactDom.render(<App />, document.getElementById("root"));

我认为它仍然以前一样显示。
这样，为了构建屏幕，我们可以在每个文件中定义组件，并从其他文件中读取并组合部件，这是React开发的乐趣所在。
我认为如果能够做得很好，会感到很有趣。笑

为了更容易理解，您可以将组件文件的扩展名更改为.jsx。

总之。。。

因为可能接下来会变得很长，所以在这里先结束。
感谢您阅读到这里。
如果有任何问题，请告诉我。

我还差得远呢，所以会继续努力。