原生js转战React速成指南一

这篇文章本应在2023年12月发布，然而本人懒惰成性，拖到了今年2月才得以发布

一直写原生js也不是什么办法，恰逢家园工作室HackWeek(Spark Forge)比赛举办，不得不迅速转战框架。

事实上官方文档已经写的很好了，奈何本人才疏学浅，不得不花费数小时琢磨，且无法彻底理解其奇妙之处。但在工作室内高人的指点下，才得知自己理解存在的一些谬误。

这份速成指南是为那些需要数分钟速成React的人准备的——也就是说，如果时间充裕……琢磨官方文档去吧！

首先我们需要配置nodejs环境，因为网上相关教程很多，这里不再赘述…(别打我！)

接下来要使用脚手架建立一个项目，这里我们用vite。打开VS Code，并新建一个文件夹打开，在终端输入

npm create vite

接着按提示选择与操作即可

如果执行完npm命令，终端没有动静，可以参考这个文章。

看到最后给出的三个命令了嘛？首先cd到创建的目录中，然后执行

npm install

npm run dev

此时如果操作正确，你就能看到终端给出的一个链接：

Ctrl+左键单击这个链接，会打开一个非常牛逼的页面！

看到中间那个写着“count is 0”的按钮了没？点击一下！

变成“count is 1”啦！

接下来看看文件

奇怪？为什么只有一个html文件？这个文件里面啥都没有？

点开src下的App.jsx文件，你恍然大悟：原来html写在这里！

是的，React的所有HTML文本都写在js的函数（仅函数组件，除此之外还有类组件）的return里。这么做的好处是，这些函数可以作为一个个的函数组件，去拼装到页面的任何一部分。当需要复用时，只需要把这个组件拿过来；当需要修改时，只需要修改一个组件就能修改所有使用了这个组件的页面。这些组件可以有自己的css样式，甚至是自己的js，非常直观。

所以，记住一点：React最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件。

欸等等，有没有注意到，App.jsx文件里面的括号和花括号？简单来说，“（）”括号内时用来写html的，“（）”括号内的“{}”花括号是一扇进入JavaScript世界的窗户。

export default function myFunction() {
  const name = 'ZhangSan';
  return (
    <h1>你好，{name}！</h1>
  );
}

在这个例子中，我们在函数内定义name的值为“ZhangSan”，并return出一个用括号包住的<h1>节点。我想显示出“ZhangSan”，怎么办呢？如何在括号中使用JavaScript？使用花括号就可以了。使用花括号括住“name”，便可以使用name的值，并一起return出去。

需要注意的是，“()”括号内必须有且只有一个父元素，像以下这些情况都是不允许的：

export default function myFunction() {
  const name = 'ZhangSan';
  return (
    <h1>你好，世界！</h1>
    <h1>你好，{name}！</h1>
  );
}

export default function myFunction() {
  return (
    
  );
}

正确的写法应当分别是：

export default function myFunction() {
  const name = 'ZhangSan';
  return (
    <>
       <h1>你好，世界！</h1>
       <h1>你好，{name}！</h1>
    </>
  );
}

export default function myFunction() {
  return (
    <></>
  );
}

对，最外面包一层<></>就可以了…

今天就先到这吧（

刚高中毕业的大学生

Heuluck