没有合适的资源?快使用搜索试试~ 我知道了~
首页深度探索Pro React:构建复杂前端应用的最佳实践
深度探索Pro React:构建复杂前端应用的最佳实践
![](https://csdnimg.cn/release/wenkucmsfe/public/img/star.98a08eaa.png)
"Pro React 14842126是一本深入讲解React库的专业指南,专为帮助开发者构建复杂前端应用程序和用户界面而设计。作者Cássiode Sousa Antonio以其丰富的经验,引导读者掌握React的最佳实践,以模块化方式构建交互式界面。本书详细探讨了React的核心概念,包括第1章的入门,让读者了解如何从零开始;第2章深入DOM抽象,解释React如何与DOM交互;第3章讲述如何通过组件架构来组织应用程序,确保代码的可重用性和可维护性。 第4章专门讨论高级交互技术,使读者能够实现更复杂的用户行为。第5章涉及路由管理,帮助开发者在单页应用中实现页面间导航。接着,第6章介绍了Flux架构在React中的应用,强调状态管理的重要性。性能优化在第7章中被详细剖析,以便创建响应迅速的应用程序。 随着现代前端需求的扩展,第8章探讨了同构React应用(Isomorphic React),以及如何利用服务器端渲染提高SEO和性能。最后,第9章关注测试React组件,确保代码质量和可维护性。 本书适合那些有jQuery或其他JavaScript框架基础,但寻求解决复杂应用结构问题的开发者。通过阅读和实践本书,读者将能像专业开发者一样高效地使用React,提升自己的技能库,并避免常见问题。版权信息表明,所有内容受版权保护,未经Springer出版社许可,不得擅自复制或传播。对于教育和学术用途,须遵循版权法相关规定。"
资源详情
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/9433411/bg10.jpg)
xx
■ IntroduCtIon
Who This Book Is For
The content in this book is intended for intermediate level JavaScript developers, programmers that already
have experience creating front-end apps using some jQuery or maybe even some Backbone/Angular, and
who need better tools and knowledge to solve the increasingly common problem of structuring complex
front-end applications.
Source Code
The code for the examples shown in this book is available online in the Source Code section of the Apress
web site. Visit www.apress.com, click Source Code, and look for this book’s title. You can also download the
source code from this book’s home page. In addition, all the sample code and some practical extras are
available on GitHub (pro-react.github.io).
Contacting the Author
Thank you for buying this book. I hope you enjoy reading it and that you find it a valuable resource. I welcome
your personal feedback, questions, and comments regarding this book’s content and source code. You can
contact me at proreactbook@gmail.com.
Good luck! I am looking forward to your React applications!
![](https://csdnimg.cn/release/download_crawler_static/9433411/bg11.jpg)
1
Chapter 1
Getting Started
React is an open-source project created by Facebook. It offers a novel approach towards building user
interfaces in JavaScript. Since its initial public release, the library has experienced a fast adoption rate and
has created a vibrant community around it.
Over the course of the book, you will learn everything you need to know to get the benefits of React in
your projects. since React is only concerned about rendering the UI and makes no assumptions about the
rest of your technology stack, this book will you walk through the routing and application architectures that
fit in the library’s patterns.
In this chapter, we will go through a few topics at a high level so you can start building applications as
quickly as possible. The topics we’ll cover include the following:
• A complete definition of React and an overview of its benefits
• How to use JSX, a JavaScript syntax extension used in React for expressing UI
• How to create React components, complete with props and state
Before You Get Started
React fits in the modern JavaScript development ecosystem. To code along with the examples in this book,
you will need to have Node.js and npm installed. You should also be familiar with functional JavaScript
paradigms as well as some of the language’s newest features, such as arrow functions and classes.
Node.js and npm
JavaScript was born to run on the browser, but Node.js makes it possible to run JavaScript programs on
your local computer and on a server through its open source command line tool. Together with npm (Node
Package Manager), Node.js has become invaluable for local development of JavaScript-heavy applications,
allowing a developer to create scripts for running tasks (such as copying and moving files or starting a local
development server, for example) and to automatically download dependencies.
If you don’t have Node.js installed, take your time to install it now by downloading the installer for
Windows, Mac or Linux at https://nodejs.org/.
JavaScript ES6
JavaScript is a live language that has been evolving over the years. Recently the community agreed on a set of
improvements for the language. Some of the most recent browsers have already implemented such features,
and the React community makes extensive use of them (arrow functions, classes, and the spread operator, to
![](https://csdnimg.cn/release/download_crawler_static/9433411/bg12.jpg)
Chapter 1 ■ GettinG Started
2
name a few). React also encourages the use of functional patterns in JavaScript, so it’s important that you’re
familiar with how functions and context works in the language and that you understand methods such as
map, reduce, and assign. If you are a little hazy on some of these details, online appendixes on these subjects
are provided on the Apress website (www.apress.com/) and on the book’s GitHub page
(http://pro-react.github.io/).
Defining React
To get a clear understanding of what exactly React is, I like to define it as this:
React is an engine for building composable user interfaces using JavaScript and (optionally) XML.
Let’s break down this statement to analyze each part:
React is an engine: React’s site defines it as a library, but I like to use the term
“engine” because it helps convey one of React’s core strengths: its approach to
reactive UI rendering. This approach separates state (all the internal data that
defines the application at a given point in time) from the UI presented to the user.
With React, you declare how state is represented as visual elements of the DOM
and from then on the DOM is automatically updated to reflect state changes.
The term “engine” was first used to describe React by Justin Deal because it
reminded him of the similarity between reactive rendering and the way game
engines work (https://zapier.com/engineering/react-js-tutorial-guide-
gotchas/).
for creating composable user interfaces: Reducing the complexity of creating
and maintaining user interfaces is at the heart of React. It embraces the concept
of breaking the UI into components, self-contained concern-specific building
blocks, which are easy to reuse, extend, and maintain.
using JavaScript and (optionally) XML: React is a pure JavaScript library that
can be used on the browser, the server, and mobile devices. As you will see in this
chapter, it has an optional syntax that allows you to use XML to describe your UI.
As strange as it may look at first, it turns out that XML is great for describing user
interfaces: it’s declarative, it’s easy to spot the relationship between elements,
and it’s easy to visualize the overall structure of your UI.
React’s Benefits
There are a lot of JavaScript MVC frameworks out there. So why did Facebook build React and why would
you want to use it? In the next three sections, we’ll explore some of its benefits in order to answer this
question.
Reactive Rendering is Simple
In the early days of web development, way before the concept of single page applications, for every
interaction the user performed on a page (like hitting a button), a whole new page was sent from the server,
even if this new page was only a slightly different version of the page the user was on. That made for a
terrible experience from the point of view of the user, but for the developer it was very easy to plan what
exactly the user would see at a given interaction or a given point.
![](https://csdnimg.cn/release/download_crawler_static/9433411/bg13.jpg)
Chapter 1 ■ GettinG Started
3
Single page applications are constantly fetching new data and transforming parts of the DOM as the
user interacts. As interfaces grow more complex, it gets more and more complicated to examine the current
state of the application and make the necessary punctual changes on the DOM to update it.
One technique used by many JavaScript frameworks (especially before React appeared) to tackle this
increasing complexity and keep the interface in sync with state is data binding, but this approach comes
with disadvantages in maintainability, scalability, and performance.
Reactive rendering is easier to use than traditional data binding. It lets us write in a declarative way how
components should look and behave. And when the data changes, React conceptually renders the whole
interface again.
Since its not viable for performance reasons to actually trash and re-render the entire interface every time
state data changes, React uses an in-memory, lightweight representation of the DOM called “virtual DOM.”
Manipulating the in-memory representation of the DOM is faster and more efficient than manipulating
the real DOM. When the state of the application changes (as the result of an user interaction or data fetching,
for example) React quickly compares the current state of the UI with the desired state and computes the
minimal set of real DOM mutations to achieve it. This makes React very fast and efficient. React apps can
easily run at 60fps, even on mobile devices.
Component-Oriented Development Using Pure JavaScript
In a React application, everything is made of components, which are self-contained, concern-specific
building blocks. Developing applications using components allows a “divide and conquer” approach where
no particular part needs to be especially complex. They are kept small and because they can be combined,
it’s easy to create complex and more feature-rich components made of smaller components.
React components are written in plain JavaScript, instead of template languages or the HTML directives
traditionally used for web application UIs. This is for a good reason: templates can be limiting because they
dictate the full set of abstractions that you are allowed to use to build your UI. React’s use of a full-featured
programming language to render views is a big advantage to the ability to build abstractions.
Additionally, by being self-contained and using a unifying markup with its corresponding view logic,
React components lead to a separation of concerns. In the early days of the Web, different languages were
created to force a separation of concerns: HTML for content structure, CSS for styling, and JavaScript for
behavior. This separation worked very well when it was introduced because the pervading style of web page
at the time was a static presentation. But now that interfaces are magnitudes more interactive and complex,
display logic and markup have inevitably become tied together; the separation between markup, styling, and
JavaScript turned into just a separation of technologies, not a separation of concerns.
React assumes that display logic and markup are highly cohesive; they both show the UI and encourage
the separation of concerns by creating discrete, well-encapsulated, and reusable components for each concern.
Flexible Abstraction of the Document Model
React has its own lightweight representation of the UI that abstracts away the underlying document model.
The most notable advantage of this approach is that it enables the use of the same principles to render HTML
for the Web as well as native iOS and Android views. This abstraction also leads to other interesting points:
• Events behave in a consistent, standards-compliant way in all browsers and devices,
automatically using delegation.
• React components can be rendered on the server for SEO and perceived
performance.
![](https://csdnimg.cn/release/download_crawler_static/9433411/bg14.jpg)
Chapter 1 ■ GettinG Started
4
Building Your First React App
You now know that components are the building block of React UIs, but what do they look like? How do you
create one? At the bare minimum, a React component is simply a JavaScript class with a render method that
returns a description of the component’s UI, like so:
class Hello extends React.Component {
render() {
return (
<h1>Hello World</h1>
)
}
}
You probably noticed the HTML tags in the middle of the JavaScript code. As mentioned, React has a
syntax extension to JavaScript called JSX that lets us write XML (and consequently HTML) inline with code.
JSX is optional but it has been widely accepted as the standard way of defining UIs in React components
because of its declarative syntax, expressiveness, and the fact that it gets converted to plain JavaScript
function calls, means that it doesn’t alter the language semantics.
We will get in more detail about JSX in the next chapter, but the important thing to consider now is
that React requires a “transformation” step (or transpilation, if you will) where JSX gets transformed into
JavaScript.
In the modern JavaScript development ecosystem, there are a lot of tools that can handle this step. Let’s
take a moment to discuss how to set up a development workflow for React projects.
React Development Workflow
Long gone are the days where we could write all JavaScript in a single file, manually download one or two
JavaScript libraries, and glue everything together one a page. And while it’s certainly possible to download
or even copy and paste the React library as a minified JavaScript file and start running components
immediately, transforming JSX at runtime, nobody does this, except for small demos and prototypes.
In even the most basic scenarios, we want a development workflow that allow us to do the following:
• Write JSX and transform it into regular JavaScript on the fly
• Write code in a module pattern
• Manage dependencies
• Bundle JavaScript files and use source maps for debugging
With this in mind, the basic project structure for a React project contains the following:
1. A source folder, to contain all your JavaScript modules.
2. An index.html file. In React applications, the HTML page tends to be almost
empty. It is responsible only for loading the application’s JavaScript and
providing a div (or any other element, actually) that is used by React to render
the application’s components into.
剩余307页未读,继续阅读
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/e66324aa22894c0997bffffafc974f36_ramissue.jpg!1)
ramissue
- 粉丝: 354
- 资源: 1487
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- 计算机人脸表情动画技术发展综述
- 关系数据库的关键字搜索技术综述:模型、架构与未来趋势
- 迭代自适应逆滤波在语音情感识别中的应用
- 概念知识树在旅游领域智能分析中的应用
- 构建is-a层次与OWL本体集成:理论与算法
- 基于语义元的相似度计算方法研究:改进与有效性验证
- 网格梯度多密度聚类算法:去噪与高效聚类
- 网格服务工作流动态调度算法PGSWA研究
- 突发事件连锁反应网络模型与应急预警分析
- BA网络上的病毒营销与网站推广仿真研究
- 离散HSMM故障预测模型:有效提升系统状态预测
- 煤矿安全评价:信息融合与可拓理论的应用
- 多维度Petri网工作流模型MD_WFN:统一建模与应用研究
- 面向过程追踪的知识安全描述方法
- 基于收益的软件过程资源调度优化策略
- 多核环境下基于数据流Java的Web服务器优化实现提升性能
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)