如何从零基础成为一名中级 React 开发人员

介绍

这是一套完整的 React 速成教程系列，内容涵盖最新的 React Hooks 及所有相关功能……

在本教程中，我展示了React JS 的更多重要概念，并完成了 3 个使用 React JS 的项目。让我们一起深入学习 React 吧！

最终作品集网站演示

在深入学习视频系列之前，您可以先查看我们基于该视频教程开发的 React 项目作品集网站：https://maniruzzamanakash.github.io/React-Crash-Course

完整速成课程视频

完整教程

https://devsenv.com/tutorials/learn-react-complete-crash-course-with-three-complete-project-devsenv

本 React JS 速成课程讨论的主题

开始的前提条件

1. 使用 Better Code Snippet 设置 Visual Studio Code 编辑器 — https://devsenv.com/tutorials/3-enable-additional-plugins-for-better-react-development-react-basic-to-pro-series

2. JavaScript 基础知识 — https://www.w3schools.com/js
   ES6 基础知识 -

3. Let、Const、Var 的区别及更多 — https://devsenv.com/tutorials/4-let-vs-const-vs-var-clear-the-es6-concepts-and-makes-simpler-path-to-learn-react

4. ES6 箭头函数 — https://devsenv.com/tutorials/5-es6-basic-arrow-function-in-javascript-react-basic-to-pro

5. 虚拟 DOM 的工作原理 — https://devsenv.com/tutorials/7-how-react-work-%7C-real-dom-vs-virtual-dom-%7C-coding-structure-%7C-naming-convention

6. 什么是 React 以及它的作用
   a) React 是一个 UI 库。它由 Facebook 开发，现在被数百万开发者使用。
   b) 它负责创建动态页面，并使前端界面更加出色。

如何设置 React

安装 Node.js — https://nodejs.org/en/
Create-React-App (CRA) 安装 —
https://reactjs.org/docs/create-a-new-react-app.html

npx create-react-app my-app

React 中的组件是什么？

React 完全基于组件。
组件是 UI 的一个最小组成部分。
它只是一个库，而不是任何 JavaScript 框架。它只处理视图部分。

React 中使用了什么？

JavaScript
JSX 元素

React 中有多少个组件

a) 基于类的组件
b) 函数式组件

基于类的组件

演示类基础组件

功能组件

演示功能组件

基于类的组件状态管理和重要的生命周期钩子

this.state = {
 data: 'Hello'
}
componentDidMount();

React中的Hooks

useState()
useEffect()
useMemo()
useContext()
useReducer()
useCallback()

React 中的组件间通信

父组件传递给子组件的 props
子组件传递给父组件的 onHandleClick

React JS 中的样式和外部样式

CSS
模块化CSS
Bootstrap CSS

React中的条件渲染

在条件渲染中查看数据

在 React 中遍历数据

遍历任务列表数据

React中的输入处理

完成任务表和
任务清单

用 React 编写的简单计数器应用程序

简单增减计数器项目

React 中的简单联系表单

与任务标题输入表概念相同

React Router 设置

React Router 快速入门 — https://reactrouter.com/web/guides/quick-start

使用 React 和虚假数据完成一个作品集网站。

1. 演示网站作品集链接 — https://akash.devsenv.com
2. 演示虚假数据列表 -
3. 使用 React Bootstrap
4. 使用 React 构建作品集网站主页的主布局
5. 作品集页面
6. 关于页面

从 Github 下载项目

https://github.com/ManiruzzamanAkash/React-Crash-Course.git

你可以根据主题获取他们的代码课程。