React 是一个用于构建用户界面的 JavaScript 库，它通过组件化思想和虚拟 DOM 的概念，使得开发人员能够高效地构建高性能的用户界面。对于初学者来说，通过一些简单的实例来学习和实践是快速入门的有效途径。以下，我们将通过5个简单的React应用实例，帮助大家逐步掌握React的基础知识和技能。
1. Hello World
简介
Hello World 是最简单的 React 应用，用于展示 React 的基本用法。
实例代码
import React from ‘react’;

function HelloWorld() {
return

Hello, World!

;
}

export default HelloWorld;
运行方法
在项目中创建一个名为
HelloWorld.js
的文件。
将上述代码复制到该文件中。
在其他组件中导入并使用
HelloWorld
组件。
2. 计数器
简介
计数器是一个简单的应用，用于演示 React 的状态管理。
实例代码
import React, { useState } from ‘react’;

function Counter() {
const [count, setCount] = useState(0);

return (

);
}

export default Counter;
运行方法
在项目中创建一个名为
Counter.js
的文件。
将上述代码复制到该文件中。
在其他组件中导入并使用
Counter
组件。
3. Todo List
简介
Todo List 是一个常见的 React 应用，用于演示组件的嵌套和状态管理。
实例代码
import React, { useState } from ‘react’;

function TodoList() {
const [todos, setTodos] = useState([]);

const addTodo = (text) => {
setTodos([…todos, { id: todos.length, text }]);
};

const removeTodo = (id) => {
setTodos(todos.filter((todo) => todo.id !== id));
};

return (

);
}

export default TodoList;
运行方法
在项目中创建一个名为
TodoList.js
的文件。
将上述代码复制到该文件中。
在其他组件中导入并使用
TodoList
组件。
4. 表单验证
简介
表单验证是一个简单的应用，用于演示 React 的表单处理。
实例代码
import React, { useState } from ‘react’;

function FormValidation() {
const [formData, setFormData] = useState({ name: ”, email: ” });
const [errors, setErrors] = useState({ name: ”, email: ” });

const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ …formData, [name]: value });
setErrors({ …errors, [name]: ” });
};

const validate = () => {
let isValid = true;
if (!formData.name) {
setErrors({ …errors, name: ‘Name is required’ });
isValid = false;
}
if (!formData.email) {
setErrors({ …errors, email: ‘Email is required’ });
isValid = false;
}
return isValid;
};

const handleSubmit = (e) => {
e.preventDefault();
if (validate()) {
console.log(‘Form submitted:’, formData);
}
};

return (

);
}

export default FormValidation;
运行方法
在项目中创建一个名为
FormValidation.js
的文件。
将上述代码复制到该文件中。
在其他组件中导入并使用
FormValidation
组件。
5. 条件渲染
简介
条件渲染是一个简单的应用，用于演示 React 的条件逻辑。
实例代码
import React from ‘react’;

function ConditionalRendering() {
const [isVisible, setIsVisible] = useState(true);

const toggleVisibility = () => {
setIsVisible(!isVisible);
};

return (

);
}

export default ConditionalRendering;
运行方法
在项目中创建一个名为
ConditionalRendering.js
的文件。
将上述代码复制到该文件中。
在其他组件中导入并使用
ConditionalRendering
组件。
通过以上5个简单的React应用实例，相信大家已经对React的基本用法有了初步的了解。接下来，可以尝试阅读更多的官方文档和社区资源，进一步深入学习和实践React。