React入门

最新推荐文章于 2024-09-13 15:06:03 发布

cunjie3951

最新推荐文章于 2024-09-13 15:06:03 发布

阅读量138

点赞数

文章标签： vue python javascript java react ViewUI

MVC是Web开发中非常流行的范例，并且已经存在了相当长的时间。 React框架是Model-View-Controller三位一体的强大组成部分，因为它仅专注于View。 React用JavaScript编写，由Facebook和Instagram开发团队创建。

由于React框架构造视图层代码的方式，React在整个Web上都被用来创建易于维护的快速Web应用程序。

反应能做什么？

建立与框架无关的快速，响应Swift的同构Web应用程序。 React对它所驻留的技术堆栈不做任何假设。
虚拟DOM操作为您提供了一个简单的编程模型，可以使用React Native在浏览器，服务器或桌面上呈现该模型。
使用React的数据流绑定被设计为单向反应式数据流。这减少了样板要求，并且比传统方法更易于使用。

你好，世界

为了让我们开始，这是一个来自官方示例的简单React 示例：

var HelloMessage = React.createClass({
  render: function() {
    return
   
   
    
    Hello {this.props.name}
   
   ;
  }
});

React.render(
  
   
   ,
  document.getElementById('container')
);

本示例将“ Hello John”渲染到<div>容器中。请注意第3行和第8行使用的类似XML / HTML的语法。这称为JSX 。

什么是JSX？

JSX是一种类似于XML / HTML的语法，用于从JavaScript代码中呈现HTML。 React将JSX转换为浏览器的本机JavaScript，并通过提供的工具可以将现有网站HTML代码转换为JSX！

JSX使代码混合变得容易，就像在JavaScript中编写本机HTML一样。与Node结合使用，可以实现非常一致的工作流程。

不需要使用React即可使用JSX（您可以只使用普通的JS），但是它是一个非常强大的工具，可以轻松地使用定义树结构并分配属性，因此我强烈建议使用它。

要在React中呈现HTML标签，只需将小写标签名称与某些JSX一起使用，如下所示：

//className is used in JSX for class attribute
var fooDiv =
   
   ;
// Render where div#example is our placeholder for insertion
ReactDOM.render(fooDiv, document.getElementById('example'));

安装React

有几种使用React的方法。官方推荐的方法是从npm或Facebook CDN，但是您还可以从git克隆并构建自己的方法。您也可以使用入门套件或使用Yeoman的脚手架发电机节省时间。我们将介绍所有这些方法，以便您全面了解。

使用Facebook CDN

对于最快的方法，只需包括来自fb.me CDN的React和React Dom库，如下所示：

从NPM安装

的阵营手册推荐使用与CommonJS的模块系统等反应browserify或的WebPack 。

React手册还建议使用react和react-dom npm软件包。要将它们安装在您的系统上，请在项目目录内的bash终端提示符下运行以下命令，或创建一个新目录并首先将其安装到cd 。

$ npm install --save react react-dom
$ browserify -t babelify main.js -o bundle.js

现在您将能够在node_modules目录中看到React安装。

从Git源码安装

依存关系

您需要拥有Node V4.0.0 +和npm v2.0.0 +。您可以使用node version检查节点版本，使用npm version检查npm version

通过NVM更新节点

我建议使用nvm-节点版本管理器来更新并选择您的节点版本。只需运行以下命令即可轻松获取nvm：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

该脚本将nvm存储库克隆到~/.nvm并将源代码行添加到您的配置文件（ ~/.bash_profile ， ~/.zshrc或~/.profile ）。

如果您希望手动安装nvm ，则可以通过git使用以下命令进行安装：

git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

要使用此方法激活nvm，您需要使用以下命令从shell中获取它：

. ~/.nvm/nvm.sh

注意：将此行分别添加到您的~/.bashrc ， ~/.profile或~/.zshrc文件中，以使其在登录时自动生成。

使用NVM

现在安装了nvm，我们可以获取所需的任何版本的节点，并可以通过node list和node ls-remote来检查已安装版本的node list 。我们需要高于4.0.0的版本才能使用React。

安装最新版本，并使用以下命令将其设置为默认版本：

$ nvm install 4.2.1
$ nvm alias default 4.2.1
default -> 4.2.1 (-> v4.2.1)
$ nvm use default
Now using node v4.2.1 (npm v2.14.7)

节点已更新，npm已包含在交易中。现在您可以进行安装了。

从Git源码构建React

克隆使用Git仓库到指定的目录react你的系统上：

git clone https://github.com/facebook/react.git

一旦克隆了仓库，就可以使用grunt构建React了：

# grunt-cli is needed by grunt; you might have this installed already but lets make sure with the following
$ sudo npm install -g grunt-cli
$ npm install
$ grunt build

此时，已经在build/目录中填充了使用React所需的一切。看看/examples目录，看一些基本的例子在起作用！

使用入门套件

首先下载入门工具包。

解压缩该zip文件，并在根目录中创建一个helloworld.html ，添加以下内容：

<!DOCTYPE html>
   
   
    Hello React!

在此示例中，React使用Babel通过<script type="text/babel">将JSX转换为纯JavaScript。

使用单独JavaScript文件

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

ReactDOM.render(Hello, world!,
  document.getElementById('example')
);

现在，您需要做的就是在HTML中引用它，因此打开helloworld.html并使用具有text/babel type属性的script标签加载刚刚创建的script ，如下所示：

刷新页面，您将看到babel正在渲染helloworld.js 。

注意：除非通过HTTP提供文件，否则某些浏览器（例如Chrome）将无法加载文件，因此请确保您使用的是本地服务器。我建议使用browsersync项目。

离线转型

您还可以使用命令行界面（CLI）通过babel命令行工具来转换JSX。这可以通过npm命令轻松获得：

$ sudo npm install --global babel

--global或-g标志将在全局安装babel软件包，以便可在任何地方使用。将Node用于多个项目和命令行工具是一个非常好的做法。

现在已经安装了babel，让我们翻译一下我们在上一步中创建的helloworld.js 。在解压入门工具包的根目录的命令提示符下，运行：

$ babel src --watch --out-dir build

现在，只要您进行更改，文件build/helloworld.js就会自动生成！如果您有兴趣，请阅读Babel CLI文档以获取更高级的知识。

现在，babel生成了build/helloworld.js ，其中仅包含简单JavaScript，现在可以更新HTML，而无需任何启用babel的脚本标签。

<!DOCTYPE html>
   
   
    Hello React!

回顾一下，使用babel，我们可以通过text/babel type属性将JSX直接加载到script标签中。这对于开发目的是很好的，但是对于生产而言，我们可以提供一个生成JavaScript文件，该文件可以缓存在用户的本地计算机上。

此副本的生成是在命令行上完成的，由于这是一项重复性任务，因此我强烈建议您使用--watch标志来使该过程自动化。或者，您可以更进一步，利用webpack和browsersync来完全自动化您的开发工作流程。为了以最简单的方式做到这一点，我们可以使用Yeoman生成器自动执行新项目的设置。

使用Yeoman脚手架安装

Yeoman是非常有用的工具，可以快速启动项目，并具有最佳的工作流程和工具配置。这样做的想法是让您在开发上花费的时间多于对项目工作区的配置，并最大程度地减少重复性的任务（请注意，RSI是编码人员停止编码的第一原因）。因此，作为最佳实践，使用工具节省时间并在日常生活中实施DRY（不要重复自己）将提高您的健康和效率，并让您花费更多时间进行实际代码而不是配置。

那里有许多脚手架，可以针对不同规模的项目提供多种口味。对于第一个示例，我们将使用Yeoman生成器的react-fullstack支架。您可以看到最终结果的演示。

注意：这是一个全栈配置，对于任何小型项目而言，这可能都是多余的。我选择此脚手架的原因是为了为您提供完整的设置环境，因此您可以看到入门工具包如何充实到更大的应用程序中。有一个页眉和页脚，您可以看到用户登录和注册功能的去向，尽管示例中尚未对它们进行编码。

用法

要使用yeoman，请先安装它，如果您没有yeoman所需的对应gulp ， bower和grunt-cli ，请按照以下方式安装它们：

$ sudo npm install -g yo bower grunt-cli gulp

现在使用以下命令安装React脚手架：

$ sudo npm install -g generator-react-fullstack

现在为您的项目创建一个目录并对其进行cd ：

$ mkdir react-project
$ cd react-project

最后，将yo命令与React-fullstack脚手架生成器一起使用，以在目录中创建您的react应用程序：

$ yo react-fullstack

Yeoman现在将创建所需的目录和文件；您将可以在命令行中查看有关此更新。

现在设置了脚手架，让我们构建项目：

$ npm start

默认情况下，我们在调试模式下启动，并去住，我们刚才添加的-- release标志，如npm run start -- release 。

现在，您将看到构建开始和webpack初始化。完成此操作后，您将看到webpack输出，其中告诉您有关内部版本和要访问的URL的详细信息。

通过输出末尾列出的URL访问您的应用程序，默认情况下使用浏览器访问http：// localhost：3000。要访问浏览器同步管理界面，请访问http：// localhost：3001。

注意：您可能需要打开服务器上用于开发端口的端口。对于使用ufw ubuntu / debian用户，请执行以下操作：

$ ufw allow 3001/tcp
$ ufw allow 3000/tcp

将您现有的网站转换为JSX

如果您只需要将HTML片段转换为JSX，Facebook会提供一个在线工具。

对于更大的需求， npm上有一个名为htmltojsx的工具。通过以下方式下载：

npm install htmltojsx

通过命令行使用它非常简单：

$  htmltojsx -c MyComponent existing_code.htm

由于htmltojsx是节点模块，因此您也可以直接在代码中使用它，例如：

var HTMLtoJSX = require('htmltojsx');
var converter = new HTMLtoJSX({
  createClass: true,
  outputClassName: 'HelloWorld'
});
var output = converter.convert('
   
   
    
    Hello world!
   
   ');

清单范例

让我们开始创建一个基本的任务清单，以便您了解React的工作方式。在开始之前，请配置您的IDE。我建议使用Atom。

在bash提示符下，通过apm安装用于React的linters：

apm install linter linter-eslint react
Installing linter to /Users/tom/.atom/packages ✓
Installing linter-eslint to /Users/tom/.atom/packages ✓
Installing react to /Users/tom/.atom/packages ✓

注意：最新版本的linter-eslint使我的MacBook Pro变得非常慢，因此我将其禁用。

完成后，我们可以继续在上一步与Yeoman制作的支架中创建基本列表，以向您展示数据流的有效示例。

确保服务器使用npm start ，现在让我们开始进行一些更改。

首先，在这个脚手架中提供了三个玉模板文件。我们将不会在示例中使用它们，因此首先要清除index.jade文件，因为它只是一个空文件。保存文件后，检查浏览器和终端输出。

更新立即显示，无需刷新。这是脚手架提供的webpack和browsersync配置生效。

接下来打开components目录并创建一个新目录：

$ cd components
$ mkdir UserList

现在，在UserList目录中，使用以下命令创建一个package.json文件：

{
  "name": "UserList",
  "version": "0.0.0",
  "private": true,
  "main": "./UserList.js"
}

同样，仍然在UserList目录中，创建UserList.js文件并添加以下内容：

//Import React
import React, { PropTypes, Component } from 'react';

//Create the UserList component
class UserList extends Component {

	//The main method render is called in all components for display
    render(){
      
      //Uncomment below to see the object inside the console
      //console.log(this.props.data);

      //Iterate the data provided here 
      var list = this.props.data.map(function(item) {
        return <li key={item.id}>{item.first}{item.last} </li>
      });

	  //Return the display
      return (

{list}

）; } // //让其余的应用导出默认用户列表可访问它；

现在结束，我们需要为此列表添加一些数据。我们将在components/ContentPage/ContentPage.js 。打开该文件，并将内容设置如下：

/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */

import React, { PropTypes, Component } from 'react';
import styles from './ContentPage.css';
import withStyles from '../../decorators/withStyles';
import UserList from '../UserList'; //Here we import the UserList component we created

@withStyles(styles)

class ContentPage extends Component {

  static propTypes = {
    path: PropTypes.string.isRequired,
    content: PropTypes.string.isRequired,
    title: PropTypes.string,
  };

  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired,
  };

  render() {
  
  	//Define some data for the list
    var listData = [
      {first:'Peter',last:'Tosh'},
      {first:'Robert',last:'Marley'},
      {first:'Bunny',last:'Wailer'},
    ];

    this.context.onSetTitle(this.props.title);

    return (
   
   
        
    
    
     
     
          {
            this.props.path === '/' ? null : 
     
     {this.props.title}
          }
          <div dangerouslySetInnerHTML={{__html: this.props.content || ''}} />
			
          //Use the UserList component as JSX
          <UserList data={listData} />

        
    
    
      
   
   
    );
  }

}

export default ContentPage;

现在，当我们保存时，Webpack将重新构建，并且browsersync将在您的浏览器中显示更改。看一下源代码，看看它是如何呈现的。

摘要

我们已经使用Yeoman脚手架生成器react-fullstack来启动基于入门工具包的React Web应用程序。有关文件和目录布局的进一步说明，请查看react入门工具包git repo中的自述文件。

在这里，我们编辑了index.jade文件，以便将其删除，然后开始创建我们自己的显示视图，并创建一个名为UserList的新组件。

在components/UserList/UserList.js内部，我们定义列表的呈现方式：

var list = this.props.data.map(function(item) {
        return <li key={item.id}>{item.first}{item.last} </li>
      });

在这里重要的是要注意，React要求所有迭代的项目在key属性下具有唯一的标识符。

为了显示列表，我们将其包含在ContentPage.js文件中，并import UserList from '.../UserList'; 并使用以下命令定义一些测试数据：

var listData = [
      {first:'Peter',last:'Tosh'},
      {first:'Robert',last:'Marley'},
      {first:'Bunny',last:'Wailer'},
    ];

在ContentPage.js内部，我们使用JSX <UserList data={listData} />调用UserList组件。

现在， UserList组件可以通过this.props.data访问data属性。

每当我们传递带有组件属性的值时，都可以通过this.props访问this.props 。您还可以在类中使用propTypes静态变量来定义必须提供的数据类型。

扩展组件与React.createClass语法

最后，需要注意的重要一点是，该示例使用了扩展组件。这对于语义上构造代码有很多好处。但是，您可能希望像其他许多示例一样，采用更简单的方法。

因此，您可以使用以下语法创建一个React类，而不是使用class ComponentName extends Component之前在本教程中看到的class ComponentName extends Component ：

var MyListItem = React.createClass({
  render: function() {
    return

{this.props.data.text}
; }}）; var MyNewComponent = React.createClass（{render：function（）{return（
- {this.props.results.map（function（result）{return <MyListItem key = {result.id} data = {result} />;}）}
）; }}）;
好了，这结束了我们对React的介绍。您现在应该对以下内容有很好的了解：
- 得到反应
- 如何在React中使用Babel
- 使用JSX
- 通过扩展方法创建组件
- 使用您的组件并传递数据
在接下来的部分中，我们将讨论如何进一步使用JSX，如何使用数据库作为持久数据源，以及React如何与其他流行的Web技术（例如PHP，Rails，Python和.NET）一起工作。

翻译自: https://code.tutsplus.com/articles/getting-started-with-react--cms-25031