先来认识一下React
小伙伴们，今天咱们来聊聊React，它是个超火的前端框架。想象一下，你在网上冲浪时看到的那些漂亮又实用的网页，很多都是用React这样的框架搭建的呢。简单来说，React就像是搭积木，帮你把网页的各个小部件拼凑起来，而且还能让这些部件动起来，像点击按钮、切换图片啥的。
开始前的准备
在动手之前，你需要装几个东西。首先是Node.js，它是个强大的工具，能帮我们管理项目。去Node.js官网下载安装就行。安装完后，打开命令行工具，输入node -v和npm -v，看到版本号就说明装好了。
接着，咱们用npm来安装一个叫Create React App的工具，它能帮我们快速搭建React项目。在命令行里输入npm install -g create-react-app，装好后，你就可以用create-react-app命令来创建项目啦。
创建第一个React项目
好嘞，现在咱们来创建项目。在命令行里输入create-react-app my-first-react-app，这里的my-first-react-app就是你项目的名称，你可以随意取名。等它创建好后，用cd my-first-react-app进入项目文件夹，再输入npm start，浏览器就会自动打开，显示你的项目页面啦。
项目结构初探
打开项目文件夹，你会看到好多文件和文件夹。重点关注这几个：
-
public文件夹：里面有个index.html，这是你项目的根页面，就像房子的地基。 -
src文件夹：这是核心区域，App.js是主要的组件文件，index.js是入口文件，把App.js渲染到index.html上。
组件，React的积木块
React里有个重要概念叫组件，就像搭积木的小块。咱们来写个简单的组件。在src文件夹里新建一个Hello.js文件，写上：
JavaScript复制
import React from 'react';function Hello() {return <h1>你好呀，我是React组件！</h1>;
}export default Hello;然后在App.js里引入它：
JavaScript复制
import Hello from './Hello';function App() {return (<div><Hello /></div>);
}保存后，刷新浏览器，就能看到页面上出现了“你好呀，我是React组件！”的字样啦。
状态管理，让组件动起来
想让组件更有趣，就得用到状态。比如有个按钮，点击后文字变色。在App.js里这样写：
JavaScript复制
import React, { useState } from 'react';function App() {const [color, setColor] = useState('black');function changeColor() {setColor(color === 'black' ? 'red' : 'black');}return (<div><h1 style={{ color }}>你好呀，我是会变色的文字！</h1><button onClick={changeColor}>变色</button></div>);
}这里用useState钩子创建了一个状态color，初始值是black。点击按钮时，changeColor函数会改变颜色状态，文字颜色就会跟着变啦。
事件处理，组件间的互动
组件之间也可以互动哦。比如有个输入框，你输入内容后，另一个组件显示输入的内容。在App.js里写：
JavaScript复制
import React, { useState } from 'react';
import Hello from './Hello';function App() {const [input, setInput] = useState('');function handleChange(event) {setInput(event.target.value);}return (<div><input type="text" value={input} onChange={handleChange} /><Hello content={input} /></div>);
}然后修改Hello.js：
JavaScript复制
import React from 'react';function Hello({ content }) {return <h1>你输入的是：{content}</h1>;
}export default Hello;这样，你在输入框里输入啥，Hello组件就会显示啥内容啦。
总结一下
今天咱们初步认识了React，搭建了项目，写了组件，还让组件有了状态和互动。其实React还有很多高级功能，比如路由、上下文等等，等你慢慢熟悉后就能深入学习啦。别怕困难，一步步来，你也能用React搭建出超酷的网页呢！快动手试试吧，有问题随时问哦。
公主号：周盛欢AI
