React入门教程-草根SEO博客

ReactJS简介

ReactJS是用于构建UI的javascript库之一，对于Web和便携式应用程序的视图层同样有价值。ReactJS允许我们制作可重用的UI部件。

ReactJS是什么？

React是在Facebook的React库中开发的UI库，用于促进交互式和可重用UI组件的创建。ReactJS不仅在客户端执行，而且还可以使用节点呈现服务器端，也可以一起工作。

它同样利用称为虚拟DOM的想法，其基于状态变化选择性地呈现节点的子树。它可以最小化DOM操作，以使您的组件保持最新。

ReactJS还有一个名为Virtual DOM的有价值的想法，它根据状态变化专门呈现节点的子树。它可以进行最少量的DOM操作，以使您的组件保持最新。

在开始开发ReactJS之前，请设置或准备您的环境。

设置页面示例：

要设置页面，您需要包含js列表，例如：react.js，react-dom.js和JSXTransformer.js，然后在类型设置为“text / jsx”的脚本节点中编写组件。

//基本页面设置代码<！DOCTYPE html><HTML> <HEAD>   <a href="http://react.js"> http：//react.js </a>   <a href="http://react-dom.js"> http：//react-dom.js </a>   <a href="http://JSXTransformer.js"> http：//JSXTransformer.js </a> </ HEAD> <BODY>   <div id =“mount-point”> </ div>     //在这里反应代码  </ BODY></ HTML>

ReactJS – JSX：

通常，我们使用常规javascript，但如果您使用的是ReactJS，则ReactJS使用JSX进行模板化而不是Javascript。使用JSX模板语法不是必须的，但它有一些好处。

=> JSX执行速度更快，因为它在将代码编译为JavaScript时执行优化。

=> JSX也是类型安全的，并且在编译代码期间可以捕获大多数错误。

=>如果您熟悉HTML，JSX可以更轻松，更快速地编写模板。

/** @jsx React.DOM */React.render( React.createElement('h2', null, 'Hello World!'), document.getElementById('myDiv'));

ReactJS – 组件：

组件是React的完整自我。

// Create a component named NotificationComponentvar NotificationComponent = React.createClass({ render: function() {   return (     <div>{this.props.notification}</div>   ); }});// Render an instance of NotificationComponent into document.bodyReactDOM.render( <NotificationComponent notification="Hello Welcome!" />, document.body);

使用React.createClass创建一个组件类。组件有一个先决条件。他们必须实现render，这是一个为组件提供建议的函数。

在上面的示例中，您可以指定为什么我们需要围绕return语句的括号，因为javascript的自动插入分号并且没有括号javascript会忽略特定行和输出返回而没有值。JSX语法返回同一行，然后不需要括号。

ReactJS – 活动：

事件作为组件的属性连接，可以触发方法。

事件清单：剪贴板事件作文活动键盘事件焦点事件表格活动鼠标事件选择事件触摸事件UI事件轮子事件媒体活动图像事件动画事件过渡事件

请在下面找到计数增量的示例。

/** Example @jsx React.DOM */var CounterValue = React.createClass({ incrementCount: function(){   this.setState({     count: this.state.count + 1   }); }, getInitialState: function(){    return {      count: 0    } }, render: function(){   return (     <div class="my-component">       <h1>Count: {this.state.count}</h1>       <button type="button">Increment</button>     </div>   ); }});ReactDOM.render(<CounterValue/>, document.getElementById('point-value'));

<div id="point-value"></div>

以上是ReactJS的基础教程，希望您喜欢阅读本教程。

相关文章推荐