React入门教程:创建你的第一个React应用

React 是由 Facebook 开发的用于构建用户界面的 JavaScript 库。它以其高效、灵活和组件化的特性受到开发者的广泛欢迎。如果你是前端开发新手,或是从其他框架转向 React,这篇文章将引导你创建一个简单的 React 应用,帮助你快速上手。

1. 环境准备

在开始之前,确保你的开发环境已经安装了以下工具:

  • Node.js 和 npm: React 依赖于 Node.js 环境,并且 npm 是 Node.js 的包管理工具。你可以从 Node.js 官方网站 下载并安装。
  • 代码编辑器: 推荐使用 VS Code,但你也可以选择自己喜欢的编辑器。

你可以通过以下命令检查是否已经安装了 Node.js 和 npm:

node -v
npm -v
2. 创建一个 React 项目

npm 版本 5.2.0 及以上内置的工具可以不用自行安装Create React App,否则需要
npm install -g create-react-app

我们将使用 Create React App 脚手架工具来快速生成一个 React 项目。这是官方推荐的方式,能够帮助你快速创建一个开发环境,并包括所有必要的工具链。

在终端中运行以下命令来创建一个新的 React 项目:

npx create-react-app my-first-react-app

这将会生成一个名为 my-first-react-app 的目录,并且这个目录中包含了一个完整的 React 项目结构。接着,进入到这个目录:

cd my-first-react-app

然后,通过以下命令启动开发服务器:

npm start

启动成功后,浏览器会自动打开并访问 http://localhost:3000,你将看到一个 React 的默认页面。

3. 了解项目结构

my-first-react-app 目录下,你会看到如下的项目结构:

  • node_modules/: 存放所有项目依赖的模块。
  • public/: 包含公共资源,如 HTML 文件和静态资源。
  • src/: 主要的开发目录,包含你的 React 组件和其他源代码文件。
  • package.json: 项目的配置文件,包含项目依赖、脚本等信息。

其中,src 目录是你开发的主要区域。默认情况下,src 目录下的 App.js 是主组件文件。

4. 创建你的第一个组件

接下来,我们将在 src 目录下创建一个简单的 React 组件,并将其展示在页面上。

首先,打开 src/App.js 文件,并将默认的内容替换为以下代码:

import React from 'react';
import './App.css';function App() {return (<div className="App"><header className="App-header"><h1>Welcome to My First React App!</h1><p>This is a simple React component.</p></header></div>);
}export default App;

在这个例子中,我们创建了一个名为 App 的函数组件。组件的返回值是一个 JSX 结构,描述了组件的 UI。JSX 是一种类似 HTML 的语法,用于描述 UI 结构,它最终会被编译成 JavaScript。

你可以通过编辑 h1 标签中的内容来修改页面显示的标题。

5. 了解组件和状态

React 组件可以是有状态的或者无状态的。状态是一个组件内的数据源,当状态发生变化时,React 会自动重新渲染组件,以反映最新的状态。

以下是一个简单的示例,我们将向 App 组件中添加一个按钮,点击按钮后改变组件的状态并更新页面显示的内容。

修改 App.js 文件:

import React, { useState } from 'react';
import './App.css';function App() {const [message, setMessage] = useState('This is a simple React component.');const handleClick = () => {setMessage('You just clicked the button!');};return (<div className="App"><header className="App-header"><h1>Welcome to My First React App!</h1><p>{message}</p><button onClick={handleClick}>Click Me!</button></header></div>);
}export default App;

在上面的代码中,我们使用了 React 的 useState 钩子来创建组件的状态。useState 返回一个数组,其中第一个值是状态变量,第二个值是更新状态的函数。当点击按钮时,handleClick 函数被调用,进而调用 setMessage 更新状态,这时页面会重新渲染并显示新的消息。

6. 添加样式

React 支持多种方式来为组件添加样式。你可以直接在组件中内联样式,也可以导入外部的 CSS 文件。

App.js 文件中,我们已经导入了 ./App.css 文件。接下来,我们可以在 src/App.css 中定义样式:

.App-header {background-color: #282c34;min-height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: calc(10px + 2vmin);color: white;
}button {font-size: 1rem;padding: 10px 20px;color: #61dafb;background-color: #282c34;border: 2px solid #61dafb;cursor: pointer;margin-top: 20px;
}button:hover {background-color: #61dafb;color: #282c34;
}

保存文件后,你会看到按钮和文本的样式已经发生变化。

7. 构建和部署

当你完成了 React 应用的开发,下一步就是将其构建并部署到生产环境。

你可以使用以下命令构建项目:

npm run build

这会生成一个 build 目录,其中包含优化后的生产环境代码。你可以将该目录中的内容部署到任何静态文件服务器或内容交付网络(CDN)上。

8. 总结

通过这篇文章,你已经创建了一个简单的 React 应用,并且学习了如何构建组件、管理状态、添加样式,以及最终构建和部署应用。React 的核心思想是通过组件化的方式来构建用户界面,使开发变得更加高效和灵活。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/53372.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

低空经济如此火爆,新手如何分一杯羹?

低空经济的火爆为新手提供了诸多参与和分一杯羹的机会。以下是一些具体的建议&#xff0c;帮助新手在这一领域找到切入点&#xff1a; 1. 了解行业概况与趋势 定义与范围&#xff1a;低空经济是指在3000米以下空域内进行各种有人和无人驾驶航空器活动的经济形态&#xff0c;涉…

dubbo的SPI机制

一.dubbo的SPI机制 SPI机制是一个服务发现机制&#xff0c;通过接口的全限定名找到指定目录下对应的文件&#xff0c;然后加载对应的实现类注册到系统中进行使用。 在Java原生跟mysql的驱动加载也使用了这个机制&#xff0c;但是他们只能进行全部实现类的加载&#xff08;遍历…

mysql创建新表,同步数据

import os import argparse import glob import cv2 import numpy as np import onnxruntime import tqdm import pymysql import time import json from datetime import datetime os.environ[“CUDA_VISIBLE_DEVICES”] “0” # 使用 GPU 0 def get_connection(): “”“创…

最新HTML5中的文件详解

第5章 HTML5中的文件 5.1选择文件 可以创建一个file类型的input,添加multiple属性为true,可以实现多个文件上传。 5.1.1 选择单个文件 1.功能描述 创建file类型input元素&#xff0c;页面中不再有文本框&#xff0c;而是 选择文件 按钮&#xff0c;右侧是上次文件的名称&a…

argodb自定义函数读取hdfs文件的注意点,避免FileSystem已关闭异常

一、问题描述 一位同学反馈&#xff0c;他写的argo存过中调用了一个自定义函数&#xff0c;函数会加载hdfs上的一个文件&#xff0c;但有些节点会报FileSystem closed异常&#xff0c;同时有时任务会成功&#xff0c;有时会失败。 二、问题分析 argodb的计算引擎是基于spark…

解析 MySQL 数据库的 Python 接口:`mysqlclient` 与 `django-mysql` 实战指南20240904

博客标题&#xff1a;深入解析 MySQL 数据库的 Python 接口&#xff1a;mysqlclient 与 django-mysql 实战指南 引言 在现代 Web 开发中&#xff0c;数据库与应用程序的交互是不可避免的核心环节。对于使用 Python 尤其是 Django 框架的开发者来说&#xff0c;如何有效地与 M…

线性因子模型 - 概率PCA和因子分析篇

序言 在探索数据科学与机器学习的浩瀚领域中&#xff0c;深度学习作为一股不可小觑的力量&#xff0c;正以前所未有的方式重塑着我们对数据处理与知识发现的理解。在这一宏大的框架下&#xff0c;概率主成分分析&#xff08; Probabilistic PCA, pPCA \text{Probabilistic PCA…

Python3中dict字典类型的用法

字典是另一种可变容器模型&#xff0c;且可存储任意类型对象。 key与value 允许存储任意类型对象 但key 不支持 list列表、字典等可变类型 字典的每个键值 key:value 对用冒号 : 分割&#xff0c;每个键值对之间用逗号 , 分割&#xff0c;整个字典包括在花括号 {} 1、定义字典…

数据分析面试题:客户投保问题分析

目录 0 场景描述 1 数据准备 2 问题分析 2.1 计算小微公司的平均经营时长 2.2 计算小微公司且角色为投保人,保险起期在18年的总保费 2.3 假设,DWD_CUSTOMER_REL客户关联关系表中,存在部分客户保单数很多,部分客户保单数很少的情况,此时DWD_CUSTOMER_BASE表关联,程序…

鸿蒙OS试题

60当您开始开发一个应用/服务时&#xff0c;首先需要根据工程创建向导&#xff0c;创建一个新的工程&#xff0c;工具会自动生成对应的代码和资源模板。关于新建工程&#xff0c;下列选项说法正确的是? A.、创建用于Lite Wearable设备的工程&#xff0c;可以选择Native C工程…

百度智能云向量数据库创新和应用实践分享

本文整理自第 15 届中国数据库技术大会 DTCC 2024 演讲《百度智能云向量数据库创新和应用实践分享》 在 IT 行业&#xff0c;数据库有超过 70 年的历史了。对于快速发展的 IT 行业来说&#xff0c;一个超过 70 年历史的技术&#xff0c;感觉像恐龙一样&#xff0c;非常稀有和少…

Anaconda Prompt 安装paddle2.6报错

bug描述 python 3.11.9 通过 pip install paddlepaddle2.6.1 安装后&#xff0c;运行 paddle.utils.run_check() 则出现下面的错误&#xff1a; 解决办法 方法一&#xff1a;使用paddle 3的版本 这里要注意我的python版本 方法二&#xff1a;使用低版本的python python3.9…

[项目][CMP][直接向堆申请页为单位的大块内存]详细讲解

目录 1.系统调用 1.系统调用 Windows和Linux下如何直接向堆申请页为单位的大块内存&#xff1a; VirtualAllocbrk和mmap // 直接去堆上按页申请空间 static inline void *SystemAlloc(size_t kpage) { #ifdef _WIN32void *ptr VirtualAlloc(0, kpage << 13, MEM_COMM…

Lombok jar包引入和用法

大家好&#xff0c;今天分享一个在编写代码时的快捷方法。 当我们在封装实体类时&#xff0c;会使用set、get等一些方法。如下图&#xff0c;不但费事还影响代码的美观。 那么如何才能减少代码的冗余呢&#xff0c;首先lib中导入lombok的jar包并添加库。 此处我已导入&#xf…

Jenkins+Svn+Vue自动化构建部署前端项目(保姆级图文教程)

目录 介绍 准备工作 配置jenkins 构建部署任务 常见问题 介绍 在平常开发前端vue项目时,我们通常需要将vue项目进行打包构建,将打包好的dist目录下的静态文件上传到服务器上,但是这种繁琐的操作是比较浪费时间的,可以使用jenkins进行自动化构建部署前端vue 准备工作 准备…

如何设计实现完成一个FPGA项目

设计并完成一个FPGA项目是一个复杂但非常有价值的工程任务。以下是一个详细的步骤指南,帮助你从零开始完成一个FPGA项目。 1. 项目定义与需求分析 确定项目目标:明确项目要实现的功能和性能指标。需求分析:列出所有功能需求、性能需求、接口需求等。可行性分析:评估技术可…

Linux操作系统命令集(一)

最近开了操作系统的课&#xff0c;弄着虚拟机的linux系统命令学学 文件和目录操作命令&#xff1a; ls&#xff1a;列出目录内容 示例&#xff1a;ls -l 以长格式列出目录内容cd&#xff1a;切换目录 示例&#xff1a;cd /home/user 切换到 /home/user 目录mkdir&#xff1a;…

《粮食科技与经济》是什么级别的期刊?是正规期刊吗?能评职称吗?

​问题解答 问&#xff1a;《粮食科技与经济》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的第一批认定学术期刊。 问&#xff1a;《粮食科技与经济》级别&#xff1f; 答&#xff1a;省级。主管单位&#xff1a; 湖南省粮食和物资储备局 …

bat批处理实现从特定文件夹中提取文件内容并以父文件夹名存储

1、需求分析 标题是bat批处理实现从特定文件夹中提取文件内容并以父文件夹名存储。这里面我们要做的工作是&#xff1a; ①、批处理脚本使用的是bat文件&#xff1b; ②、文件夹下面有很多子文件夹&#xff0c;然后子文件夹下仍然有相同的文件结构&#xff0c;我们需要从三级…

halcon 自定义距离10的一阶导数幅图,摆脱sobel的3掩码困境

一&#xff0c;为什么要摆脱3的掩码 在处理图像的过程中&#xff0c;会用到平滑算子&#xff0c;很容易破坏边际&#xff0c;所谓的一阶导数sobel只计算掩码为3的差分&#xff0c;在幅度图分割中&#xff0c;往往是很难把握的。 举个例子-现在图像头平滑好了&#xff0c;缺陷…