首页手记 React项目实战：新手入门教程

React项目实战：新手入门教程

标签：

React

概述

本文详细介绍了React项目实战的基础知识，包括React的基本概念、优势和应用场景。读者将学习如何安装React和配置开发环境，以及通过Create React App快速搭建首个React项目。文章还深入讲解了组件化开发、路由和状态管理等内容，帮助读者全面掌握React项目的开发流程。

React基础概念介绍

什么是React

React 是一个由 Facebook 开发并维护的开源 JavaScript 库，主要用于构建用户界面，特别是单页面应用（SPA）。它将界面拆分成独立且可重用的组件，使得开发者可以专注于构建可视化的用户界面，而无需过多关注底层的渲染逻辑。

React的优势和应用场景

React 的优势和应用场景主要体现在以下几个方面：

组件化开发：React 通过组件化的方式组织代码，使得代码可复用性高，易于维护和扩展。
虚拟DOM：React 采用虚拟 DOM 技术，仅更新真正变化的 DOM 节点，提高渲染效率。
单向数据流：React 的单向数据流使得数据更新更加直观，便于调试和追踪数据变化。
丰富的生态系统：React 拥有庞大的社区支持和丰富的第三方库，如 React Router、Redux 等，可以大大提升开发效率。

应用场景包括但不限于：Web 应用程序、移动应用、嵌入式系统以及任何需要构建动态用户界面的场景。

安装React和开发环境配置

要开始使用 React，首先需要搭建开发环境。以下是安装步骤：

安装 Node.js 和 npm：
- 访问 Node.js 官方网站（https://nodejs.org/）下载安装最新版本的 Node.js，npm 会随 Node.js 一起被安装。
- 验证安装是否成功：
```
node -v
npm -v
```
安装 Create React App：
- 使用 npm 安装 create-react-app：
```
npm install -g create-react-app
```
- 验证安装是否成功：
```
create-react-app -v
```
创建新的 React 项目：
- 使用 create-react-app 创建新的 React 项目：
```
npx create-react-app my-app
```
- 进入项目目录并启动开发服务器：
```
cd my-app
npm start
```
配置开发环境：
- 根据项目需求配置环境变量、构建工具、代码风格等。

创建首个React应用

使用Create React App快速搭建项目

使用 create-react-app 可以快速创建 React 项目。create-react-app 提供了一组默认配置，使得开发者可以专注于编写应用逻辑，而无需过多关注配置细节。

创建新项目：
```
npx create-react-app my-first-react-app
```
启动开发服务器：
```
cd my-first-react-app
npm start
```
这会在浏览器中打开默认的 React 应用界面。

项目结构和主要文件解析

创建的 React 项目结构如下：

my-first-react-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── index.js
│   ├── index.css
│   ├── App.js
│   └── App.css
├── package.json
└── README.md

主要文件解析如下：

public/：包含项目公共资源文件，如 index.html 和 favicon.ico。
src/：包含应用的主要代码文件。
- index.js：应用的入口文件，负责将根组件渲染到 DOM 中。
- index.css：全局样式文件。
- App.js：应用的根组件文件。
- App.css：根组件的样式文件。
package.json：项目依赖信息和脚本配置文件。
README.md：介绍项目信息的文档。

Hello World示例代码详解

在 App.js 文件中，可以看到一个简单的 React 组件实现：

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

该组件使用 JSX 语法返回一个包含 Hello World! 的 div 元素。App.css 文件定义了 div 的样式。

index.js 文件内容如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

index.css 文件内容如下：

/* 确保根元素的样式 */
.App {
  text-align: center;
  color: #282c34;
  margin-top: 60px;
}

组件化开发

组件的概念和分类

React 中的组件是构建用户界面的基本单元。组件可以分为两大类：

函数组件：使用 JavaScript 函数定义的组件，主要用于展示数据。
类组件：继承自 React.Component 类的组件，可以包含状态（state）和生命周期方法。

创建和使用函数组件与类组件

函数组件示例

函数组件实现如下：

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

在父组件中使用该函数组件：

import React from 'react';
import Welcome from './Welcome';

function App() {
  return (
    <div>
      <Welcome name="World" />
    </div>
  );
}

export default App;
``

#### 类组件示例
类组件实现如下：

```jsx
import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default Welcome;

在父组件中使用该类组件：

import React from 'react';
import Welcome from './Welcome';

function App() {
  return (
    <div>
      <Welcome name="World" />
    </div>
  );
}

export default App;
``

### 组件属性props和状态state的管理
#### 属性（Props）
属性是组件的输入。父组件通过 `props` 向子组件传递数据。

```jsx
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="World" />
    </div>
  );
}

export default App;

状态（State）

状态是组件内部的数据，可以改变。使用 setState 方法更新状态。

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount = () => {
    this.setState((prevState) => {
      return { count: prevState.count + 1 };
    });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default Counter;
``

此示例中，`Counter` 组件有一个状态 `count`，通过 `incrementCount` 方法更新 `count` 并在界面上显示更新后的值。

## React生命周期方法
### 组件生命周期介绍
React 组件生命周期分为三个阶段：

1. **挂载阶段**：从组件创建到首次渲染。
2. **更新阶段**：组件接收到新的 `props` 或 `state`，重新渲染。
3. **卸载阶段**：组件从 DOM 中移除。

### 常见生命周期方法及其作用
#### 挂载阶段
- **constructor**：初始化状态和绑定方法。
- **render**：将组件渲染到 DOM。
- **componentDidMount**：组件渲染完成后执行的回调函数。

#### 更新阶段
- **shouldComponentUpdate**：决定是否重新渲染组件。
- **componentWillUpdate**：在渲染之前执行。
- **render**：将组件重新渲染到 DOM。
- **componentDidUpdate**：在渲染之后执行。

#### 卸载阶段
- **componentWillUnmount**：在组件从 DOM 中移除之前执行。

### 实例演练：组件挂载、更新和卸载
#### 示例代码
```jsx
import React, { Component } from 'react';

class LifecycleDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    console.log('Constructor');
  }

  componentDidMount() {
    console.log('ComponentDidMount');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('ComponentDidUpdate');
  }

  componentWillUnmount() {
    console.log('ComponentWillUnmount');
  }

  incrementCount = () => {
    this.setState((prevState) => {
      return { count: prevState.count + 1 };
    });
  };

  render() {
    console.log('Render');
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default LifecycleDemo;

此代码展示了组件在不同阶段的生命周期方法调用情况。通过点击按钮更新状态时，可以看到 componentDidUpdate 方法被调用。

状态管理和事件处理

状态管理的基本原则

状态管理是组件的核心，状态是组件内部的数据，用于保存组件的局部状态。状态更新时，React 会触发重新渲染，并且重新渲染时会调用 render 方法。

事件处理机制和常用事件绑定

React 使用合成事件系统，将事件绑定为函数，而非直接绑定到 DOM 节点上。事件处理函数可以作为属性传递给组件。

示例代码

import React, { Component } from 'react';

class EventDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
    };
    this.handleNameChange = this.handleNameChange.bind(this);
  }

  handleNameChange(event) {
    this.setState({ name: event.target.value });
  }

  handleSubmit = (event) => {
    event.preventDefault();
    alert(`Your name is ${this.state.name}`);
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Name:{' '}
            <input
              type="text"
              value={this.state.name}
              onChange={this.handleNameChange}
            />
          </label>
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}

export default EventDemo;

实战演练：表单输入和按钮点击事件

此示例展示了如何处理表单输入和按钮点击事件。通过表单输入获取用户输入并在按钮点击时显示弹窗。

路由和状态管理

React Router基础使用

React Router 是 React 中最常用的路由库，用于管理应用中的路由。使用 React Router，可以创建多级路由，并且每个路由可以承载不同的组件。

示例代码

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

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

export default App;

此代码定义了三个路由：/ 路由指向 Home 组件，/about 路由指向 About 组件，其余路由都指向 NotFound 组件。

简单的状态管理库（如Redux）介绍

Redux 是一个用于状态管理的库，它通过单一状态树使得状态更易于管理和调试。Redux 通常与 React 结合使用，通过 store 管理应用状态。

示例代码

import React from 'react';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

// Reducer
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

// Store
const store = createStore(counterReducer);

// Connected Component
const Counter = ({ count, incrementCount, decrementCount }) => (
  <div>
    <h1>Count: {count}</h1>
    <button onClick={incrementCount}>Increment</button>
    <button onClick={decrementCount}>Decrement</button>
  </div>
);

const mapStateToProps = (state) => {
  return { count: state };
};

const mapDispatchToProps = (dispatch) => {
  return {
    incrementCount: () => dispatch({ type: 'INCREMENT' }),
    decrementCount: () => dispatch({ type: 'DECREMENT' }),
  };
};

const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(Counter);

function App() {
  return (
    <Provider store={store}>
      <CounterContainer />
    </Provider>
  );
}

export default App;

此代码展示了如何使用 Redux 管理应用状态，通过 store 更新状态，并通过 connect 高阶组件将状态和动作函数传递给 React 组件。

小项目实战：导航和状态共享

此部分实现一个简单的导航应用，使用 React Router 进行导航，并使用 Redux 管理状态。

示例代码

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import { Provider, createStore } from 'redux';
import { connect } from 'react-redux';

// Reducer
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

// Store
const store = createStore(counterReducer);

// Connected Component
const Counter = ({ count, incrementCount, decrementCount }) => (
  <div>
    <h1>Count: {count}</h1>
    <button onClick={incrementCount}>Increment</button>
    <button onClick={decrementCount}>Decrement</button>
  </div>
);

const mapStateToProps = (state) => {
  return { count: state };
};

const mapDispatchToProps = (dispatch) => {
  return {
    incrementCount: () => dispatch({ type: 'INCREMENT' }),
    decrementCount: () => dispatch({ type: 'DECREMENT' }),
  };
};

const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(Counter);

const Home = () => (
  <div>
    <h2>Home</h2>
    <Link to="/counter">Go to Counter</Link>
  </div>
);

const CounterPage = () => (
  <div>
    <h2>Counter</h2>
    <Link to="/">Go to Home</Link>
    <CounterContainer />
  </div>
);

function App() {
  return (
    <Provider store={store}>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/counter" component={CounterPage} />
        </Switch>
      </Router>
    </Provider>
  );
}

export default App;

此代码实现了一个简单的导航应用，包含两个页面：Home 和 Counter，并在 Counter 页面中使用 Redux 管理状态。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

波斯汪

手记
篇

粉丝

67

获赞与收藏

430

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30787 345

网络编程入门教程

20个小节 12720 239

Pandas 入门教程

25个小节 18599 341

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

React项目实战：新手入门教程

什么是React

React的优势和应用场景

使用Create React App快速搭建项目

项目结构和主要文件解析

Hello World示例代码详解

组件的概念和分类

创建和使用函数组件与类组件

函数组件示例

状态（State）

状态管理的基本原则

事件处理机制和常用事件绑定

示例代码

实战演练：表单输入和按钮点击事件

React Router基础使用

示例代码

简单的状态管理库（如Redux）介绍

示例代码

小项目实战：导航和状态共享

示例代码

阅读免费教程