首页手记 React开发入门：从零开始学习React框架

React开发入门：从零开始学习React框架

标签：

React.JS React React Native

概述

本文全面介绍了React开发的基础知识，包括React的基本概念、安装配置、开发环境搭建、JSX语法以及组件化开发等内容。文章详细讲解了如何使用create-react-app命令快速创建React项目，并通过实例演示了组件的定义与使用。此外，还涵盖了状态管理和路由导航等高级主题，帮助读者从零开始掌握React开发。

React开发入门：从零开始学习React框架

React简介与安装配置

React的基本概念

React 是一个由Facebook开发的开源JavaScript库，主要用于构建用户界面，特别是单页面应用（SPA）。React可以用于构建大型的复杂应用，同时保持代码的组织和可维护性。它的设计理念强调组件化、可重用性和高效性。

组件化：React的核心是组件化开发。组件是独立的、可重用的代码块，可以组合成复杂的UI界面。
虚拟DOM：React使用虚拟DOM来提高性能。虚拟DOM是一个轻量级的对象表示，用于描述UI状态。当UI需要更新时，React会比较虚拟DOM的变化，决定最小化DOM操作，从而提高性能。
单向数据流：React采用了单向数据流的设计，使数据更新和UI更新的流程更加直观和易于调试。

创建React应用的几种常见方法

1. 使用`create-react-app`命令

create-react-app是一个由Facebook维护的命令行工具，用于快速创建一个React应用的基础框架。使用create-react-app可以方便地初始化一个React项目，无需手动配置复杂的工具链。

安装create-react-app：
```
npx create-react-app my-app
```
进入项目目录：
```
cd my-app
```
启动开发服务器：
```
npm start
```

2. 使用`Create-React-App`库

除了使用命令行工具create-react-app，你还可以使用Create-React-App库直接在JavaScript代码中初始化React应用。以下是使用Create-React-App库的基本步骤：

安装Create-React-App库：
```
npm install create-react-app --save-dev
```
在项目目录中执行create-react-app命令：
```
npx create-react-app my-app
```
启动开发服务器：
```
npm start
```

开发环境的搭建与配置

React项目需要一些开发工具来支持开发和构建。常用的开发工具包括：

Node.js：JavaScript运行时环境和工具。
npm：Node.js的包管理和发布工具。
WebPack：代码打包工具，用于合并模块和资源文件。
Babel：编译ES6+语法到ES5兼容的代码。
ESLint：静态代码分析工具，用于代码规范检查。
React DevTools：React的调试工具，用于检查和调试React组件。

安装Node.js和npm：

访问Node.js官网下载安装包。
安装完成后，打开命令行工具，检查是否安装成功：
```
node -v
npm -v
```

安装WebPack和Babel：

初始化一个新的React项目：
```
npm init -y
```

安装WebPack和Babel相关的依赖：

npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

配置webpack.config.js和.babelrc文件：

在项目根目录下创建webpack.config.js文件，配置WebPack：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

创建.babelrc文件，配置Babel：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

配置package.json文件：

在package.json文件中，添加启动和构建脚本：

"scripts": {
  "start": "webpack --mode development",
  "build": "webpack --mode production"
}

启动开发服务器：

运行以下命令启动开发服务器：
```
npm start
```

JSX语法基础

JSX的定义与作用

JSX是JavaScript XML的缩写，它是一种语法扩展，允许在JavaScript中编写类似HTML的标记语言。JSX使得React组件的定义更加直观，更接近于传统的HTML结构。

如何在React中使用JSX

在React中使用JSX，你首先需要安装@babel/preset-react，然后在配置文件中启用它。以下是一个简单的JSX示例：

import React from 'react';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

export default HelloWorld;

JSX与HTML的区别

JSX与HTML有很多相似之处，但也有显著的区别：

属性：在JSX中，属性值可以是任何JavaScript表达式，而不仅仅是字符串。
事件处理：JSX中的事件处理使用驼峰命名法，例如onClick而不是onclick。
JSX元素：JSX中的元素是JavaScript对象，可以像操作普通JavaScript对象一样进行操作。

// React JSX 事件处理
function handleClick() {
  console.log('Button was clicked!');
}

function Button() {
  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

export default Button;

组件化开发

React组件的定义与使用

React应用的核心是组件。组件可以看作是可重用的、自包含的UI代码块。React组件可以分为类组件和函数组件两种类型。

类组件

类组件是通过继承React.Component类创建的。类组件包含render方法，该方法返回组件的UI。

import React from 'react';

class App extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

export default App;

函数组件

函数组件是通过函数定义的。函数组件接收props参数，可以返回任何JSX元素。

import React from 'react';

function App(props) {
  return <h1>Hello, World!</h1>;
}

export default App;

类组件与函数组件的区别

类组件

需要继承React.Component类。
具有生命周期方法，如componentDidMount。
可以有状态（state）。

函数组件

直接定义为箭头函数。
没有生命周期方法。
不能有状态（state），但可以通过useEffect和useState等Hooks来模拟状态。

组件的props与state的使用

props

Props是组件间通信的一种方式。父组件可以通过传递props来控制子组件的渲染。

import React from 'react';

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

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

export default App;

state

State是组件内部的状态，用于存储和管理组件的内部数据。组件的状态可以通过setState方法更新。

import React, { Component } from 'react';

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

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

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

export default Counter;

状态管理

状态的概念与作用

状态是组件内部的数据，用于控制和驱动组件的渲染。状态是React组件中最重要的概念之一。

初始化状态

在类组件中，状态可以通过构造函数初始化。

import React, { Component } from 'react';

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

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

export default Counter;

更新状态

状态可以通过setState方法更新。

this.setState({ count: this.state.count + 1 });

如何管理和更新组件状态

`setState`方法

setState方法是更新组件状态的主要方式。它接受一个对象，该对象描述了状态的变化。

this.setState({
  count: this.state.count + 1
});

`useEffect` Hook

在函数组件中，可以使用useEffect Hook来处理组件生命周期中的副作用，如数据获取、订阅等。

import React, { useEffect, useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default App;

状态提升与状态管理库的介绍

状态提升

状态提升是指将状态提升到父组件中，然后通过props将状态传递给子组件。这样可以避免子组件之间的状态通信。

import React, { Component } from 'react';

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

  handleCountChange = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <ChildComponent count={this.state.count} onCountChange={this.handleCountChange} />
    );
  }
}

class ChildComponent extends Component {
  render() {
    return (
      <div>
        <h1>Count: {this.props.count}</h1>
        <button onClick={this.props.onCountChange}>Increment</button>
      </div>
    );
  }
}

export default ParentComponent;

状态管理库

状态管理库，如Redux和MobX，可以提供更高级的状态管理功能。它们通常用于复杂应用中，以保持状态的集中管理和可维护性。

Redux状态管理示例

以下是一个简单的Redux状态管理示例：

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

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

// 创建store
const store = createStore(counterReducer);

// 创建组件
class Counter extends React.Component {
  render() {
    return (
      <div>
        <h1>Count: {this.props.count}</h1>
        <button onClick={this.props.increment}>
          Increment
        </button>
      </div>
    );
  }
}

// 连接store到组件
const mapStateToProps = state => ({
  count: state.count
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' })
});

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

// 使用Provider包裹根组件
function App() {
  return (
    <Provider store={store}>
      <ConnectedCounter />
    </Provider>
  );
}

export default App;

事件处理与表单处理

React中的事件处理机制

React中的事件处理机制与传统的DOM事件处理有所不同。React事件是合成事件（Synthetic Events），它们与浏览器事件类似，但具有跨浏览器的一致性。

处理事件

事件处理函数通常作为JSX的属性传递。

import React from 'react';

function Button() {
  function handleClick(event) {
    console.log('Button was clicked!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

export default Button;

阻止默认行为

在React中，可以通过event.preventDefault()阻止默认行为。

import React from 'react';

function Form() {
  function handleSubmit(event) {
    event.preventDefault();
    console.log('Form was submitted');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

export default Form;

如何在组件中处理事件

在React组件中，事件处理函数可以定义在组件内部，也可以作为组件的属性传递。

import React from 'react';

class Button extends React.Component {
  handleClick(event) {
    console.log('Button was clicked!');
  }

  render() {
    return <button onClick={this.handleClick.bind(this)}>Click me</button>;
  }
}

export default Button;

React中的表单事件处理

在React中处理表单事件时，可以通过state或props来管理表单数据。

示例：输入框的值变化

import React, { useState } from 'react';

function UsernameForm() {
  const [username, setUsername] = useState('');

  function handleChange(event) {
    setUsername(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    console.log(`Username: ${username}`);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" value={username} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default UsernameForm;

路由与导航

React Router的基本使用

React Router是一个流行的路由管理库，用于实现单页面应用的路由功能。它可以帮助你定义不同页面之间的导航逻辑。

安装React Router

npm install react-router-dom

基本用法

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

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/users">Users</Link>
          </li>
        </ul>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/users" component={Users} />
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

export default App;

如何实现页面之间的导航

在React应用中，可以通过Link组件实现页面之间的导航。

import React from 'react';
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/users">Users</Link>
    </div>
  );
}

export default Navigation;

路由的高级用法

路由参数

可以通过路径参数实现动态路由。

import React from 'react';
import { Route, Switch, useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <h2>User: {id}</h2>;
}

function App() {
  return (
    <Switch>
      <Route path="/users/:id" component={User} />
    </Switch>
  );
}

export default App;

路由守卫

可以通过路由守卫实现权限控制。

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

function PrivateRoute({ component: Component, ...rest }) {
  const isLoggedIn = true; // 假设这里有一个登录状态的检查

  return (
    <Route
      {...rest}
      render={props =>
        isLoggedIn ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}

function App() {
  return (
    <Switch>
      <PrivateRoute path="/dashboard" component={Dashboard} />
      <Route path="/login" component={Login} />
    </Switch>
  );
}

function Dashboard() {
  return <h2>Dashboard</h2>;
}

function Login() {
  return <h2>Login</h2>;
}

export default App;

使用`useLocation`和`useHistory` Hooks

import React from 'react';
import { useHistory, useLocation } from 'react-router-dom';

function Location() {
  const location = useLocation();
  const history = useHistory();

  return (
    <div>
      <p>Current Path: {location.pathname}</p>
      <button onClick={() => history.push('/about')}>
        Go to About
      </button>
    </div>
  );
}

export default Location;

通过以上内容，你可以从零开始学习React框架，逐步掌握React的核心概念和技术。希望这篇文章能帮助你更好地理解和使用React。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕哥6287543

手记
篇

粉丝

2

获赞与收藏

1

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30980 346

网络编程入门教程

20个小节 12758 240

Pandas 入门教程

25个小节 18643 345

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

React开发入门：从零开始学习React框架

React的基本概念

创建React应用的几种常见方法

1. 使用create-react-app命令

2. 使用Create-React-App库

开发环境的搭建与配置

JSX的定义与作用

如何在React中使用JSX

JSX与HTML的区别

React组件的定义与使用

类组件

函数组件

类组件与函数组件的区别

类组件

函数组件

组件的props与state的使用

props

state

状态的概念与作用

初始化状态

更新状态

如何管理和更新组件状态

setState方法

useEffect Hook

状态提升与状态管理库的介绍

状态提升

状态管理库

Redux状态管理示例

React中的事件处理机制

处理事件

阻止默认行为

如何在组件中处理事件

React中的表单事件处理

示例：输入框的值变化

React Router的基本使用

安装React Router

基本用法

如何实现页面之间的导航

路由的高级用法

路由参数

路由守卫

使用useLocation和useHistory Hooks

阅读免费教程

1. 使用`create-react-app`命令

2. 使用`Create-React-App`库

`setState`方法

`useEffect` Hook

使用`useLocation`和`useHistory` Hooks