React的基本基础 #01 – 什么是React，什么是JSX

12 月 ago

韵, 科

1 minute

React是什么？

这是Facebook开发的JavaScript库。
Vue.js经常被与之比较，它是一个框架。
虽然框架更大，但React作为库与之相比较出色。
可以将React的一部分嵌入到现有的网页中。
可以通过VirtualDOM来操作DOM。它只重新绘制发生变化的部分，因此具有更高的性能。

JSX 是什么？

这也是由Facebook开发的一种用于在JavaScript中简单编写HTML的语言。
它是一种可读性很高的语言，这一点非常令人高兴。但是，它在浏览器中无法解释，所以需要进行转换。
这被称为“转译”，其中一些著名的工具包括Babel和TypeScript。

return(
 <>
  <h1 className="title">Reactの勉強中</h1>
 <>
)

如果不使用转译，用中文很难读懂React的代码。
（使用转译将用JSX编写的代码转换成下面的代码）

React.creatElement(
 "h1",
 { className: 'title'},
 "Reactの勉強中です"
);

JSX的语法

①安装React软件包

import React from "react"

写法： ②class，对于onclick的描述方式

//クラス
NG:class
OK: className
//for
NG:for
OK: htmlFor
//クリック
NG:<button onclick="activate()">アクティブ</button>
OK:<button onClick={activate}>アクティブ</button>

可以在{}中嵌入变量和函数。

const foo = "<h1 className="title">Reactの勉強中</h1>"
const App = () => {
 return (
  <div id="hoge" className="fuga">
   {foo}
 </div>
);
};

④ 需要闭合标签的空元素

const App = () => {
 return (
  <div id="hoge">
   <input type="text" />
   <img src="assets/foo.png" />
  </div>
);
};

总结

我在观看这个视频的过程中总结了一篇文章。
在学习React时，我遇到了一些困难，但只能逐步加深理解。