没有合适的资源?快使用搜索试试~ 我知道了~
首页React实战指南:构建高效web应用
"《React Up & Running:构建富Web应用实战》是一本由Yahoo!网页开发者Stoyan Stefanov撰写的实用指南,它旨在帮助读者快速理解和掌握Facebook开源的React技术。本书适合对基本JavaScript语法有一定了解的开发人员,将带你步入React的世界,学习如何构建组件,这些是React应用的基本构建块。 书中首先会引导你设置React环境,并编写第一个“Hello World” web应用,让你熟悉其基本工作原理。然后,作者将深入介绍如何使用自定义React组件与DOM组件并行工作,展示如何创建一个功能强大的数据表格组件,支持编辑、排序、搜索和导出功能。JSX语法扩展也会被作为函数调用的替代方案进行讲解。 在技术层面,你将学习如何搭建一个轻量级、专注于React的构建过程,以优化开发效率。此外,你还将学会如何构建一个完整的定制应用程序,实现在客户端存储数据,这在现代Web应用中至关重要。随着应用的迭代,你将学习如何利用ESLint、Flow和Jest等工具进行代码检查和测试,确保代码质量和可维护性。 最后,作者会探讨组件间的通信,通过Flux架构管理状态,让你理解如何在大型项目中有效地组织和协调组件间的行为。《React Up & Running》不仅提供理论知识,还包含丰富的实践项目,使读者能够迅速将所学应用到实际工作中,从而成为Web应用开发领域的专家,深刻理解为何许多开发者认为React是构建高效web应用的关键技术。"
资源详情
资源推荐
![](https://csdnimg.cn/release/download_crawler_static/10279259/bg10.jpg)
// COUNTEREXAMPLE
// this doesn't work
React.DOM.h1(
{
style: "background: black; color: white; font-family: Verdana"
},
"Hello world!"
);
// PROPER EXAMPLE
// this works
React.DOM.h1(
{
style: {
background: "black",
color: "white",
fontFamily: "Verdana"
}
},
"Hello world!"
);
Also notice that you need to the use the JavaScript API names when dealing with CSS
properties, in other words use fontFamily as opposed to font-family.
Next: custom components
And this wraps the barebone “hello world” app. Now you know how to:
• Install, setup and use the React library (it’s really just a question of <script
src="react/build/react.js">)
• Render a React component in a DOM location of your choice (React.render(re
actWhat, domWhere))
• Use built-in components which are wrappers over regular DOM elements (e.g.
React.DOM.div(attributes, children))
The real power of React though comes from the use of custom components to build
(and update!) the UI of your app. Let’s how to do just that in the next chapter.
Next: custom components | 9
![](https://csdnimg.cn/release/download_crawler_static/10279259/bg12.jpg)
CHAPTER 2
The life of a component
Now that you know how to use the ready-made DOM components, it’s time to learn
how to make some of your own.
Bare minimum
The API to create a new component looks like this:
var MyComponent = React.createClass({
/* specs */
});
The “specs” is a JavaScript object that has one required method render() and a number
of optional methods and properties. A bare-bone example could look something like
this:
var Component = React.createClass({
render: function() {
return React.DOM.span(null, "I'm so custom");
}
});
As you can see, the only thing you must do is implement the render() method. This
method must return a React component, that’s why you see the span in the snippet
above.
Using your component in an application is similar to using the DOM components:
React.render(
React.createElement(Component),
document.getElementById("app")
);
The result of rendering your custom component is shown on Figure 2-1.
11
![](https://csdnimg.cn/release/download_crawler_static/10279259/bg13.jpg)
Figure 2-1. Your first custom component
The React.createElement() is one way to create an “instance” of your component.
Another way, if you’ll be creating several instances, is to create a factory:
var ComponentFactory = React.createFactory(Component);
React.render(
ComponentFactory(),
document.getElementById("app")
);
12 | Chapter 2: The life of a component
![](https://csdnimg.cn/release/download_crawler_static/10279259/bg14.jpg)
Note that the React.DOM.* methods you already know of are actually just convenience
wrappers around React.createElement(). In other words, this code also works with
DOM components:
React.render(
React.createElement("span", null, "Hello"),
document.getElementById("app")
);
As you can see, the DOM elements are defined as strings as opposed to JavaScript
functions as is the case with custom components.
Properties
Your components can take properties and render or behave differently, depending on
the values of the properties. All properties are available via this.props object. Let’s see
an example.
var Component = React.createClass({
render: function() {
return React.DOM.span(null, "My name is " + this.props.name);
}
});
Passing the property when rendering the component looks like:
React.render(
React.createElement(Component, {
name: "Bob"
}),
document.getElementById("app")
);
The result is shown on Figure 2-2.
Properties | 13
剩余96页未读,继续阅读
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![azw3](https://img-home.csdnimg.cn/images/20210720083646.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/16c5aae99dcf4b5388fa39c9736c8345_i_fisher.jpg!1)
i_fisher
- 粉丝: 2
- 资源: 42
上传资源 快速赚钱
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
会员权益专享
最新资源
- 电力电子系统建模与控制入门
- SQL数据库基础入门:发展历程与关键概念
- DC/DC变换器动态建模与控制方法解析
- 市***专有云IaaS服务:云主机与数据库解决方案
- 紫鸟数据魔方:跨境电商选品神器,助力爆款打造
- 电力电子技术:DC-DC变换器动态模型与控制
- 视觉与实用并重:跨境电商产品开发的六重价值策略
- VB.NET三层架构下的数据库应用程序开发
- 跨境电商产品开发:关键词策略与用户痛点挖掘
- VC-MFC数据库编程技巧与实现
- 亚马逊新品开发策略:选品与市场研究
- 数据库基础知识:从数据到Visual FoxPro应用
- 计算机专业实习经验与项目总结
- Sparkle家族轻量级加密与哈希:提升IoT设备数据安全性
- SQL数据库期末考试精选题与答案解析
- H3C规模数据融合:技术探讨与应用案例解析
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![](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)