React JS Tutorial

React是一个用于设计用户界面的库,该用户界面最初是由Facebook构建和开源的。随着React的发布,Facebook绝对改变了我们对前端UI开发的假设方式。这种基于组件的技术的主要优点是易于学习,并且视图(MVC)只是属性和状态的函数。本教程示例和解决方案系列适用于正在开发或对构建用户界面感兴趣的任何人,您将学习如何使用React JS构建应用程序。

React Bootstrap数据表示例

此示例在react bootstrap数据表中显示REST Api数据。它具有排序,过滤器,分页,自定义标签,表述和原始数据分离,自定义列排序和列过滤器功能的主要功能。

如何创建功能组件?

该组件将仅在H1标签中显示一条消息。创建一个名为components的新文件夹,并在该文件夹内创建一个新文件Vehicles.js,以使用Pascal Case命名文件。

使用ES6箭头语法创建功能组件

该示例是一段非常普通的代码,将有助于创建React组件并使用胖箭头语法。

React和Hello World示例入门

在JSX中嵌入JavaScript表达式

选中复选框为选中还是未选中

创建一个新文件,并将其命名为index.html。添加下面给出的代码:

在React JS中显示JSON数据

选中复选框的计数

在React JSX内部循环

这是在React JSX中使用Loop的示例

检查选中或单击了哪个单选按钮

如何使用React-Bootstrap组件?

使用Material UI主题反应静态网站

在本教程中,您将学习Material UI与React JS的集成以及如何获取静态JSON数据以进行显示。

如何使用三元运算符在表达式内部执行计算?

表达式可用于任何计算,下面的示例使用三元运算符确定长度和宽度是否相等。基于该标识,它是正方形或矩形,并计算其面积。

Glyphicon评级之星组件

如何在React无状态组件中使用箭头功能?

可以使用胖箭头语法定义无状态组件,该语法不使用return关键字。

如何在JSX表达式中使用函数?

可以通过表达式定义和使用功能,在这种情况下,功能的输出由组件获取以产生内容。

React JS Blog CRUD操作

在本教程中,我们将研究如何在React JS中使用Add,Edit,Delete和Listing Posts来实现简单的博客。例如,我们将使用jsonplaceholder.com中的示例JSON数据。

使用此关键字访问组件的属性和方法

this关键字指的是组件实例,是指定组件定义的属性和方法所必需的。在这里,维度是指在构造函数中创建的state属性。

如何创建简单的React Router来浏览多个页面?

在此示例中,我们创建了多页网站,因此当用户在地址栏中输入URL且浏览器导航到相应页面时。当用户单击链接时,它也导航到适当的应用程序视图。

如何将参数传递给JSX表达式内使用的方法?

下例中的表达式使用len和bre值作为参数调用shape()和area()方法。

如何使用表达式设置属性值?

格式化HTML元素和子组件,可以使用表达式来设置props的值。 getClassName方法的结果用于设置div元素的className属性。

如何从头开始构建和使用自定义React组件?

在本教程中,我们将从头开始学习如何构建和使用自定义react组件。

如何使用JSX中的表达式处理事件?

App组件向内容返回一个按钮,并使用onClick道具告诉React在触发click事件时如何响应。 button元素是使用onClick道具配置的,该道具告诉React响应click事件来调用calculate方法。

将Bootstrap与ReactJS应用程序集成

Bootstrap是最受欢迎的开源CSS框架,最初是由Twitter开发的。像Bootstrap这样的CSS框架简化了在整个应用程序中创建一致主题的过程。引导程序样式是通过className属性应用的,它是class属性的对应物,用于对相关元素进行分组。 Bootstrap提供了允许将样式上下文应用于各种HTML元素的类。

如何在React JS中呈现原始HTML内容?

组件功能内的return关键字用于呈现结果。当组件呈现字符串值时,它将作为文本内容包含在父元素中。

如何在React JS中使用createElement?

组件函数从React.createElement方法返回结果,React可以使用该HTML元素在域对象模型(DOM)中添加内容。

具有Material UI组件的React JS示例

这是在React JS中使用Material Components的示例

如何在React JS的另一个组件中渲染一个组件?

在一个组件呈现的React内容中也可以包含其他组件,这个功能使我们能够创建更复杂的应用程序。

如何在React JS中将属性从父组件传递到子组件?

React支持props——属性的缩写,它允许父组件将数据传递给它的子组件,这些子组件可用于处理和呈现其内容。通过将属性(类似于数据属性)添加到应用组件的自定义HTML元素来定义道具。属性的名称是prop的名称,值可以是静态整数,字符串,浮点数或表达式。

如何在ReactJS中将数据从子组件传递到其父组件?

道具可用于将静态值或动态表达式的结果传递给父组件。

React JS onClick事件处理程序

HTML元素触发事件,以发出重要的更改,例如用户单击按钮时。在React中处理事件类似于使用域对象模型API。 DOM API onclick属性在React应用程序中表示为onClick,并处理单击事件,该事件在用户单击元素时触发。但是,用于处理事件属性的表达式是一个函数,当触发指定事件时将调用该函数。

点击一下React JS更新Div内容

方法的名称后跟等号,打开和关闭括号,粗箭头符号,然后是消息正文。当您单击按钮元素时,updateContent方法将为此提供一个值,该值将更新div内容。

ReactJs中的onMouseDown和onMouseUp事件处理

当用户按下鼠标按钮时,将触发mousedown事件,而当用户释放鼠标时,将触发mouseup事件。 handleEvent方法使用type属性来确定要处理的事件,并相应地更新消息值。

在ReactJs中使用表单,输入和onChange事件

这是一个示例,以显示带有表单元素的React工作模型,使用状态属性设置其值,并使用事件处理程序来响应用户交互。

React JS单击获取标签名称和内部文本

当单击button元素时,将触发click事件,可以使用tagName属性的值来查找HTML元素,该事件的源,可以使用innerText属性来查找用该HTML元素编写的文本。