React前端框架 - 技术栈

先来认识一下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