全栈开发技术学习笔记02--React中的HelloWorld

1.打开VSCode，并打开React的文件夹（文件夹创建详见上一篇笔记）

2.在文件夹中找到【public】→【src】→【App.js】，打开App.js文件，在其中完成脚本内容。如图1所示。

图1

Tips：App.js是一个JavaScript文件，通常位于React应用程序的src目录下。它是React应用程序的主入口文件，充当整个React组件树的根组件。在这个文件中，我们定义了应用的顶层组件，即App组件，它是所有其他React组件的父级。

3.输入脚本内容

import React from 'react'; function HelloWorld() {   return (     <div>       <h1>Hello, World!</h1>     </div>   ); } export default HelloWorld;

脚本详解：

import React from 'react';——使用import语句来导入React库。这是使用React开发任何组件的前提。React是一个来自react npm包的默认导出，它包含了创建React元素和组件所需的所有功能。

function HelloWorld() { ... }——定义了一个名为HelloWorld的函数。在React中，组件可以是类或者函数。函数组件是一种简洁的编写React组件的方式，当组件没有复杂的状态或生命周期逻辑时，通常推荐使用函数组件。

return ( ... );——return语句用于指定组件渲染的内容。在React中，组件的返回值是一个React元素（或元素的数组），它是实际展示在页面上内容的描述。React元素是虚拟DOM的一部分，它们是轻量级的JavaScript对象，用来描述真实DOM中的节点。

<div> ... </div>——是一个div元素，它是HTML的一个标准容器元素。在React中，我们使用JSX语法（一种JavaScript的语法扩展）来描述UI。JSX使得我们可以以类似编写HTML的方式来编写React元素。<div>标签内部可以包含其他元素或文本。

<h1>Hello, World!</h1>——是一个h1元素，它是HTML的一个标题标签。在这个组件中，h1标签被用来显示文本“Hello, World!”。这是著名的程序员入门程序，用于验证程序语言或框架的基本输出功能。

export default HelloWorld;——使用export default语句来导出HelloWorld函数。这样做之后，其他文件可以通过import语句导入HelloWorld组件，并在它们自己的组件中使用它。这是模块化编程的一种实践，它使得代码更加组织化和可重用。

4.项目导出

（1）打开Terminal界面，如图2所示。

图2

（2）在Terminal界面中输入【npm start】后点击回车，后等待运行，运行成功如图3所示。

图3

（3）运行成功后，浏览器会弹出界面，如图4所示。

图4