react入门_React入门：新手指南

最新推荐文章于 2024-05-13 14:54:22 发布

dingshi7798

最新推荐文章于 2024-05-13 14:54:22 发布

阅读量154

点赞数

文章标签： vue python javascript java react ViewUI

原文链接：https://www.sitepoint.com/getting-started-react-beginners-guide/

版权

react入门

在本指南中，我将向您展示有关如何使用React创建简单的Message App的实用分步教程，向您展示React的基本概念。我假设您以前没有React的知识。但是，您至少需要熟悉现代JavaScript和NodeJS。

React是一个了不起JavaScript库，它引起了开发社区的广泛关注。简而言之，它使开发人员可以更轻松地为Web，移动和桌面平台构建交互式用户界面。它的最佳功能之一是它摆脱了MVC框架固有的有问题的错误，在这些错误中，不一致的视图是大型项目经常出现的问题。如今，全球数千家公司都在使用React，包括Netflix和AirBnB等知名公司。 React已变得非常流行，因此许多应用程序已移植到React上，包括WhatsApp，Instagram和Dropbox。

先决条件

如前所述，您需要以下方面的经验：

在您的机器上，您需要：

NodeJS环境
纱线设置（可选）

如果您想先看一下本指南中使用的已完成项目，则可以通过GitHub进行访问。

什么是React？

React是一个用于构建UI组件JavaScript库。与更完整的框架（例如Angular或Vue）不同，React只处理视图层。因此，您将需要其他库来处理诸如数据流，路由，身份验证等事务。在本指南中，我们将重点介绍React可以做什么。

创建一个React应用程序涉及创建一个或多个可以相互交互的React 组件。 React组件只是一个JavaScript类，需要声明render函数。 render功能仅输出HTML代码，该代码使用JSX或JavaScript代码实现。 React组件可能还需要其他功能来处理数据，操作和生命周期事件。

React组件可以进一步分为容器/有状态组件和无状态组件 。无状态组件的工作仅仅是显示它从其父React组件接收的数据。它还可以接收事件和输入，并将其传递给其父代进行处理。 React容器或有状态组件负责呈现一个或多个子组件的工作。它从外部源获取数据并将其馈送到其子组件。它还从它们接收输入和事件以启动操作。

了解React DOM

在进行编码之前，您需要意识到React使用虚拟DOM来处理页面呈现。如果您熟悉jQuery，就会知道它可以通过HTML DOM直接操纵网页。在许多用例中，这种直接交互几乎没有问题。但是，在某些情况下，例如运行高度交互的实时Web应用程序，性能通常会遭受重大打击。

为了解决这个问题，虚拟DOM的概念被发明出来，并且目前被包括React在内的许多现代UI框架所采用。与HTML DOM不同，虚拟DOM更易于操作，并且能够在毫秒内处理众多操作，而不会影响页面性能。 React会定期比较虚拟DOM和HTML DOM。然后，它计算一个diff ，将其应用于HTML DOM以使其与Virtual DOM相匹配。这样，React尽最大努力确保您的应用程序以一致的每秒60帧的速度呈现，这意味着用户几乎没有延迟。

足够的闲聊！让我们弄脏双手……

开始一个空白的React项目

根据先决条件，我假设您已经具有NodeJS环境设置。首先，将npm安装或更新为最新版本。

$ npm i -g npm

接下来，我们将安装工具Create React App ，它将允许我们创建第一个React项目：

$ npm i -g create-react-app

导航到项目的根目录，并使用我们刚刚安装的工具创建一个新的React项目：

$ create-react-app message-app

…
Success! Created message-app at /home/mike/Projects/github/message-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd message-app
  yarn start

Happy hacking!

根据您的Internet连接速度，这是您首次运行create-react-app命令时，可能需要一段时间才能完成。在安装过程中，安装了一堆软件包，这是建立方便的开发环境所必需的，包括Web服务器，编译器和测试工具。

导航到新创建的message-app文件夹，然后打开package.json文件。

{
  "name": "message-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.12"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

惊喜！ 您希望看到所有作为依赖项列出的软件包的列表，不是吗？ Create React App是一个在幕后起作用的出色工具。它在您的实际代码和开发环境之间建立了清晰的分隔。您无需手动安装Webpack即可配置项目。使用最常见的选项，Create React App已经为您完成了。

让我们进行快速测试以确保我们的新项目没有错误：

$ yarn start

Starting development server…
Compiled successfully!

You can now view message-app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://10.0.2.15:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

如果您没有Yarn，只需将npm替换为： npm start 。对于本文的其余部分，如果尚未安装，请使用npm代替yarn 。

您的默认浏览器应自动启动，并且您将获得如下屏幕：

创建React应用

需要注意的一件事是Create React App支持热重载 。这意味着我们对代码进行的任何更改都将导致浏览器自动刷新。现在，让我们首先按Ctrl + C停止开发服务器。此步骤不是必需的，我只是向您展示如何杀死开发服务器。服务器停止后，删除src文件夹中的所有内容。我们将从头开始创建所有代码，以便您可以了解src文件夹中的所有内容。

JSX语法简介

在src文件夹中，创建一个index.js文件，并将以下代码放入其中：

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

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));

使用yarn start或npm start再次启动开发服务器。您的浏览器应显示以下内容：

你好React

这是最基本的“ Hello World” React示例。 index.js文件是您的项目的根，将在其中渲染React组件。让我解释一下代码是如何工作的：

第1行：导入了React包以处理JSX处理
第2行：导入ReactDOM包以渲染React组件。
第4行：调用渲染功能
- <h1>Hello World</h1> ：一个JSX元素
- document.getElementById('root') ：HTML容器

HTML容器位于public/index.html文件中。在第28行，您应该看到<div id="root"></div> 。这被称为根DOM，因为其中的所有内容都将由React DOM进行管理。

JSX（JavaScript XML）是一种语法表达式，允许JavaScript使用诸如<div> ， <h1> ， <p> ， <form>和<a>标签。它看起来确实很像HTML，但是有一些关键的区别。例如，您不能使用class属性，因为它是JavaScript关键字。而是使用className代替它。而且，诸如onclick类的事件在JSX中被拼写为onClick 。现在让我们修改Hello World代码：

const element = <div>Hello World</div>;

ReactDOM.render(element, document.getElementById('root'));

我已经将JSX代码移到名为element的变量中。我还用div替换了h1标签。为了使JSX正常工作，您需要将元素包装在单个父标记中。这对于JSX起作用是必需的。看下面的例子：

const element = <span>Hello,</span> <span>Jane</span;

上面的代码不起作用。您将收到一个语法错误，告诉您必须将相邻的JSX元素包含在一个封闭标签中。基本上，这是应将元素括起来的方式：

const element = <div>
    <span>Hello, </span>
    <span>Jane</span>
  </div>;

如何在JSX中评估JavaScript表达式？简单，只需使用大括号即可，如下所示：

const name = "Jane";
const element = <p>Hello, {name}</p>

…或像这样：

const user = {
  firstName: "Jane",
  lastName: "Doe"
}
const element = <p>Hello, {user.firstName} {user.lastName}</p>

更新您的代码，并确认浏览器显示“ Hello，Jane Doe”。试用其他示例，例如{ 5 + 2 } 。现在您已经具备了使用JSX的基础知识，让我们继续创建一个React组件。

声明React组件

上面的示例是一种简单的方法，向您展示ReactDOM.render()工作方式。通常，我们将所有项目逻辑封装在React组件中，然后通过ReactDOM.render函数传递。

在src文件夹中，创建一个名为App.js文件，然后键入以下代码：

import React, { Component } from 'react';

class App extends Component {

  render(){
    return (
      <div>
        Hello World Again!
      </div>
    )
  }

}

export default App;

在这里，我们通过定义一个JavaScript类（它是React.Component的子类）创建了一个React Component。我们还定义了一个返回JSX元素的render函数。您可以在<div>标记内放置其他JSX代码。接下来，使用以下代码更新src/index.js ，以查看浏览器中反映的更改：

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

import App from './App';

ReactDOM.render(<App/>, document.getElementById('root'));

首先，我们导入App组件。然后，我们使用JSX格式呈现App ，如下所示： <App/> 。这是必需的，以便JSX可以将其编译为可以推送到React DOM的元素。保存更改后，请查看浏览器以确保其呈现正确的内容。

接下来，我们将研究如何应用样式。

样式化JSX元素

样式化JSX元素的方式有两种：

JSX内联样式
外部样式表

以下是我们如何实现JSX内联样式的示例：

// src/App.js

…
  render() {
    const headerStyle = {
      color: '#ff0000',
      textDecoration: 'underline'
    }
    return (
      <div>
        <h2 style={headerStyle}>Hello World Again!</h2>
      </div>
    )
  }
…

React样式看起来很像常规CSS，但是有一些关键的区别。例如， headerStyle是对象文字。我们不能像通常那样使用分号。另外，为了使它们与JavaScript语法兼容，已更改了许多CSS声明。例如，我们使用textDecoration代替text-decoration 。基本上，对所有CSS密钥都使用驼峰式大小写，但卖方前缀（例如WebkitTransition ）必须以大写字母开头。我们还可以通过以下方式实现样式：

// src/App.js

…
  <h2 style={{color:'#ff0000'}}>Hello World Again!</h2>
…

第二种方法是使用外部样式表。默认情况下，已经支持外部CSS样式表。如果要使用Sass或Less，请查看参考文档以了解如何配置它。在src文件夹中，创建一个名为App.css文件，然后键入以下代码：

h2 {
  font-size: 4rem;
}

在第2行或第3行中，将以下导入语句添加到src/App.js ：

// src/App.js
…
import './App.css';
…

保存后，您应该在浏览器中看到文本内容的大小发生巨大变化。

在React中样式化

现在您已经了解了如何在React项目中添加样式，让我们继续学习无状态和有状态的React组件：

无状态与有状态组件

在React中，我们通常处理两种类型的数据： props和state 。 Props是只读的，由父组件设置。 State在组件内定义，并且可以在组件的生命周期内更改。基本上，无状态组件（也称为哑组件）使用props来存储数据，而有状态组件（也称为智能组件）使用state 。为了更好地理解，让我们研究以下实际示例。在src文件夹中，创建一个文件夹并将其命名为messages 。在该文件夹内，创建一个名为message-view.js文件，然后键入以下代码以创建一个无状态组件：

import React, { Component } from 'react';

class MessageView extends Component {
  render() {
    return(
      <div className="container">
        <div className="from">
          <span className="label">From: </span>
          <span className="value">John Doe</span>
        </div>
        <div className="status">
          <span className="label">Status: </span>
          <span className="value"> Unread</span>
        </div>
        <div className="message">
          <span className="label">Message: </span>
          <span className="value">Have a great day!</span>
        </div>
      </div>
    )
  }
}

export default MessageView;

接下来，使用以下代码在src/App.css添加一些基本样式：

container {
  margin-left: 40px;
}

.label {
  font-weight: bold;
  font-size: 1.2rem;
}

.value {
  color: #474747;
  position: absolute;
  left: 200px;
}

.message .value {
  font-style: italic;
}

最后，修改src/App.js ，以使整个文件如下所示：

import React, { Component } from 'react';

import './App.css';
import MessageView from './messages/message-view';

class App extends Component {
  render(){
    return (
      <MessageView />
    )
  }
}

export default App;

到现在为止，代码应该已经很容易说明了，因为我已经解释了基本的React概念。现在看一下您的浏览器，您应该得到以下结果：

讯息检视

我还要提及的是，对于无状态组件，不必使用面向对象的语法，尤其是当您没有定义生命周期函数时。我们可以使用如下功能语法重写MessageView ：

// src/messages/message-view.js

import React from 'react';
import PropTypes from 'prop-types';

export default function MessageView({message}) {
  return (
    <div className="container">
      <div className="from">
        <span className="label">From: </span>
        <span className="value">{message.from}</span>
      </div>
      <div className="status">
        <span className="label">Status: </span>
        <span className="value">{message.status}</span>
      </div>
      <div className="message">
        <span className="label">Message: </span>
        <span className="value">{message.content}</span>
      </div>
    </div>
  );
}

MessageView.propTypes = {
  message: PropTypes.object.isRequired
}

请注意，我删除了Component导入，因为在函数语法中这不是必需的。这种样式一开始可能会让人感到困惑，但是您会很快了解到以这种方式编写React组件会更快。

您已经成功创建了一个无状态的React组件。但是，它还不完整，因为要与状态组件或容器正确集成，还需要做更多的工作。当前， MessageView正在显示静态数据。我们需要进行修改，使其可以接受输入参数。我们使用this.props做到这this.props 。我们将为prop分配一个名为message的变量。我们还将使用prop-types包将message变量标记为required 。这是为了随着项目的增长更容易对其进行调试。使用以下代码更新message-view.js ：

// src/messages/message-view.js
…
import PropTypes from 'prop-types';

class MessageView extends Component {
  render() {

    const message = this.props.message;

    return(
      <div className="container">
        <div className="from">
          <span className="label">From: </span>
          <span className="value">{message.from}</span>
        </div>
        <div className="status">
          <span className="label">Status: </span>
          <span className="value">{message.status}</span>
        </div>
        <div className="message">
          <span className="label">Message: </span>
          <span className="value">{message.content}</span>
        </div>
      </div>
    )
  }

  // Mark message input parameter as required
  MessageView.propTypes = {
    message: PropTypes.object.isRequired
  }
}
…

接下来，我们将创建一个有状态组件，该组件将作为MessageView组件的父级。我们将利用state数据类型存储一条消息，并将其传递给MessageView 。为此，请在src/messages创建message-list.js文件，然后键入以下代码：

// src/messages/message-list.js

import React, { Component } from 'react';
import MessageView from './message-view';

class MessageList extends Component {

  state = {
    message: {
        from: 'Martha',
        content: 'I will be traveling soon',
        status: 'read'
      }
  }

  render() {
    return(
      <div>
        <h1>List of Messages</h1>
        <MessageView message={this.state.message} />
      </div>
    )
  }
}

export default MessageList;

接下来，更新src/App.js ，从而改为呈现MessageList （反过来呈现其子组件MessageView ）。

// src/App.js
…
import MessageList from './messages/message-list';

class App extends Component {
  render(){
    return (
      <MessageList />
    )
  }
}
…

保存更改后，检查浏览器以查看结果。

讯息清单

现在，让我们看看如何使用MessageView实例显示多条消息。首先，我们将state.message更改为数组，并将其重命名为messages 。然后，我们将使用map函数生成多个MessageView实例，每个实例对应于state.messages数组中的一条消息。我们还需要使用唯一值（例如index填充名为key的特殊属性。 React需要此功能来跟踪列表中的哪些项目已更改，添加或删除。更新MessageList代码如下：

class MessageList extends Component {

  state = {
    messages:  [
      {
        from: 'John',
        message: 'The event will start next week',
        status: 'unread'
      },
      {
        from: 'Martha',
        message: 'I will be traveling soon',
        status: 'read'
      },
      {
        from: 'Jacob',
        message: 'Talk later. Have a great day!',
        status: 'read'
      }
    ]
  }

  render() {
    const messageViews = this.state.messages.map(function(message, index) {
      return(
        <MessageView key={index} message={message} />
      )
    })
    return(
      <div>
        <h1>List of Messages</h1>
        {messageViews}
      </div>
    )
  }
}

检查您的浏览器以查看结果：

消息循环

如您所见，使用React定义构建基块以创建强大而复杂的UI界面很容易。随时添加更多样式，例如在每个MessageView实例之间放置间距和分隔线。

摘要

现在，我们到了本入门指南的结尾。还有很多我无法涵盖的React概念，例如生命周期方法 。如果您想知道从这里去哪里，请查看我们的其他文章，以了解有关React及其生态系统的更多信息：

您也可以查看我们所有的React文章以获取更深入的主题。我希望这篇介绍使您兴奋到足以在您的项目中开始使用React。

我们已经与Open SourceCraft合作，为您带来了来自React Developers的6个专业提示 。 有关更多开源内容，请查看Open SourceCraft 。

翻译自: https://www.sitepoint.com/getting-started-react-beginners-guide/

react入门

dingshi7798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react入门_React入门：新手指南

react入门在本指南中，我将向您展示有关如何使用React创建简单的Message App的实用分步教程，向您展示React的基本概念。我假设您以前没有React的知识。但是，您至少需要熟悉现代JavaScript和NodeJS。 React是一个了不起JavaScript库，它引起了开发社区的广泛关注。简而言之，它使开发人员可以更轻松地为Web，移动和桌面平台构建交互式用户界面...
复制链接

扫一扫