创建下一个应用程序 - Javascript

如果你想在Javascript中开始创建一个新的应用程序，本质上可能有很多方式可以选择。在这篇文章中，我们将展示如何使用最流行的工具集来开始构建你的下一个应用程序。我们将使用的工具集是Node.js和React。

Node.js

Node.js是一个基于Chrome V8 JavaScript引擎的平台，使JavaScript可以像服务器端脚本一样运行。使用Node.js，你可以轻松地构建高度可扩展的网络应用程序。

安装Node.js

为了在你的计算机上安装Node.js，只需按照以下步骤操作：

1. 在Node.js官网网站下载安装程序
2. 双击下载的文件，按照安装步骤进行操作

创建一个Node.js应用程序

使用Node.js创建一个应用程序，只需按照以下步骤进行操作：

1. 打开终端
2. 进入一个文件夹并创建一个新文件夹
3. 在新文件夹中创建一个名为“app.js”的文件，并输入以下内容：

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

4. 在终端中输入以下内容：

node app.js

5. 打开浏览器，在地址栏中输入“localhost:3000”。这应该会显示“Hello, World!”信息

React

React是Facebook开源的库，用于构建用户界面。使用React，你可以轻松地创建交互性高、快速响应的用户界面。

安装React

使用React，你需要安装Node.js和npm。这两个工具可以在同一个步骤中安装。要安装npm，请执行以下操作：

1. 打开终端
2. 在终端中输入以下内容：

npm install npm@latest -g

创建一个React应用程序

使用React创建一个应用程序，只需按照以下步骤进行操作：

1. 打开终端
2. 进入一个文件夹并创建一个新文件夹
3. 在新文件夹中输入以下内容：

npx create-react-app my-app

4. 等待创建过程完成
5. 在终端中输入以下内容：

cd my-app
npm start

6. 打开浏览器，在地址栏中输入“localhost:3000”。这会显示一个React logo。

创建一个React应用程序并使用Node.js进行后端处理

让我们结合使用Node.js和React，创建一个带有后端处理程序的完整应用程序。

创建一个Node.js后端处理程序

首先，我们将创建一个简单的Node.js后端处理程序，该程序将处理POST请求。按照以下步骤操作：

1. 打开终端
2. 进入一个文件夹并创建一个新文件夹
3. 在新文件夹中创建一个名为“app.js”的文件，并输入以下内容：

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = 3001

app.use(bodyParser.urlencoded({ extended: false }))

app.use(bodyParser.json())

app.post('/api/hello', (req, res) => {
  console.log(req.body);
  res.send(`Hello ${req.body.name}!`);
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
});

4. 在终端中输入以下内容：

npm install express body-parser

5. 在终端中输入以下内容：

node app.js

6. 这会启动一个监听端口为3001的服务器

创建一个React组件

现在，我们将创建一个React组件，该组件将向后端处理程序发送POST请求。要创建该组件，请按照以下步骤操作：

1. 打开终端
2. 进入适当的文件夹并创建一个名为“App.js”的文件，并输入以下内容：

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  state = {
    name: '',
    message: ''
  }

  handleChangeName = (e) => {
    this.setState({ name: e.target.value });
  }

  handleSubmit = async (e) => {
    e.preventDefault();

    const response = await fetch('/api/hello', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ name: this.state.name })
    });

    const body = await response.text();
    console.log(body);

    this.setState({ message: body });
  }

  render() {
    return (
      <div className="App">
        <h1>Hello</h1>
        <form onSubmit={this.handleSubmit}>
          <label>
            Name:
            <input type="text" value={this.state.name} onChange={this.handleChangeName} />
          </label>
          <button type="submit">Submit</button>
        </form>
        <p>{this.state.message}</p>
      </div>
    );
  }
}

export default App;

3. 在终端中输入以下内容：

npm install react react-dom

合并Node.js后端程序和React组件

现在，我们已经准备好合并上述两个组件。按照以下步骤操作：

1. 在Node.js后端程序目录中创建一个新文件夹，命名为“client”
2. 将React组件中所有文件复制到此文件夹中
3. 进入client文件夹中，并输入以下内容：

npm install

4. 打开App.js文件，并编辑URL以指向完整的后端Post请求路径（例如“http://localhost:3001/api/hello”）。

完成以上步骤后，使用以下终端命令运行应用程序：

npm start

现在，你已经创建了一个使用Node.js后端处理程序的React应用程序！