用JavaScript和React创建一个Web应用，实现Hello World

1 年 ago

韵, 科

2 minutes

使用 JavaScript React 来创建一个 Hello World 的 Web 应用程序。

in chinese, only need one option :

目标

我将在 Windows 11 上使用 Linux 进行云开发。

您可以从这里查看文章的列表。

实现

在本地的Ubuntu环境下，启动JavaScript React Web应用程序。

在这篇文章中，我们通过手工创建一个最小配置的项目来满足学习目的。请注意，您可以查看官方步骤以获取更详细的项目创建方法。

技術主题

“React 是什么？”

您可以展开查看此内容。React（リアクト）

React是由Meta（以前称为Facebook）开发的JavaScript库，用于构建用户界面。

React负责MVC架构中的视图层，并可以创建可重用的组件。

React可以根据组件状态的更改自动更新用户界面。

使用React Native，可以开发适用于iOS和Android等移动平台的应用程序。

由于其灵活性和高速性，React目前是最受欢迎的前端库之一。

开发环境

Windows 11 Home 22H2 を使用しています。

由于我们将操作WSL上的Ubuntu，因此您可以参考macOS的操作方式。

WSL（微软商店应用版）※ 您可以从相关文章中查看安装方法
> wsl –version
WSL版本：1.0.3.0
内核版本：5.15.79.1
WSLg版本：1.0.47Ubuntu ※ 您可以从相关文章中查看安装方法
$ lsb_release -a
没有可用的LSB模块。
发行商：Ubuntu
描述：Ubuntu 22.04.1 LTS
发行版：22.04

npm ※ 您可以从相关文章中查看安装方法
$ node -v
v19.8.1

$ npm -v
9.5.1

本文以Ubuntu终端为基础进行操作。对于初次学习如何使用Vim进行复制和粘贴的人来说，以下文章介绍了具体步骤。请务必尝试一下。

制作 Web 应用的规格说明

NoエンドポイントHTTPメソッドMIME タイプ1/GETtext/html

打开说明。使用Web浏览器访问/端点时，我们将实现一个简单的Web应用程序，以响应HTML文件。

显示”Hello World”的步骤

创建项目文件夹

创建项目文件夹。
※ 将~/tmp/hello-react设为项目文件夹。

$ mkdir -p ~/tmp/hello-react
$ cd ~/tmp/hello-react

创建JS文件

创建 index.js 的 JavaScript 文件。

$ mkdir -p src
$ vim src/index.js

文件的内容

import React from 'react';
import ReactDOM from 'react-dom';

const hello = () => "Hello World!";

const App = () => {
  return <h1>{hello()}</h1>;
};

ReactDOM.render(<App />, document.getElementById("app"));

在React中，您需要导入react和react-dom包，并使用ReactDOM.render()方法将组件渲染到DOM中。在上面的例子中，我们将App组件传递给ReactDOM.render()方法，并将其渲染到#app元素上。

App组件中调用了hello()函数，并展示了如何在

元素中显示文本。

另外，您可以使用JSX语法来编写类似HTML的标记。

创建HTML文件

创建 index.html 文件。

$ vim src/index.html

文件的内容 de

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>React</title>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

创建webpack配置

创建webpack.config.js文件。

$ vim webpack.config.js

文件的内容

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    })
  ]
};

打开说明。展示了Webpack的配置文件。Webpack解决应用程序内的依赖关系，并将它们打包成一个捆绑包。

对每个对象进行说明。

字段
内容

mode
指定构建模式。这里指定为开发模式。

entry
指定Webpack在打包应用程序时首先加载的文件。这里指定为src/index.js。

output
指定打包后的文件输出位置和名称。这里将捆绑后的文件输出到dist文件夹中，并命名为bundle.js。

module
指定Webpack用于解释源代码的加载器。这里使用babel-loader，将JSX语法转换为普通的JavaScript。

devServer
用于配置Webpack开发服务器的设置。这里设置Webpack开发服务器以dist文件夹为基准运行。

plugins
指定为Webpack提供附加功能的插件。这里使用HTMLWebpackPlugin，生成基于src/index.html的HTML文件给Webpack。

构建和执行

我们将进行项目的初始化。

$ npm init -y

修改package.json文件。

$ vim package.json

文件的内容 de

{
  "name": "hello-react",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack serve --port 3000 --mode development --open "
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

进行图书馆安装。

$ npm install \
    react react-dom \
    babel-loader @babel/core @babel/preset-env @babel/preset-react \
    webpack webpack-cli html-webpack-plugin webpack-dev-server \
    --save-dev

我将建造。

$ npm run build

开始运行。
※使用 ctrl + C 停止。

$ npm run start

在以下的网址上，将会启动网页浏览器。

http://localhost:3000/

在这个过程中，网页浏览器中成功显示出了Hello World！

总结

我在Ubuntu上建立了一个简单的Node.js、npm开发环境，在这个环境下可以运行JavaScript React Web应用程序。

使用Ubuntu可以掌握Linux知识。起初可能会感到困难，但随着逐渐进步，您将自信地写出代码。

你觉得怎么样？在WSL Ubuntu上，你可以轻松启动JavaScript React Web应用。请务必试一试。我们还将介绍更多关于Node.js和npm开发环境的内容，请期待。

用JavaScript和React创建一个Web应用，实现Hello World

使用 JavaScript React 来创建一个 Hello World 的 Web 应用程序。

in chinese, only need one option :

实现

技術主题

“React 是什么？”

开发环境

制作 Web 应用的规格说明

显示”Hello World”的步骤

创建项目文件夹

创建JS文件

元素中显示文本。

创建HTML文件

创建webpack配置

构建和执行

总结

相关文章 (Guanlian wenzhang)

JavaScript 是一种编程语言，而 Vue.js 是一种基于 JavaScript 的前端框架。

C# ASP.NET Core Blazor：C# ASP.NET 核心云绽

使用 JavaScript React 来创建一个 Hello World 的 Web 应用程序。

in chinese, only need one option :

实现

技術主题

“React 是什么？”

开发环境

制作 Web 应用的规格说明

显示”Hello World”的步骤

创建项目文件夹

创建JS文件

元素中显示文本。

创建HTML文件

创建webpack配置

构建和执行

总结

相关文章 (Guanlian wenzhang)

JavaScript 是一种编程语言，而 Vue.js 是一种基于 JavaScript 的前端框架。

C# ASP.NET Core Blazor：C# ASP.NET 核心 云绽

C# ASP.NET Core Blazor：C# ASP.NET 核心云绽