pro-react.github.io/index.html at master · pro-react/pro-react.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<!--Page Title-->
<title>Pro React</title>

<!--Device Width Check-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

<!--Meta Keywords and Description-->
<meta name="keywords" content="react, react.js">
<meta name="description" content="Pro React book companion site">

<!--Favicon-->
<link rel="shortcut icon" href="images/favicon.ico" title="Favicon" />

<!--Fixes for Internet Explorer CSS3 and HTML5-->
<!--[if gte IE 9]>
<style type="text/css">
	.gradient { filter: none!important;}
</style>
<![endif]-->

<!--[if lt IE 9]>
<script>
  'article aside footer header nav section time'.replace(/\w+/g,function(n){document.createElement(n)})
</script>
<![endif]-->

<!--Main CSS-->
<link rel="stylesheet" href="css/style.css" media="screen, projection">

<!--[if lt IE 9]>
<link rel="stylesheet" href="css/style_ie8.css" media="screen, projection">
<![endif]-->

<!--Icon Fonts-->
<link rel="stylesheet" href="css/font-awesome.min.css">

<!--Google Webfonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,300,600' rel='stylesheet' type='text/css'>

</head>
<body>
<header role="contentinfo">
  <div id="page_header" class="row">
  <!--Start of Header Logo-->
  <div id="logo" class="one_half">
  <h1><img src="images/logo.png" alt="Pro React" title="Pro React book companion site" height="40" width="40"/>Pro React</h1>
  <h2>The “Pro Level” React book</h2>
  </div>
  <!--End of Header Logo-->
  <div id="page_menu" class="one_half last">
  <ul>
    <li><strong>About the Book</strong></li> |
    <li><a href="/materials">Online Materials</a></li> |
    <li><a href="https://www.youtube.com/channel/UCZkjWyyLvzWeoVWEpRemrDQ"><span class="new">React Casts</span> <small>Weekly tips & tutorials.</small></a></li>
  </ul>
  </div>

  </div>
</header>

<!--Start of Product Banner-->
<section id="banner" role="banner">
<div class="row">

<!--Start of Product Image-->
<div id="shelf" class="one_half">
<img src="images/book.jpg" height="445" width="331" alt="Book"/>
<a href="#" data-reveal-id="sampleModal" id="look"><img class="look_inside" src="images/look-inside-icon.png" height="46" width="150" alt="Look Inside"/></a>

</div>
<!--End of Product Image-->

<!--Start of Product Banner Description-->
<div class="one_half last">
<!--Start of Banner Title-->
<h1>Pro React Book</h1>
<h2 class="subheader">The book teaches you how to use React completely, and learn best practices for creating interfaces in a composable way.</h2>
<!--End of Banner Title-->

<p>Additionaly, It also covers tools and libraries in the React ecosystem (such as React Router and Flux/Redux architectures). Each topic is covered clearly and concisely and is packed with the details you need to learn to be truly effective.</p>

<!--Start of Buy Button-->
<div class="button_buy">
<a rel="nofollow" href="http://www.amazon.com/gp/product/1484212614/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1484212614&linkCode=as2&tag=prorea-20&linkId=VSP2I6P7X5RC23NB"><span class="button_text">Buy Book</span></a><img src="http://ir-na.amazon-adsystem.com/e/ir?t=prorea-20&l=as2&o=1&a=1484212614" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

<p class="hint">Paperback and eBook versions avaliable</p>
</div>
<!--End of Buy Button-->

</div>
<!--End of Product Banner Description-->

</div>
</section>
<!--End of Product Banner-->

<!--Start of Main Content-->
<article role="main">
<div id="main_content">


<!--Start of Features-->
<section id="features">
<div class="row">

<!--Start of Features List-->
<ul>
<li class="one_half"><i class="fa fa-cubes fa-4x icon-4x"></i>
<h4>Complete</h4><p>Covers React in depth, including component composition, routing, animations, drag-n-drop, Flux and Redux, universal apps, performance tuning and testing.</p></li>
<li class="one_half last"><i class="fa fa-calendar fa-4x icon-4x"></i>
<h4>Up-to-date</h4><p>Keep updated with <a href="/materials">online appendixes and upgraded material</a>.</p></li>
<li class="one_half"><i class="fa fa-gears fa-4x icon-4x"></i>
<h4>Tools of  the trade</h4><p>The book uses Webpack and ESS2015 with Babel 6 - the most up-to-date and recommended setup used by React developers.</p></li>
<li class="one_half last"><i class="fa fa-cloud fa-4x icon-4x"></i>
<h4>Online API</h4><p>Download the server source code or develop using the freely available APIs for the exercises and sample codes in the book.</p></li>
</ul>
<!--End of Features List-->
</div>
</section>
<!--End of Features-->


<!--Start of Testimonials-->
<section id="testimonials" class="background_grey">
<div class="row">

<!--Start of Testimonial-->
<blockquote class="one_third">
<q>Pro React is the book I wish I had when I first started learning React/JS.<br/>Cassio does a fantastic job at introducing and explaining some of the key React concepts that took me digging through tons of blog posts to learn.<br/>I highly recommend picking this book up.</q>
<footer>
<img src="images/testimonial_spencer.jpg" height="60" width="60" alt="Spencer Dixon"/>
<div>Spencer Dixon</div>
Software Engineer
</footer>
</blockquote>
<!--End of Testimonial-->


<!--Start of Testimonial-->
<blockquote class="one_third ">
<q>I have read a lot of software books, and this is one of the best. React comes in lots of little bits, which makes difficult to understand the whole system. The book did cover all of the steps but it also has sections on architecture, strategies and best practices. It is a really comprehensive resource.</q>
<footer>
<img src="images/testimonial_jon.jpg" height="60" width="60" alt="Arthur Debert"/>
<div>Jon Smith</div>
Software Architect
</footer>
</blockquote>
<!--End of Testimonial-->

<!--Start of Testimonial-->
<blockquote class="one_third last">
<q>This is an outstanding dive into React.<br/>The coverage of each topic is very well designed:<br/>He initially makes a simple example, just to show the underlying concept bereft of any un-needed complexity, and then follows it up with a much more complex and realistic scenario.</q>
<footer>
<img src="images/testimonial_adam.jpg" height="60" width="60" alt="Adam Rackis"/>
<div>Adam Rackis</div>
Software Engineer
</footer>
</blockquote>
<!--End of Testimonial-->


</div>
</section>
<!--End of Testimonials-->

<section class="background_white">
  <div class="row">

    <div class="two_thirds">
      <img src="images/kanban.jpg" alt="eBook Landing Page" height="293" width="620">
    </div>

    <!--Start How it Works-->
    <div class="one_third last">
      <h2>Dozens of code samples</h2>
      <h3>Plus a full featured <strong>kanban</strong> style app built throughout the book</h3>

      <p>Take a look at the source code at the book's  <a href="https://github.com/pro-react/">GitHub</a> page.</p>

    </div>
    <!--End of How it Works-->
  </div>
</section>


<!--Start of A Word from the Author-->
<section id="author" class="background_grey">
<div class="row">
<div class="one_half">

<!--Author Avatar-->
<img src="images/author.jpg" height="100" width="100" id="author_image" class="left" alt="Author" />
<!--End of Author Avatar-->

<div class="one_third last">

<h2>About the Author</h2>

<p>Cássio de Souza Antonio started programming 20 years ago with a Sinclair Spectrum and has since built a career as software engineer and technical manager in Brazil and USA.</p>

<p>He has developed and contributed to projects for major brands such as Microsoft, Coca-Cola, Unilever, and HSBC, among others.</p>

<p>His startup was acquired in late 2014. Currently Cássio works as a consultant. You can follow him on Twitter (<a href="https://twitter.com/cassiozen">@cassiozen</a>)</p>

</div>
</div>

<div id="book_cover" class="one_half last">

<!--Start of Book Cover-->
<img src="images/book_content.png" alt="eBook Landing Page" height="350" width="277"/>
<!--End of Book Cover-->

</div>

</div>
</section>
<!--End of A Word from the Author-->


</div>
</article>
<!--End of Main Content-->

<div id="sampleModal" class="reveal-modal large" data-reveal aria-labelledby="lookinside" aria-hidden="true" role="dialog">
  <iframe width="610" height="670" src="preview.html" frameborder="0"></iframe>
  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

<!-- Included JS Files (Compressed) -->
<script src="js/foundation.min.js"></script>
<script src="js/phrases.js"></script>
<script src="js/site.min.js"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-71895199-1', 'auto');
  ga('send', 'pageview');

</script>
</body>
</html>