reactjs教程-react 入门教程

2023-10-21 21:40:35

React.js很快成为当时最流行的JS框架之一。在本系列中，我们将学习如何创建一个React应用程序。让我们开始吧！

粉碎盒鼓励我们找到更好的方法来提供高质量的产品。我们做这件事的方法之一就是学习和尝试新技术。过去几个月，Smashing Boxes的开发人员开始尝试REACT.JS。这是我们感到兴奋的技术之一。有了React，我们找到了一种工具，可以轻松编写简单，可测试和快速的代码。

我们看到使用它的很多好处。因为React本身就是模块化的，学习和理解其他代码很简单。这已经让我们的代码审查更快。我们也希望它能够加速新开发人员的入队。从那以后，一旦我们把应用程序交给我们的客户，系统应该更容易拾取和维护。

React代码通常比替代方法更容易测试。测试对我们来说是巨大的。任何提高质量的东西都意味着客户可以更快地获得更好的产品。

React是构建Web应用程序前端的越来越受欢迎的解决方案，我们非常喜欢使用它。如果你愿意写JavaScript并渴望开始学习这个库，那么这篇文章就是为你准备的。

在本教程中，我将介绍如何在OS X上设置项目。设置完成后，我们将在React中创建一个Hello World。从那里我会谈谈下一步学习更多。

React是Facebook制作的一个库，用于在JavaScript中创建组件。现在，您可以使用它来构建网站和本机iOS和Android应用程序。图书馆的两大吸引力在于它的表现和简单性。

它通过使用虚拟DOM管理页面来实现高性能。你写的内容描述了页面的结构。当状态改变时，React将旧的与新的区别开来，并进行到达新页面所需的最小更改。避免不必要的DOM更新是高性能应用程序的关键之一。

React的另一个好处是它比其他流行的库更简单。这是因为React只是视图层。您可以使用它，而无需引入整个框架。事实上，许多对与React完全成熟的框架，如Angular，Ember和Backbone。

如果您在Mac上开发，使用Homebrew可以轻松安装和管理工具。我假设你已经安装了它，但是如果你不这样做，请考虑按照上面链接中的说明进行操作。要开始，我建议获取节点版本管理器。

安装完毕后，继续安装当前稳定版本的Node.js.

$ nvm install stable

我们将使用 Webpack，这是React项目的热门选择。下面我会详细说明我们为什么使用它。目前，让我们使用以下命令安装它和它的dev服务器。

此外，我们将在全球范围内安装它，以便我们轻松访问其命令行工具。

现在让我们创建我们的项目！

并在此初始化一个新项目：

输入启动项目所需的数据，然后添加React依赖关系：

我们现在需要配置Webpack。在项目的根文件夹中，创建一个名为webpack.config.js的文件并将其设置为以下内容：

module.exports = {

entry: {

app: ['./app/main.js']

output: {

path: './app',

filename: 'bundle.js'

}

};

这将配置Webpack从app / main.js开始构建我们的客户端文件。Webpack将抓取我们需要的所有依赖关系并将其编译到一个文件中。这个文件是app / bundle.js，我们将把它包含在我们的HTML中。

那里！这就是我们设置项目所需的全部内容，并且我们准备开始为它编写一些代码。不像设置Rails项目那么容易，但也不是太糟糕。

Webpack是一个模块加载器。与大多数其他语言不同，JavaScript不包含其中一种。这导致了许多旨在解决这个问题的独立项目。Webpack类似于像Browserify 或RequireJS这样的库，但它实际上可以做更多。它最终取代了你在Gulp或Grunt中所做的一些好事 - 主要用于编写构建任务的流行工具。有了它，我们可以使用AMD，CommonJS甚至ES2015风格的模块。为了展示他们之间的差异：

AMD

require(['react'], function (React) {});

CommonJS

var React = require('react');

ES2015

import React from 'react';

在我们的代码中，我们使用CommonJS风格，最初由Node.js推广。

实现Hello World

在我们的项目中，我们来创建应用程序/文件夹。这将是我们编写代码的地方。

$ mkdir app

现在在app / index.html添加一个文件。让我们把下面的代码放在里面：

<!doctype html>

Hello World

在这里你可以看到上面提到的bundle.js文件。我们还有一个id为react-mount的元素，我们将使用它作为应用的根。这个div内的任何内容都由React管理。因此，不要修改组件外的任何后代元素！

我们将添加的最终文件是app / main.js，它将包含我们的HelloWorld React组件。

var React = require('react');

var ReactDOM = require('react-dom');

var HelloWorld = React.createClass({ render: function () {

return React.createElement('div', null, 'Hello World');

}});

ReactDOM.render(React.createElement(HelloWorld), document.querySelector('#react-mount'));

这里我们使用Webpack提供的CommonJS模块加载样式来引入React。我们使用名为HelloWorld的React.createClass定义一个新组件。它有一个渲染功能，在它里面，我们创建了一个没有属性的新div，并在其中包含文本“Hello World”。它看起来像这样（React添加一个属性来帮助维护对节点的引用，但对于我们的目的来说忽略它是安全的）：

<div>Hello World</div>

React.createElement的第一个参数可以是任何HTML元素（div，span，header，footer等）的字符串。第二个参数是这个元素的一个属性对象。例如，如果我们想要创建一个链接到我工作的地方，那么我们会做以下事情，粉碎箱子。

React.createElement('a', { href: 'http://smashingboxes.com' }, 'Smashing Boxes');

//<a href="http://smashingboxes.com">Smashing Boxes</a>

值得注意的是，除了两种特殊情况外，您可以使用任何常规的HTML属性：for和class。这些是JavaScript中的保留字，因此React作者选择提供htmlFor和className作为这些属性的关键字。

第三个参数和它之后的所有参数都是我们正在创建的元素的子元素。这些可以是使用React.createElement或字符串创建的其他元素。如果我们将一些标记从Bootstrap例子转换为使用React元素，请看看它可能是什么样子。

React.createElement('div', { className: 'form-group' },

React.createElement('label', { htmlFor: 'exampleInputEmail1' }, 'Email address'), React.createElement('input', { type: 'email', className: 'form-control', id: 'exampleInputEmail1', placeholder: 'Email' }));

<div class="form-group">// <label for="exampleInputEmail1">Email address</label>

// <input id="exampleInputEmail1" class="form-control" type="email" placeholder="Email" />

//</div>

渲染是我们遇到的第一个组件生命周期方法。每个组件都必须有一个组件，并且这是组件唯一需要的生命周期方法。React调用它来创建虚拟DOM元素，然后将结果添加到页面中。

在文件的最后一行是我们使用id react-mount将此组件呈现给元素的位置。注意我们再次使用React.createElement。这次我们不使用字符串，而是使用我们上面定义的类。

我们在React中完成了Hello World！非常简单，没有其他要求。使用以下命令启动服务器：

$ webpack-dev-server --content-base app/

并在您最喜爱的浏览器中打开http：// localhost：8080 /。

做完这些之后，您现在知道如何引导React项目并创建简单的组件。你可以在这里找到完整的代码。

在本系列的下一部分，我们将讨论组件生命周期的更多部分，以及在构建小型应用程序时如何创建更复杂的组件。这些高级组件将接受用户输入并保持状态。

我们也会将该项目升级为使用ES2015。许多人开始使用它的新项目，所以我们也会采用它。我们还会对构建系统进行其他升级，这将有助于保持我们的工作流程的顺畅。

最后，我们会将其转换为使用JSX。JSX是允许在代码中使用XML的JavaScript版本。下一次，我们会看到它的行动，我认为你会同意它使代码更具可读性。