【React】是什么东东？

3 年 ago
文, 翔
1 minute

首先

初次见面！我是Gaku @ Necono_Engineer。
我目前在RUNTEQ编程学校学习Ruby和Ruby on Rails。这次我学习了React前端技术，我想分享我的知识！

React

概述

这次我决定鼓起勇气，尝试涉足一个新领域——React。这个决定的主要动机是为了创建自己的作品集。对于我来说，React是未知的领域。在RUNTEQ的学习主要偏向于Ruby和Ruby on Rails。然而，我认为不能错过当前网页开发的趋势，为了让作品集更加出众，我感到有必要了解React的知识。
在这篇文章中，我想分享一个React初学者从零开始逐渐学到的知识。

鉴于我是一个初学者，所以可能会有一些错误。
如果您发现了任何错误，请指正。

React的第一次尝试

React是一种经常用于开发单页面应用（SPA）的JavaScript库。React本身并不像Ruby on Rails这样的框架，它只是一个构建UI的库。

图书馆是什么？

image.png

SPA是什么？(单页应用程序)

React是用于创建SPA（单页面应用）的。
SPA按照其名称（一个页面的应用）的含义，基本上只有一个HTML文件，并通过JavaScript来改变界面，实现页面跳转等动态效果。

image.png
image.png

只要是仅获取数据，就可以异步执行，这样就没有延迟，可以进行流畅的浏览！

DOM（文档对象模型）是什么？

image.png

虚拟DOM

React具有构建虚拟DOM的功能。

举例来说，当网页发生变化时，通常需要重新加载整个页面以进行更新。

image.png
ツリー仮装.jpg

组件化的意思是什么？

Web开发的思想是将其分解为部件单位（组件）进行处理。
例如，构成UI的部件（按钮、输入表单、模态框、选项卡）等。
组件是指将它们切割为可重复使用的JavaScript函数单元。
在JavaScript（特别是React等框架）中，这些组件被定义为函数。这被称为”函数组件”。

image.png

函数组件的定义方法

函数组件的定义如下。

function コンポーネント名( 引数 ) {
return ...JSXによる表示...;
}

JSX (JavaScript XML) 是什么？

这是一种用于创建React元素的JavaScript扩展语法。
在React中，我们使用称为JSX语法的写法。在JavaScript文件中，您可以直接编写类似HTML标签的代码片段。

    HTMLとJSXの違いについて
<button class="post" >投稿する</button>

<button className="post" >投稿する</button>

当应用CSS时，在JSX中，需要使用className而不是class进行描述。
作为JSX规则，return内部必须包含一个标签。

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

通过将其放在空标签中，它将被视为一个元素。（虽然还有其他一些用一个标签包围的方法，但本次按兵不动）。

关于进出口

通过在React中导入JSX文件（组件：部件），可以渲染组件。
导出 const 文件名
从“./目录名”导入{文件名}

export const Square = () => {
return ( ~内容
 );
};

import { Square } from "./components/Square"

React的精髓

image.png

总结

这一次只介绍了React的基础部分，但实际上React还有很多需要学习的内容，比如State、Props、React Hooks、重新渲染等等。虽然还有很长的路要走，但通过写文章，我希望能更加深入了解React！

引述资料

    • モダンJavaScriptの基本から始める React実践の教科書

 

    基礎から学ぶ React/React Hooks
bannerAds