学习React的旅程

需积分: 10 97 浏览量更新于2024-07-18 收藏 1.63MB PDF 举报

"学习React的旅程" 《The Road to Learn React》是一本专为那些想要深入理解React技术栈的开发者编写的指南。这本书旨在帮助初学者和有经验的开发者掌握React的核心概念，从而能够构建功能丰富的Web应用。作者Robin Wieruch鼓励读者通过实践和探索来学习React。 React是Facebook开发的一个流行的JavaScript库，用于构建用户界面，特别是单页应用程序（SPA）。React以其组件化、虚拟DOM和声明式编程风格而闻名，这使得开发人员能够高效地管理UI状态并优化性能。书中涵盖了以下关键知识点： 1. **React基础**：从“你好，我的名字是React”开始，作者介绍了React的基本理念和工作方式，让读者对React有一个直观的认识。 2. **环境配置**：书中详细讲解了如何设置开发环境，包括安装Node.js和npm，这是React开发所必需的工具。 3. **零配置设置**：介绍了一种快速启动项目的方法，允许开发者无需繁琐的配置就能开始编写React应用。 4. **JSX简介**：JSX是React中的一个语法糖，结合了HTML和JavaScript，使得编写UI代码更加简洁。书中阐述了JSX的基本用法和与ES6语法的结合。 5. **ES6特性**：React推荐使用ES6（ECMAScript 2015）的新特性，如`const`和`let`、箭头函数、类（classes）等，书中对此进行了深入的探讨。 6. **组件化编程**：React的核心是组件，书中有大量关于如何创建、组合和复用组件的内容，帮助读者理解React的模块化思想。 7. **内部组件状态**：讲解了如何在React组件中管理状态，这对于实现动态UI至关重要。 8. **单向数据流**：介绍了React应用中数据流动的基本原则，以及如何通过props将数据从父组件传递给子组件。 9. **事件处理**：讨论了React中事件绑定和处理事件的方式，以及如何处理表单和事件交互。 10. **ES6解构**：解构赋值是ES6的一个强大特性，书中展示了如何在React中利用它来简化代码。 11. **受控组件与非受控组件**：解释了在React中处理表单输入的两种方式，以及它们各自的优缺点。 12. **组件拆分**：提倡将大型组件拆分为小型、可复用的组件，以提高代码的可读性和可维护性。 13. **可组合组件**：展示了如何将组件设计得像乐高积木一样，可以自由组合以构建复杂的UI。此外，书中还包含前言、作者简介、推荐语、教育儿童的意义、常见问题解答、更新日志、阅读指南等内容，确保读者能够全面、系统地学习React。通过这本书，读者不仅可以学习到React的基本概念，还能了解到实际开发中的最佳实践，为成为一名熟练的React开发者打下坚实的基础。

Introduction to React 2

Hi, my name is React.

Why should you bother to learn React? In recent years single page applications (SPA

) have

become popular. Frameworks like Angular, Ember and Backbone helped JavaScript developers to

build modern web applications beyond the usage of vanilla JavaScript and jQuery. The list of

these popular solutions is not exhaustive. There exists a wide range of SPA frameworks. When

you consider the release dates, most of them are among the first generation of SPAs: Angular 2010,

Backbone 2010 and Ember 2011.

The initial React release was 2013 by Facebook. React is not an SPA framework but a view library. It

is the V in the MVC

(model view controller). It only enables you to render components as viewable

elements in a browser. Yet the whole ecosystem around React makes it possible to build single page

applications.

But why should you consider using React over the first generation of SPA frameworks? While the

first generation of frameworks tried to solve a lot of things at once, React only helps you to build

your view layer. It’s a library and not a framework. The idea behind it: Your view is a hierarchy of

composable components.

In React you can keep the focus on your view layer before you introduce more aspects to your

application. Every other aspect is another building block for your SPA. These building blocks are

essential to build a mature application. They come with two advantages.

First, you can learn the building blocks step by step. You don’t have to worry about understanding

them altogether. It is different from a framework that gives you every building block from the start.

This book focuses on React as the first building block. More building blocks follow eventually.

Second, all building blocks are interchangeable. It makes the ecosystem around React such an

innovative place. Multiple solutions are competing with each other. You can pick the most appealing

solution for you and your use case.

The first generation of SPA frameworks arrived at an enterprise level. They are more rigid. React

stays innovative and gets adopted by multiple tech thought leader companies like Airbnb, Netflix

and of course Facebook

. All of them invest in the future of React and are content with React and

the ecosystem itself.

React is probably one of the best choices for building modern web applications nowadays. It only

delivers the view layer, but the React ecosystem is a whole flexible and interchangeable framework

React has a slim API, an amazing ecosystem and a great community. You can read about my

experiences why I moved from Angular to React

. I highly recommend to have an understanding

why you would choose React over another framework or library. After all, everyone is keen to

experience where React will lead us in the next years.

https://en.wikipedia.org/wiki/Single-page_application

https://en.wikipedia.org/wiki/Modelâ€“viewâ€“controller

https://github.com/facebook/react/wiki/Sites-Using-React

https://www.robinwieruch.de/essential-react-libraries-framework/

https://www.robinwieruch.de/reasons-why-i-moved-from-angular-to-react/

Introduction to React 4

Requirements

If you are coming from a different SPA framework or library, you should already be familiar with the

basics of web development. If you have just started in web development, you should feel comfortable

with HTML, CSS and JavaScript ES5 to learn React. The book will smoothly transition to JavaScript

ES6 and beyond. I encourage you to join the official Slack Group

for the book to get help or to help

others.

Editor and Terminal

What about the development environment? You will need a running editor or IDE and terminal

(command line tool). You can follow my setup guide

. It is adjusted for MacOS users, but you can

substitute most of the tools for other operating system. There is a ton of articles out there that will

show you how to setup a web development environment in a more elaborated way for your OS.

Optionally, you can use git and GitHub on your own, while conducting the exercises in the book, to

keep your projects and the progress in repositories on GitHub. There exists a little guide

on how

to use these tools. But once again, it is not mandatory for the book and can be overwhelming when

learning everything from scratch. So you can skip it if you are a newcomer in web development to

focus on the essential parts taught in this book.

Node and NPM

Last but not least, you will need an installation of node and npm

. Both are used to manage libraries

you will need along the way. In this book, you will install external node packages via npm (node

package manager). These node packages can be libraries or whole frameworks.

You can verify your versions of node and npm on the command line. If you don’t get any output in

the terminal, you need to install node and npm first. These are only my versions during the time

writing this book:

Command Line

node --version

*v8.9.4

npm --version

*v5.6.0

https://slack-the-road-to-learn-react.wieruch.com/

https://www.robinwieruch.de/developer-setup/

https://www.robinwieruch.de/git-essential-commands/

https://nodejs.org/en/

Introduction to React 6

The -y flag is a shortcut to initialize all the defaults in your package.json. If you don’t use the flag,

you have to decide how to configure the file. After initializing your npm project you are good to

install new packages via npm install <package>.

One more word about the package.json. The file enables you to share your project with other

developers without sharing all the node packages. The file has all the references of node packages

used in your project. These packages are called dependencies. Everyone can copy your project

without the dependencies. The dependencies are references in the package.json. Someone who copies

your project can simply install all packages by using npm install on the command line. The npm

install script takes all the dependencies listed in the package.json file and installs them in the

node_modules/ folder.

I want to cover one more npm command:

Command Line

npm install --save-dev <package>

The --save-dev flag indicates that the node package is only used in the development environment.

It will not be used in production when you deploy your application on a server. What kind of node

package could that be? Imagine you want to test your application with the help of a node package.

You need to install that package via npm, but want to exclude it from your production environment.

Testing should only happen during the development process but not when your application is already

running in production. There you don’t want to test your application anymore. It should be tested

already and work out of the box for your users. That’s only one use case where you would want to

use the --save-dev flag.

You will encounter more npm commands on your way. But these will be sufficient for now.

Exercises:

• setup a throw away npm project

– create a new folder with mkdir <folder_name>

– navigate into the folder with cd <folder_name>

– execute npm init -y or npm init

– install a local package like React with npm install react

– have a look into the package.json file and the node_modules/ folder

– find out on your own how to uninstall the react node package again

• read more about npm

https://docs.npmjs.com/

剩余207页未读，继续阅读

jpsiyu

粉丝: 9
资源: 22

学习React的旅程

the-road-to-learn-react-chinese.pdf

road environment modeling using robust perspective analysis

the-road-to-react:React学习

The Road to learn React -- Ver. Feb 2018

Road to learn React

the_road_learn_react:预订《道学React》

the-road-to-learn-react-portuguese:学习React之路-葡萄牙语翻译

React Cookbook

react-firebase-chat：React Firebase聊天示例

react-usereducer-middleware:React的useReducer挂钩与中间件（和后件）

最新资源