正文

入门必看！零基础快速学会React框架的PDF攻略

/0 浏览量
0510

第一部分：React基础入门

1.1 了解React

React是由Facebook开发的一个用于构建用户界面的JavaScript库。它通过组件化的方式，将UI分解为可复用的独立部分，便于管理和维护。

为什么选择React？

  • 组件化开发，提高代码复用性。
  • 虚拟DOM，提高渲染性能。
  • 丰富的生态系统，有大量成熟的库和工具。

1.2 环境搭建

首先，需要安装Node.js和npm（Node.js包管理器）。然后，可以使用create-react-app工具快速搭建React项目。

npx create-react-app my-app
cd my-app
npm start

1.3 JSX语法

React使用JSX语法来描述UI结构，它本质上是一种JavaScript语法扩展。

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
}

export default App;

1.4 组件

React中的组件是构成UI的基本单位，可以分为函数式组件和类组件。

函数式组件：

import React from 'react';

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

export default Welcome;

类组件：

import React from 'react';

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

export default Welcome;

第二部分：React进阶

2.1 状态管理

React中，组件的状态是存储在组件内部的数据。可以使用state属性来管理组件的状态。

import React, { useState } from 'react';

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

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

export default Counter;

2.2 生命周期

React组件在其生命周期中会经历一系列的阶段，包括挂载、更新和卸载。

import React, { Component } from 'react';

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

  componentDidMount() {
    console.log('Component did mount');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component did update');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

export default Lifecycle;

2.3 高阶组件（HOC）

高阶组件是接受一个组件作为参数，并返回一个新的组件的函数。

import React from 'react';

function withCount(WrappedComponent) {
  return function WithCount(props) {
    return <WrappedComponent count={0} {...props} />;
  };
}

export default withCount;

第三部分：React常用库和工具

3.1 Redux

Redux是一个用于管理应用程序状态的库，它将状态存储在全局的store中。

import { createStore } from 'redux';

const initialState = {
  count: 0
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { count: 1 }

3.2 React Router

React Router是一个用于构建单页应用的库，它允许你在不同的组件之间进行路由。

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

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

3.3 React Hooks

React Hooks允许你在不编写类的情况下使用state和其它React特性。

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

function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

第四部分：实战项目

4.1 项目结构

一个典型的React项目可以分为以下几个部分：

  • src：源代码目录
    • components：组件目录
    • actions：异步操作目录
    • reducers：状态管理目录
    • store：Redux store目录
    • App.js：入口文件
  • public：公共资源目录
    • index.html：入口HTML文件
    • index.js：入口JavaScript文件
    • robots.txt：爬虫配置文件

4.2 实战项目：待办事项列表

创建一个待办事项列表，包括添加待办事项、删除待办事项和完成待办事项等功能。

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

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

  const addTodo = text => {
    const newTodos = [...todos, { text, completed: false }];
    setTodos(newTodos);
  };

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

  const completeTodo = index => {
    const newTodos = todos.map((todo, i) => {
      if (i === index) {
        return { ...todo, completed: !todo.completed };
      }
      return todo;
    });
    setTodos(newTodos);
  };

  return (
    <div className="App">
      <h1>Todo List</h1>
      <input type="text" placeholder="Add a todo..." />
      <button onClick={() => addTodo(todos[todos.length - 1].text)}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => completeTodo(index)}
            />
            {todo.text}
            <button onClick={() => removeTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

总结

React是一个功能强大的JavaScript库，它可以帮助你构建高效、可维护的用户界面。通过学习本文档，你将掌握React的基本概念、组件、状态管理、生命周期、常用库和工具，以及如何构建一个实战项目。希望这份攻略能够帮助你快速入门React框架！

-- 展开阅读全文 --