在 React 中在 UI 上显示列表Map 是 JavaScript 函数，它将为提供的数组返回一个新数组，如下所示 -const originalNumbers = [ 2, 4, 6, 8, 10]; const squaredNumbers = originalNumbers.map( (number)=> number * number); console.log(“Squared Numbers==”squaredNumbers);在 React 中构建列表类似于使用 map 函数。我们不仅返回平方数，还会返回带有平方值的列表元素。const originalNumbers = [ 2, 4, 6, 8, 10]; const squaredNumbersList= originalNumbers.map((number) =>    {number*number} );使用 ui 标签在屏幕上渲染 -ReactDOM.render(    { squaredNumbersList },    document.getElementById('root') );当 ... 阅读更多

可以使用条件语句渲染和移除特定组件。条件处理在 JavaScript 和 React.js 中的工作方式类似示例function DisplayUserMessage( props ){    const user = props.user.type;    if(type==’Player’){       return Player ;    }    If( type==’Admin’){       Return Admin ;    } }在以上示例中使用了 if 语句。用户的类型决定了要返回哪个消息。组件的本地状态对于决定条件渲染很有用，因为状态可以在组件内部灵活地更改。使用逻辑 && 运算符进行内联 iffunction MessageSizeChecker(props) {    const message = props.message;    return (       ... 阅读更多

编写事件时存在一些语法差异，但其处理方式类似于 DOM 元素事件处理。事件处理程序的名称以驼峰式命名法编写。示例简单的 html 中的事件 -    添加用户在 React 中使用 jsx 的事件：    添加用户其中一个区别是我们不会编写 return false 来阻止 React 中的默认行为。相反，我们专门编写 event.preventDefault()示例在简单的 Html 中 -    添加用户在 React 中将写成 -function addUser(event){    event.preventDefault();    console.log(‘Add user event clicked’); }    添加用户此处传递给 ... 阅读更多

组件的状态和生命周期对于使动态应用程序正常工作非常强大。状态状态通常用于有状态组件。随着 Hook 的引入，我们现在也可以在函数组件中添加状态。Hook 的名称是 useState。状态是一个 JavaScript 对象，可以通过用户操作更改，并为 UI 添加动态性。使用状态更新来自服务器的数据是一种常见的用例。状态和 props 之间的区别 -正如我们所知，props 是一个属性 JavaScript 对象，它保存作为属性传递给组件的信息。Props 值是 ... 阅读更多

React 应用程序由组件组成。组件通常使用 React 元素。组件可以是独立的、可重用的部分。有两种类型的组件 -无状态组件（基本上是 JavaScript 函数）有状态组件（使用 JavaScript 类特性）这两种组件类型都接收一个属性对象，通常称为 props。无状态组件在函数中有一个 return 语句，而有状态组件有一个 render 方法，该方法返回 React 元素。在页面上显示的简单 React 元素是 -const message=Hello; ReactDOM.render( message, document.getElementById(‘root’) );它在屏幕上显示 Hello 消息。创建函数组件 -function Message(props){    return (       ... 阅读更多

React 应用程序最小的构建块是元素。元素的示例是 -const message = Welcome, Steve;React DOM 使用转换后的 React 元素更新实际的 DOM。React 组件由元素组成。在 DOM 上渲染元素我们将在主 html 文件中有一个父 div 元素。此 div 可以称为根。ReactDOM 管理应用程序 div 内的所有内容。如果需要，我们可以在应用程序中添加多个此类隔离的 div。要渲染元素，它将传递给 ReactDOM 渲染方法 -const message = Welcome, Steve; ReactDOM.render(message, document.getElementById('app'));这将 ... 阅读更多

JSX 就像一种具有 JavaScript 能力的模板语言。它有助于创建 React 元素。它是 JavaScript 的扩展，用于包含 UI 元素。示例let message = Hello World ;h1 标签是已知的 html 标签，但使用 jsx，我们创建了一个包含 h1 标签和 hello world 消息的变量。JSX 的用处尽管使用 jsx 创建 React 元素不是强制性的。但它在视觉上更具吸引力，并有助于以简单的方式理解代码。React 接受将 UI 逻辑和渲染逻辑保持在一起的概念。我们可以构建不同的松散耦合组件以实现关注点分离表达式 ... 阅读更多

create-react-app 是一个命令，用于创建具有默认配置的 React.js 项目。Create-react-app 将帮助运行 React 应用程序。命令将在 npm 或 yarn 上执行如果计算机上安装了 npm 和 node.js，请使用以下命令全局安装 create-react-app -npm install –g create-react-app项目的创建 - 要创建项目，一旦执行了以上命令，请运行以下命令 -npx create-react-app hello-world-examplenpx 随 npm 5.2+ 版本一起提供，可以使用 npm –version 在终端上检查 npm 版本如果 npm 版本为 5.2+，则可以使用以下命令直接创建 react.js 项目 -npx create-react-app hello-world-example如果 npm 版本为 6+，npm init react-app ... 阅读更多