掌握React框架：构建高效用户界面

需积分: 10 95 浏览量更新于2024-07-21 3 收藏 1.68MB PDF 举报

《React入门指南》是一本由Cory Gackenheimer编写的教程，专为Web开发人员设计，特别是那些熟悉JavaScript和CSS的开发者。本书旨在教授如何使用Facebook开发者团队创建的React框架，以高效地构建复杂用户界面，并确保其一致性与可维护性。在《Introduction to React》中，读者将深入理解React的核心API及其特定扩展语言JSX。JSX简化了React组件的编写，使代码更易于理解和维护。作者会引导你学习如何构建React web应用，包括组件的构建和组织、以及如何将现有UI与React集成。章节内容涵盖了React的基础概念，如： 1. **React是什么**：介绍React的基本理念和它在前端开发中的角色，以及它为何能解决复杂的UI问题。 2. **React的核心**：探讨React组件、虚拟DOM和生命周期方法等核心概念，让你对React的工作原理有深入理解。 3. **JSX基础**：讲解JSX语法，它是React组件的一种简洁的JavaScript扩展，用于描述UI结构。 4. **构建React web应用**：通过实际项目演示如何搭建项目结构，配置工具链，以及编写基本的React组件。 5. **Flux入门**：引入Flux作为React应用架构，帮助你管理应用程序状态，确保数据流的单一来源原则。 6. **利用Flux构建应用**：展示如何使用Flux库（如Redux）来设计和组织React应用的结构，以提高效率和可维护性。此书适合希望通过学习React提升前端开发技能的开发者，无论你是初学者还是有一定经验的工程师，都能从中收获关于React开发的实用知识和最佳实践。阅读本书后，你将能够熟练运用React构建高质量的用户界面，并为自己的项目打下坚实的基础。务必注意版权规定，获取Springer或相关出版机构的许可才能复制或传播该作品的内容。

Chapter 1 ■ What Is reaCt?

React Is Not Just Another Framework

In many cases when you learn something, you first need to realize what the thing is that

you are learning. In the case of React, it can be helpful to learn which concepts are not

parts of the React framework. This will help you understand which standard practices

you have learned need to be unlearned, or at least need to be set aside, in order to fully

understand the concepts of a new framework such as React. So what is it that makes React

different and why is it important?

Many argue that React is a full-scale JavaScript framework on a level that compares

to other frameworks such as Backbone, Knockout.js, AngularJS, Ember, CanJS, Dojo, or

any of the numerous MVC frameworks that exist. Figure1-1 shows an example of a typical

MVC framework.

Figure 1-1. A basic MVC architecture

Figure1-1 shows the basics of each of the components in a Model-View-Controller

architecture. The model handles the state of the application and sends state-changing

events to the view. The view is the user-facing look and interaction interface to the end

user. The view can send events to the controller, and in some cases to the model. The

controller is the main dispatcher of events, which can be sent to the model, to update

state, and the view to update the presentation. You may note that this is a generic

representation of what an MVC architecture is, and in reality there are so many variants

and customized implementations that there is no single MVC architecture. The point isn’t

to state what an MVC structure looks like, but to point out what React is not.

This MVC structure is actually not a fair assessment of what React is or intends to be.

That is because React is one particular piece of what these frameworks present. React is

in its simplest form, just the view of these MVC, MVVM, or MV* frameworks. As you saw

in the previous section, React is a way to describe the user interface of an application and

a mechanism to change that over time as data changes. React is made with declarative

components that describe an interface. React uses no observable data binding when

building an application. React is also easy to manipulate, because you can take the

components you create and combine them to make custom components that work as

you expect every time because it can scale. React can scale better than other frameworks

because of the principles that drove it from its creation. When creating React interfaces,

you structure them in such as way that they are built out of multiple components.

Chapter 1 ■ What Is reaCt?

Let’s pause for a minute and examine the most basic structure of several frameworks

and then compare them to React in order to highlight the differences. For each of the

frameworks, you will examine the most basic to-do list applications as they are created

for the http://todomvc.com web site. I am not going to deride other frameworks because

they all serve a purpose. Instead I attempt to demonstrate how React is structured

compared to the others. I showcase just the important parts to highlight and limit a

complete recreation of the application here. If you want to see the full examples, the links

to the source are included. Try not to become too focused on the implementation details

of any of these examples, including the React example, because as you progress through

this book the concepts will be covered thoroughly and will help you understand what is

going on completely.

Ember.js

Ember.js is a popular framework that utilizes a MVC framework composed of views in

the form of handlebars templates. In this section, note that there is a bit of work to do in

order to facilitate the integration of the templates, models, and controllers. This is not

to say that Ember.js is a bad framework, because modification is a byproduct of such a

framework.

In Listing 1-1, which is the body of the TodoMVC Ember.js example, you see that the

markup consists of two handlebars templates for the to-do list and the to-dos.

Listing 1-1. Body of TodoMVC with Ember.js

<body>

/* Handlebars todo-list template */

</script>

/* Handlebars todos template */

</script>

adapter.js"></script>

</body>

剩余140页未读，继续阅读

ramissue

粉丝: 354
资源: 1487

掌握React框架：构建高效用户界面

JavaScript Applications with Node.js, React, React Native and MongoDB

Introduction to React(Apress,2015)

meet-js-introduction-to-react

react-introduction-to-react-router-houston-web-051319

react-introduction-to-react-router-denver-web-060319

introduction_to_react:它是基于Cory Gackenheimer撰写的《 Retroduction to React》一书的练习文件夹

react-introduction-to-react-router-wework-eng-11-17

react-introduction-to-react-router-re-coded-gaziantep-2019

introduction-to-react-hooks:用CodeSandbox创建

introduction-to-building-front-end-applications-with-react-g-416

最新资源