React 是一个流行的 JavaScript 库,用于构建用户界面。它提供了一种简洁而强大的方式来创建交互式 UI,同时也支持组件化开发,使得代码更易于维护和扩展。
本文和大家一起从头开始学习 React,从 JSX 到组件化开发,逐步深入了解 React 的核心概念和常用技巧。
创建React
-
安装 Node.js : 如果你还没有安装 Node.js,你需要先从官方网站 nodejs.org/ 下载并安装。Node.js 是运行 JavaScript 代码的环境,也是 React 应用程序的必备组件。
-
创建新的 React 应用程序 : 一旦安装了 Node.js,你就可以使用
create-react-app
命令来创建一个新的 React 应用程序。打开终端(命令行界面)并执行以下命令:luanpx create-react-app my-app
这将在名为
my-app
的新目录中创建一个新的 React 应用程序。你可以将my-app
替换为你想要的任何应用程序名称。 -
进入应用程序目录: 进入你的新创建的应用程序目录:
bashcd my-app
-
启动开发服务器: 在应用程序目录中运行以下命令,启动开发服务器:
sqlnpm start
这将启动一个开发服务器,并在默认的浏览器中打开你的新应用程序。你将能够在开发过程中实时查看应用程序的变化。
JSX
JSX 是 React 的一种语法扩展,它允许我们在 JavaScript 中编写类似 HTML 的代码。
在 JSX 中,你可以使用大括号 {}
来嵌入 JavaScript 表达式,实现动态渲染和逻辑控制。
JSX 使用
- 引号传递字符串:可以直接在 JSX 中传递字符串,用双引号或单引号括起来。
ini
const element = <h1>Hello, React!</h1>;
- 使用 JavaScript 变量:可以在 JSX 中使用 JavaScript 变量。
以下是一个示例,演示如何在组件中使用 JavaScript 变量:
javascript
import React from 'react';
function App() {
const greeting = 'hello React'; // 定义一个 JavaScript 变量 greeting
return (
<div className="app">
<h2>{greeting}</h2> {/* 在 JSX 表达式中使用 greeting 变量 */}
</div>
);
}
export default App;
在这个示例中,我定义了一个名为 greeting
的 JavaScript 变量,它包含了一个字符串 "hello React"
。然后,我在 JSX 表达式中使用了这个变量,通过大括号 {}
将其包裹起来,以输出变量的值。这样,在渲染组件时,<h2>
标签中就会显示 "hello React"
。
- 函数调用和方法调用:可以在 JSX 中调用函数和对象的方法。
javascript
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: '张',
lastName: '伟',
};
const element = <h1>Hello, {formatName(user)}!</h1>;
- 使用 JavaScript 对象 :可以在 JSX 中使用 JavaScript 对象,但需要用
{}
包裹起来。
javascript
const user = {
firstName: 'John',
lastName: 'Doe',
};
const element = (
<div>
<h1>Hello, {user.firstName}!</h1>
<h2>Your last name is {user.lastName}.</h2>
</div>
);
列表渲染
在 React 中,可以使用 map
方法来渲染列表。在渲染列表时,需要确保给每个子元素设置一个唯一的 key
属性,以帮助 React 识别和管理列表中的每个元素。
javascript
import React from 'react';
const songs = [
{ id: 1, name: "庐州月" },
{ id: 2, name: "青花瓷" },
{ id: 3, name: "等你下课" },
];
function App() {
return (
<div className="app">
<h2>hello React</h2>
<ul>
{songs.map((item) => {
return <li key={item.id}>{item.name}</li>;
})}
</ul>
</div>
);
}
export default App;
这里遍历为什么不用 forEach
用map
呢?
在 React 中,通常使用 map
而不是 forEach
来遍历数组并渲染列表的原因是因为 map
方法有一个重要的特性:它会返回一个新的数组,其中包含了根据原始数组每个元素进行操作后的结果。
相比之下,forEach
方法只是用于遍历数组,它不会返回任何新的数组 ,也就是说它不会生成任何 JSX 元素。在 React 组件中,我们需要将数组的每个元素映射为一个或多个 JSX 元素,并将它们组合成一个列表。而 map
方法正是用于这个目的。
另外,map
方法可以更加简洁地编写代码,因为它可以直接返回 JSX 表达式,而不需要在外部声明一个空数组然后在内部使用 push
方法来添加元素。
条件渲染
在 JSX 中,我们不能直接在标签内使用传统的 JavaScript if
语句,因为 JSX 是 JavaScript 的一种扩展语法,而不是完全独立的模板语言。
但是可以使用逻辑与运算符 &&
和三元表达式来实现条件渲染。
- 逻辑与运算符
&&
:当条件为真时,渲染某个元素。
javascript
function App() {
const flag = true;
return (
<div className="app">
{flag && <h2>hello React</h2>}
</div>
);
}
export default App;
条件渲染部分使用了 flag && <h2>hello React</h2>
的形式,如果 flag
为 true
,则渲染 "hello React" 的 <h2>
元素,否则不渲染任何内容。
- 三元表达式适用于 1 对多:根据条件渲染不同的元素。
javascript
function App() {
const flag = true;
return (
<div className="app">
<h2>{flag ? "react真好用" : "react不好用"}</h2>
</div>
);
}
export default App;
它根据变量 flag
的值来动态渲染标题内容,如果 flag
为 true
,则显示 "react真好用",否则显示 "react不好用"。
样式添加
在 React 中,有几种常见的方式可以为组件添加样式:
-
内联样式 :可以直接在 JSX 元素的
style
属性中以对象的形式添加样式。这种方式适用于需要动态计算样式的情况,但不太适合复杂的样式结构。javascriptfunction MyComponent() { const style = { color: 'red' }; return <div style={style}>Hello World</div>; }
也可以写成这种形式:
javascript
function MyComponent() {
return <div style={{ color: 'red'}}>Hello World</div>;
}
-
CSS 文件 :可以在 React 项目中创建
.css
文件,并通过import
引入到组件中。然后,将 CSS 类名应用到 JSX 元素的className
属性中。javascript// MyComponent.css .myComponent { color: red; background-color: blue; } // MyComponent.js import React from 'react'; import './MyComponent.css'; function MyComponent() { return <div className="myComponent">Hello World</div>; }
事件绑定
onClick
是 React 中用于处理点击事件的一种事件属性。它是一个内置的 JSX 属性,用于将点击事件处理函数绑定到特定的 JSX 元素上。
当用户点击绑定了 onClick
事件的元素时,React 将调用指定的事件处理函数。这个函数可以执行任何逻辑,例如更新组件的状态、发送网络请求、处理用户输入等操作。
下面是一个简单的示例,演示了如何在 React 中使用 onClick
:
javascript
import React from 'react';
function MyComponent() {
// 点击事件处理函数
function handleClick() {
console.log('按钮被点击了');
}
return (
<button onClick={handleClick}>Click me</button>
);
}
export default MyComponent;
在这个例子中,当用户点击按钮时,handleClick
函数会在控制台中输出消息 按钮被点击了
。
React组件
React 组件是构建用户界面的独立、可重用的代码单元。它们将 UI 分成独立的部分,每个部分负责一部分 UI 的呈现和交互。组件可以是函数组件或类组件。
函数组件
React 中的函数组件名称应以大写字母开头。这是为了区分 React 组件和普通的 HTML 元素或者其他 DOM 元素。
javascript
function HelloReact() {
return <div>这是一个函数组件</div>
}
function App() {
return (
<div className="app">
<HelloReact></HelloReact> // 或者写成 <HelloReact />
</div>
);
}
export default App;
类组件
React 类组件是基于 ES6 类语法创建的组件,它们是 React 中最早引入的组件类型之一。类组件通过继承 React.Component
类来定义组件。
以下是一个简单的类组件示例:
javascript
import React, { Component } from "react";
class HelloReact extends Component {
render() {
return <div>这是一个类组件</div>
}
}
function App() {
return (
<div className="app">
<HelloReact></HelloReact>
</div>
);
}
export default App;
这段代码与之前提供的代码相比,主要区别在于 HelloReact
组件是一个类组件而不是函数组件。类组件需要继承自 React.Component
,并实现 render
方法来返回组件的 UI 结构。函数组件则是一个简单的函数,直接返回 UI 结构即可。
总结
通过学习以上内容,我们已经掌握了 React 的基础知识,包括 JSX 的使用、列表和条件渲染、事件绑定以及组件的创建。
Ps : 因为这是初步认识React,文章内容的代码相对来说比较简单,方便理解,后面还会继续更新React系列
。