AI编程网

2024-08-08发表2024-08-10更新软件开发 / React4 分钟读完 (大约639个字)

22 从零到上手学习 React 框架教程

小节：搭建项目骨架与基础组件

1. 环境准备

在开始使用 React 之前，我们需要确保开发环境已准备好。以下是你需要的工具：

Node.js: React 需要 Node.js 环境。可以在 Node.js 官方网站下载并安装最新版本。
npm 或 yarn: Node.js 附带了 npm（Node Package Manager），也可以选择安装 yarn 作为包管理工具。

2. 创建 React 应用

使用 create-react-app 工具可以快速搭建 React 项目。打开终端，执行以下命令：

1	npx create-react-app my-app

其中，my-app 是你想要创建的项目名称。

3. 运行应用

进入项目目录并启动开发服务器：

1 2	cd my-app npm start

此时，浏览器将自动打开 http://localhost:3000，你可以看到默认的 React 欢迎页面。

4. 项目结构

React 项目的基本结构如下：

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
└── src/
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.svg

关键目录解释：

public/: 存放静态文件，如 index.html。
src/: 存放 React 组件和样式文件。

5. 创建基础组件

在 src 目录下创建一个新的文件夹 components，用来存放你的组件。

1	mkdir src/components

然后，在 components 文件夹中创建一个基础组件 Hello.js：

// src/components/Hello.js
import React from 'react';

const Hello = () => {
    return <h1>Hello, React!</h1>;
};

export default Hello;

6. 使用基础组件

接下来，我们需要在 App.js 中导入并使用刚刚创建的 Hello 组件。

// src/App.js
import React from 'react';
import './App.css';
import Hello from './components/Hello';

const App = () => {
    return (
        <div className="App">
            <Hello />
        </div>
    );
};

export default App;

7. 运行并查看结果

回到开发服务器，如果之前的服务还在运行，页面会自动更新并显示：

1	Hello, React!

8. 小结

在这一小节中，我们完成了以下几个步骤：

安装并创建了一个新的 React 应用。
理解了项目目录结构。
创建了一个简单的基础组件。
在 App 组件中使用了基础组件。

通过这些步骤，你已成功搭建了一个 React 应用的基本骨架，并了解了如何创建和使用组件，接下来可以继续深入学习 React 的其它特性，如状态管理、路由、事件处理等。

2024-08-08发表2024-08-10更新软件开发 / React4 分钟读完 (大约630个字)

23 从零到上手学习 React 框架教程

小节：集成路由与状态管理

在本小节中，我们将深入学习如何在 React 应用中集成路由和状态管理。我们将使用 React Router 进行路由管理，并使用 Redux 作为状态管理工具。

1. 安装依赖

首先，我们需要安装 React Router 和 Redux 相关的依赖包。在项目目录下运行以下命令：

1	npm install react-router-dom redux react-redux

2. 配置 React Router

2.1 创建基本路由

在 src 目录下创建一个新的文件 App.js，并配置基本路由。

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

2.2 创建页面组件

接下来，我们需要创建两个简单的页面组件 Home 和 About。

// src/Home.js
import React from 'react';

const Home = () => {
  return <h1>欢迎来到首页!</h1>;
};

export default Home;

// src/About.js
import React from 'react';

const About = () => {
  return <h1>关于我们</h1>;
};

export default About;

3. 状态管理集成 Redux

3.1 创建 Redux Store

在项目中创建一个新的文件 store.js，用于配置 Redux 的存储。

// src/store.js
import { createStore } from 'redux';

// 定义初始状态
const initialState = {
  count: 0,
};

// 定义 reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

// 创建 Redux store
const store = createStore(reducer);

export default store;

3.2 集成 Redux Provider

在 src/index.js 文件中，使用 Provider 组件将 store 提供给整个应用。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

3.3 在组件中使用 Redux 状态

在 Home 组件中，我们来添加一些按钮，以便用户能够增加和减少计数，并显示当前的计数值。

// src/Home.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Home = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>欢迎来到首页!</h1>
      <h2>当前计数: {count}</h2>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>增加</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>减少</button>
    </div>
  );
};

export default Home;

4. 总结

在本节中，我们学习了如何在 React 应用中集成 React Router 和 Redux。通过这些工具，我们可以实现灵活的路由管理以及高效的状态管理。

我们先配置了基本的路由，用于导航到不同的页面。
随后，我们设置了 Redux 状态管理，允许在应用中共享和管理状态。

这样，你就拥有了一个完整的 React 应用，能处理路由和全局状态管理。

2024-08-08发表2024-08-10更新软件开发 / React5 分钟读完 (大约800个字)

项目完成与部署

在这一节中，我们将集中讨论如何完成一个简单的 React 项目，并最终将其部署到生产环境。我们将通过一个小示例来演示整个流程，包括代码示例和如何将其部署到 Netlify。

1. 项目完成

1.1 创建项目

首先，确保你已经安装了 Node.js 和 npm。然后，你可以使用以下命令创建一个新的 React 项目：

1 2	npx create-react-app my-app cd my-app

1.2 项目结构

在项目创建完成后，你的文件夹结构应如下所示：

my-app
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   └── logo.svg
├── .gitignore
├── package.json
└── README.md

1.3 编写代码

接下来，我们将在 src/App.js 中编写一个简单的 Todo List 应用程序。以下是代码示例：

import React, { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (inputValue.trim()) {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

  const removeTodo = (index) => {
    setTodos(todos.filter((_, i) => i !== index));
  };

  return (
    <div className="App">
      <h1>Todo List</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Enter a new todo"
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo} <button onClick={() => removeTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

1.4 样式调整

在 src/App.css 中，你可以添加一些基本的样式，以使界面更美观。例如：

.App {
  text-align: center;
}

input {
  margin: 10px;
  padding: 5px;
}

button {
  padding: 5px 10px;
}

1.5 运行项目

完成代码后，可以通过以下命令启动开发服务器：

npm start

你现在应该可以在浏览器中访问 http://localhost:3000 查看你的 Todo List 应用。

2. 项目部署

2.1 构建项目

在部署之前，你需要构建项目，以生成生产环境下的可用代码。使用以下命令：

1	npm run build

该命令会在 my-app/build 文件夹中生成静态文件。

2.2 部署到 Netlify

注册或登录 Netlify: 首先访问 Netlify 并注册一个账号，或使用现有账号登录。
创建新站点: 在 Netlify 的仪表板上，点击 “New site from Git”。
连接 Git 提供者: 选择 GitHub 或其他代码仓库托管服务，并授权 Netlify 访问你的代码。
选择仓库: 找到并选择你刚刚创建的项目仓库。
设置构建设置:
- Branch to deploy: 选择 main 或 master 分支（取决于你的项目设置）。
- Build command: 输入 npm run build。
- Publish directory: 输入 build。
点击 Deploy Site: 现在，Netlify 会自动开始构建并部署你的网站。

2.3 访问网站

部署完成后，你将获得一个 Netlify 提供的公共网址，可以在浏览器中访问你的网站并查看效果。

恭喜你！你已经成功创建并部署了一个简单的 React 项目。你可以根据自己的需要扩展和修改这个项目，探索更多的功能和技术。