2023 React 18 系统入门进阶实战《欢乐购》「高清F享」2023 React 18 系统入门进阶实战《欢乐

2023 React 18 系统入门进阶实战《欢乐购》

核心代码，注释必读

// download：3w ukoou com

本教程将引导您进入 React 18 的世界，并通过一个实战项目《欢乐购》来帮助您掌握 React 的基本概念和进阶技巧。《欢乐购》是一个简单的电子商务网站，我们将从搭建项目开始，逐步实现产品展示、购物车、用户登录等功能。

准备工作

在开始之前，确保您已经安装了最新版本的 Node.js 和 npm。您还需要熟悉基本的 HTML、CSS 和 JavaScript。

步骤 1：创建 React 应用

首先，打开终端并执行以下命令来创建一个新的 React 应用：

bash复制代码
npx create-react-app happy-shopping
cd happy-shopping

步骤 2：项目结构概览

进入项目目录后，我们来看一下项目的基本结构：

复制代码
happy-shopping
├── public
│   ├── index.html
│   └── ...
└── src
    ├── components
    │   ├── Product.js
    │   ├── Cart.js
    │   └── ...
    ├── pages
    │   ├── Home.js
    │   ├── CartPage.js
    │   └── ...
    ├── App.js
    └── index.js

步骤 3：实现产品展示

我们首先实现产品展示功能。在 src/components/Product.js 中，创建一个简单的产品组件：

jsx复制代码
import React from 'react';

const Product = ({ name, price, image }) => {
  return (
    <div className="product">
      <img src={image} alt={name} />
      <h3>{name}</h3>
      <p>Price: ${price}</p>
    </div>
  );
};

export default Product;

接下来，在 src/pages/Home.js 中，使用 Product 组件来展示多个产品：

jsx复制代码
import React from 'react';
import Product from '../components/Product';

const Home = () => {
  const products = [
    { name: 'Product 1', price: 19.99, image: 'product1.jpg' },
    { name: 'Product 2', price: 29.99, image: 'product2.jpg' },
    // Add more products here
  ];

  return (
    <div className="home">
      {products.map((product, index) => (
        <Product key={index} name={product.name} price={product.price} image={product.image} />
      ))}
    </div>
  );
};

export default Home;

步骤 4：实现购物车功能

现在我们来实现购物车功能。在 src/components/Cart.js 中，创建一个简单的购物车组件：

jsx复制代码
import React from 'react';

const Cart = ({ items }) => {
  const getTotalPrice = () => {
    return items.reduce((total, item) => total + item.price, 0);
  };

  return (
    <div className="cart">
      <h2>Shopping Cart</h2>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
      <p>Total Price: ${getTotalPrice()}</p>
    </div>
  );
};

export default Cart;

然后，在 src/pages/CartPage.js 中，使用 Cart 组件来展示购物车内容：

jsx复制代码
import React from 'react';
import Cart from '../components/Cart';

const CartPage = () => {
  const cartItems = [
    { name: 'Product 1', price: 19.99 },
    { name: 'Product 2', price: 29.99 },
    // Add more cart items here
  ];

  return (
    <div className="cart-page">
      <Cart items={cartItems} />
    </div>
  );
};

export default CartPage;

步骤 5：实现用户登录功能

最后，我们实现用户登录功能。在 src/components/Login.js 中，创建一个简单的登录组件：

jsx复制代码
import React, { useState } from 'react';

const Login = ({ onLogin }) => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    // Implement login logic here
    onLogin(username);
  };

  return (
    <div className="login">
      <input type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} />
      <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button onClick={handleLogin}>Login</button>
    </div>
  );
};

export default Login;

然后，在 src/pages/LoginPage.js 中，使用 Login 组件来实现用户登录：

jsx复制代码
import React from 'react';
import Login from '../components/Login';

const LoginPage = () => {
  const handleLogin = (username) => {
    alert(`Welcome, ${username}!`);
  };

  return (
    <div className="login-page">
      <Login onLogin={handleLogin} />
    </div>
  );
};

export default LoginPage;

在 React 中，可以通过父子组件之间的数据传递来解决数据共享的问题。具体的方法如下：

父组件向子组件传递数据：父组件可以通过 prop（属性）将数据传递给子组件。子组件通过 this.props 来访问这些属性。

javascriptCopy Code
class ParentComponent extends React.Component {
  render() {
    const data = 'Hello from parent!';

    return (
      <ChildComponent message={data} />
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return (
      <div>{this.props.message}</div>
    );
  }
}

在上面的例子中，ParentComponent 将一个名为 message 的 prop 传递给了 ChildComponent，然后在子组件中使用 this.props.message 来访问该属性。

子组件向父组件传递数据：如果需要将子组件的数据传递回父组件，可以通过在父组件中定义一个回调函数，并将其作为 prop 传递给子组件。子组件可以在适当的时机调用该回调函数，并将数据作为参数传递给它。

javascriptCopy Code
class ParentComponent extends React.Component {
  handleData(data) {
    console.log('Data received from child:', data);
  }

  render() {
    return (
      <ChildComponent sendData={this.handleData} />
    );
  }
}

class ChildComponent extends React.Component {
  sendDataToParent() {
    const data = 'Hello from child!';
    this.props.sendData(data);
  }

  render() {
    return (
      <button onClick={this.sendDataToParent}>Send Data</button>
    );
  }
}

在上面的例子中，ChildComponent 通过 this.props.sendData 调用了父组件中的回调函数，并将数据作为参数传递给它。

通过父子组件之间的数据传递，可以实现数据共享并实现组件之间的通信。请注意，在实际应用中，数据共享可能更复杂，可以考虑使用状态管理库（例如 Redux 或 Mobx）来更好地管理应用程序的状态。

2023 React 18 系统入门 进阶实战《欢乐购》「高清F享」