React入门实战——组件开发与Props、State核心用法

React是由Facebook（现Meta）开发的前端框架，与Vue并称为前端两大主流框架，广泛应用于大型企业级应用（如Facebook、Instagram、淘宝移动端等）。React的核心思想是“组件化”和“虚拟DOM”，组件化让代码更具复用性和可维护性，虚拟DOM则提升了网页的渲染性能。本文将针对React新手，讲解React的核心概念，重点介绍组件开发、Props和State的用法，完成一个简单的React组件实战，帮助你快速入门React开发。

第一步：React环境搭建。React的环境搭建有两种方式：一种是使用CDN引入（适合新手快速体验，无需配置复杂环境），另一种是使用Create React App（React官方提供的脚手架工具，适合实际项目开发）。本文重点讲解Create React App的搭建方式：首先确保已安装Node.js和npm（或yarn），然后执行命令：npx create-react-app react-demo（npx是npm 5.2+新增的命令，可直接运行脚手架工具，无需全局安装）；等待项目创建完成后，进入项目目录：cd react-demo；启动项目：npm start，启动成功后，访问http://localhost:3000，即可看到React的默认页面。

第二步：React项目目录结构解析。重点关注核心目录和文件：1. src目录：项目的核心代码目录，包含组件、页面、样式、入口文件等；2. src/App.js：项目的根组件，类似于Vue的App.vue；3. src/index.js：项目的入口文件，用于将根组件挂载到页面的DOM元素上；4. public目录：静态资源目录，存放index.html（页面模板）、图片等静态文件；5. package.json：项目配置文件，存放依赖和脚本命令。

第三步：React组件开发。React中的组件分为两种：函数组件和类组件。React 16.8之后，新增了Hooks特性，函数组件的功能得到了极大的增强，成为React开发的主流方式（类组件逐渐被淘汰，新手可优先学习函数组件）。函数组件本质上是一个JavaScript函数，接收Props参数，返回一段React元素（即页面结构）。

核心知识点一：Props（属性）。Props是组件之间传递数据的方式，类似于Vue中的props，是只读的（不能在子组件中修改Props的值）。父组件通过在子组件标签上添加属性的方式，将数据传递给子组件，子组件通过参数接收Props，然后使用Props中的数据渲染页面。例如：父组件传递name属性给子组件<Child name="张三" />，子组件接收Props并使用：function Child(props) { return <h1>我的名字是{props.name}</h1>; }。Props还可以设置默认值和类型校验（需引入prop-types库），确保传递的数据符合要求。

核心知识点二：State（状态）。State是组件内部的响应式数据，用于存储组件自身需要修改的数据（如计数器的数字、表单的输入值），当State的值发生变化时，组件会重新渲染，更新页面。在函数组件中，使用useState Hook（React内置的Hook）创建State，useState接收一个初始值，返回一个数组，数组的第一个元素是State变量，第二个元素是修改State的函数（必须通过这个函数修改State，不能直接修改）。例如：const [count, setCount] = useState(0); 其中count是State变量，setCount是修改count的函数，调用setCount(1)，即可将count的值改为1，组件会重新渲染。

实战：开发一个“用户信息卡片”组件。需求：父组件传递用户的姓名、年龄、性别给子组件，子组件接收Props并展示，同时添加一个“切换性别”按钮，点击按钮，切换用户的性别（使用State实现）。首先，创建子组件UserCard，接收Props（name、age、gender），使用useState创建genderState，初始值为Props中的gender，定义toggleGender函数，用于切换genderState的值；然后，在模板中展示用户信息，绑定按钮的点击事件为toggleGender；最后，在App.js中引入UserCard组件，传递Props数据，启动项目，即可看到效果。

实战小贴士：React的核心是组件化，新手入门时，要学会拆分组件，将页面拆分为多个独立的组件（如头部组件、导航组件、内容组件），提高代码的复用性。同时，重点掌握useState Hook的用法，理解State的响应式原理——修改State会触发组件重新渲染。此外，React的模板语法（JSX）与HTML类似，但有一些区别（如class改为className、for改为htmlFor），需注意这些细节，避免出现语法错误。