React入门 学习全记录(适合和我一样有Vue经验想学习react的同学~)

**React 入门学习记录**

作为一个有 Vue 经验的开发者，转向 React 可能会有一些挑战。但是，通过一步步的学习和实践，你也可以成为一名熟练的 React 开发者。下面是一份我的学习记录，希望对你有所帮助。

**第一步：了解 React 的基本概念**

React 是一个 JavaScript 库，用于构建用户界面的组件。它的核心思想是将 UI 分割成小的、独立的组件，每个组件负责渲染一部分 UI。

###1.1 JSXReact 使用 JSX 来描述 UI 组件。JSX 是一种 JavaScript 的扩展语法，允许在 JavaScript 中使用 HTML代码。

jsx// Hello.jsimport React from 'react';

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

export default Hello;

###1.2 组件组件是 React 的基本单位。每个组件都有一个 `render` 方法，用于渲染 UI。

jsx// Counter.jsimport React from 'react';

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

 return (
 <div>
 <p>Count: {count}</p>
 <button onClick={() => setCount(count +1)}>+</button>
 </div>
 );
}

export default Counter;

###1.3 组件的生命周期组件有几个重要的生命周期方法，用于处理组件的创建、更新和销毁。

jsx// Lifecycle.jsimport React, { useState } from 'react';

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

 React.useEffect(() => {
 console.log('Component mounted');
 }, []);

 React.useEffect(() => {
 console.log('Count updated to', count);
 }, [count]);

 return (
 <div>
 <p>Count: {count}</p>
 <button onClick={() => setCount(count +1)}>+</button>
 </div>
 );
}

export default Lifecycle;

**第二步：学习 React Hooks**

React Hooks 是一个用于在函数组件中使用状态和其他 React 特性的一种机制。

###2.1 useState`useState` 是一个 Hook，用于在函数组件中使用状态。

jsx// UseState.jsimport React, { useState } from 'react';

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

 return (
 <div>
 <p>Count: {count}</p>
 <button onClick={() => setCount(count +1)}>+</button>
 </div>
 );
}

export default UseState;

###2.2 useEffect`useEffect` 是一个 Hook，用于在组件更新或销毁时执行副作用。

jsx// UseEffect.jsimport React, { useState, useEffect } from 'react';

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

 useEffect(() => {
 console.log('Component updated to', count);
 }, [count]);

 return (
 <div>
 <p>Count: {count}</p>
 <button onClick={() => setCount(count +1)}>+</button>
 </div>
 );
}

export default UseEffect;

**第三步：学习 React Router**

React Router 是一个用于在 React 应用中实现客户端路由的一种机制。

###3.1 BrowserRouter`BrowserRouter` 是一个高级路由器，用于在浏览器中实现客户端路由。

jsx// App.jsimport React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App() {
 return (
 
 
 
 
 
 
 );
}

export default App;

###3.2 Route`Route` 是一个用于匹配 URL 的组件。

jsx// Home.jsimport React from 'react';

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

export default Home;

**第四步：学习 Redux**

Redux 是一个用于管理状态的库，用于在大型应用中实现集中式状态管理。

###4.1 createStore`createStore` 是一个函数，用于创建一个 Redux 状态仓库。

jsx// store.jsimport { 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;
 }
}

export const store = createStore(reducer);

###4.2 connect`connect` 是一个函数，用于连接组件到 Redux 状态仓库。

jsx// Counter.jsimport React from 'react';
import { connect } from 'react-redux';

function Counter({ count, onIncrement }) {
 return (
 <div>
 <p>Count: {count}</p>
 <button onClick={onIncrement}>+</button>
 </div>
 );
}

export default connect(
 (state) => ({ count: state.count }),
 (dispatch) => ({ onIncrement: () => dispatch({ type: 'INCREMENT' }) })
)(Counter);

以上就是我的 React 入门学习记录。希望这些内容对你有所帮助。