دانلود کتاب React: Up & Running. Building Web Applications

فهرست مطالب :

Copyright
Table of Contents
Preface
About This Book
Conventions Used in This Book
Using Code Examples
O’Reilly Online Learning
How to Contact Us
Acknowledgments
Chapter 1. Hello World
Setup
Hello React World
What Just Happened?
React.createElement()
JSX
Setup Babel
Hello JSX World
On Transpilation
Next: Custom Components
Chapter 2. The Life of a Component
A Custom Function Component
A JSX Version
A Custom Class Component
Which Syntax to Use?
Properties
Properties in Function Components
Default Properties
State
A textarea Component
Make It Stateful
A Note on DOM Events
Event Handling in the Olden Days
Event Handling in React
Event-Handling Syntax
Props Versus State
Props in Initial State: an Antipattern
Accessing the Component from the Outside
Lifecycle Methods
Lifecycle Example: Log It All
Paranoid State Protection
Lifecycle Example: Using a Child Component
Performance Win: Prevent Component Updates
Whatever Happened to Function Components?
Chapter 3. Excel: A Fancy Table Component
Data First
Table Headers Loop
Table Headers Loop, a Terse Version
Debugging the Console Warning
Adding Content
Prop Types
Can You Improve the Component?
Sorting
Can You Improve the Component?
Sorting UI Cues
Editing Data
Editable Cell
Input Field Cell
Saving
Conclusion and Virtual DOM Diffs
Search
State and UI
Filtering Content
Update the save() Method
Can You Improve the Search?
Instant Replay
Cleaning Up Event Handlers
Cleaning Solution
Can You Improve the Replay?
An Alternative Implementation?
Download the Table Data
Fetching Data
Chapter 4. Functional Excel
A Quick Refresher: Function versus Class Components
Rendering the Data
The State Hook
Sorting the Table
Editing Data
Searching
Lifecycles in a World of Hooks
Troubles with Lifecycle Methods
useEffect()
Cleaning Up Side Effects
Trouble-Free Lifecycles
useLayoutEffect()
A Custom Hook
Wrapping up the Replay
useReducer
Reducer Functions
Actions
An Example Reducer
Unit Testing Reducers
Excel Component with a Reducer
Chapter 5. JSX
A Couple Tools
Whitespace in JSX
Comments in JSX
HTML Entities
Anti-XSS
Spread Attributes
Parent-to-Child Spread Attributes
Returning Multiple Nodes in JSX
A Wrapper
A Fragment
An Array
Differences Between JSX and HTML
No class, What for?
style Is an Object
Closing Tags
camelCase Attributes
Namespaced Components
JSX and Forms
onChange Handler
value Versus defaultValue
Value<br> <select> Value<br> Controlled and Uncontrolled Components<br>Chapter 6. Setting Up for App Development<br> Create React App<br> Node.js<br> Hello CRA<br> Build and Deploy<br> Mistakes Were Made<br> package.json and node_modules<br> Poking Around the Code<br> Indices<br> JavaScript: Modernized<br> CSS<br> Moving On<br>Chapter 7. Building the App’s Components<br> Setup<br> Start Coding<br> Refactoring the Excel Component<br> Version 0.0.1 of the New App<br> CSS<br> Local Storage<br> The Components<br> Discovery<br> Logo and a Body<br> Logo<br> Body<br> Discoverable<br> <Button> Component<br> Button.js<br> classnames Package<br> Forms<br> <Suggest><br> <Rating> Component<br> A <FormInput> “Factory”<br> <Form><br> <Actions><br> Dialogs<br> Header<br> App Config<br> <Excel>: New and Improved<br> The Overall Structure<br> Rendering<br> React.Strict and Reducers<br> Excel’s Little Helpers<br>Chapter 8. The Finished App<br> Updated App.js<br> DataFlow Component<br> DataFlow Body<br> Job Done<br> Whinepad v2<br> Context<br> Next Steps<br> Circular Data<br> Providing Context<br> Consuming Context<br> Context in the Header<br> Context in the Data Table<br> Updating Discovery<br> Routing<br> Route Context<br> Using the Filter URL<br> Consuming the Route Context in the Header<br> Consuming the Route Context in the Data Table<br> useCallback()<br> The End<br>Index<br>About the Author<br>Colophon </div> <br> <div class="en_desc"> </div> </div> </div> </div> </div> </div> </div> </div> <!-- /container --> <br><br><hr> <h3 style="text-align:center;">پست ها تصادفی</h3> <hr> <div class="row popup-products tablev"> <!-- ========== --> <!-- = Products = --> <!-- ========== --> <div class="span3 miniv"> <div class="product productv"> <div class="product-img"> <div class="picture"> <img src="https://cover.sciebook.ir/cover/cover.php?md5=02268d6d3130f9816cbbf8b4539657d0&id=2205409" alt="Design of prestressed concrete to Eurocode 2" width="540" height="374" /> <div class="img-overlay"> <a href="https://sciebook.ir/downloads/design-of-prestressed-concrete-to-eurocode-2-6345" class="btn more btn-primary">توضیحات بیشتر</a> <form action="" method="post" class="form form-inline clearfix"> <input type="hidden" name="item[]" value="474964" /> <input type="hidden" name="item[]" value="Design of prestressed concrete to Eurocode 2" /> <input type="hidden" name="item[]" value="" /> <input type="hidden" name="item[]" value="43000" /> <button class="btn btn-danger pull-right" style="margin-top: 10px;"><i class="icon-shopping-cart"></i> اضافه به سبد خرید</button> </form> </div> </div> </div> <div class="main-titles no-margin"> <h3 class="no-margin"><a href="https://sciebook.ir/downloads/design-of-prestressed-concrete-to-eurocode-2-6345">Design of prestressed concrete to Eurocode 2</a></h3> <h4 class="title"><div class="bookprice"><span class="bprice">43000</span> تومان</div></h4> </div> <!--<p class="desc">توضیحاتی که در مورد محصول لازم است را در اینجا مینویسید</p>--> <p class="center-align stars"> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span> </p> </div> </div> <!-- /product --> <div class="span3 miniv"> <div class="product productv"> <div class="product-img"> <div class="picture"> <img src="https://cover.sciebook.ir/cover/cover.php?md5=83b04863c3955ad89f2c8469b12e9f8c&id=1560308" alt="The calendar pages of medieval service books : an introductory note for art historians" width="540" height="374" /> <div class="img-overlay"> <a href="https://sciebook.ir/downloads/the-calendar-pages-of-medieval-service-books--6194" class="btn more btn-primary">توضیحات بیشتر</a> <form action="" method="post" class="form form-inline clearfix"> <input type="hidden" name="item[]" value="474964" /> <input type="hidden" name="item[]" value="The calendar pages of medieval service books : an introductory note for art historians" /> <input type="hidden" name="item[]" value="" /> <input type="hidden" name="item[]" value="53000" /> <button class="btn btn-danger pull-right" style="margin-top: 10px;"><i class="icon-shopping-cart"></i> اضافه به سبد خرید</button> </form> </div> </div> </div> <div class="main-titles no-margin"> <h3 class="no-margin"><a href="https://sciebook.ir/downloads/the-calendar-pages-of-medieval-service-books--6194">The calendar pages of medieval service books : an introductory note for art historians</a></h3> <h4 class="title"><div class="bookprice"><span class="bprice">53000</span> تومان</div></h4> </div> <!--<p class="desc">توضیحاتی که در مورد محصول لازم است را در اینجا مینویسید</p>--> <p class="center-align stars"> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span> </p> </div> </div> <!-- /product --> <div class="span3 miniv"> <div class="product productv"> <div class="product-img"> <div class="picture"> <img src="https://cover.sciebook.ir/cover/cover.php?md5=25412399111a3c890748e4318af3baa2&id=2175232" alt="The synthesis of aliphatic aminoalcohols of pharmacologic interest" width="540" height="374" /> <div class="img-overlay"> <a href="https://sciebook.ir/downloads/the-synthesis-of-aliphatic-aminoalcohols-of-p-6486" class="btn more btn-primary">توضیحات بیشتر</a> <form action="" method="post" class="form form-inline clearfix"> <input type="hidden" name="item[]" value="474964" /> <input type="hidden" name="item[]" value="The synthesis of aliphatic aminoalcohols of pharmacologic interest" /> <input type="hidden" name="item[]" value="" /> <input type="hidden" name="item[]" value="44000" /> <button class="btn btn-danger pull-right" style="margin-top: 10px;"><i class="icon-shopping-cart"></i> اضافه به سبد خرید</button> </form> </div> </div> </div> <div class="main-titles no-margin"> <h3 class="no-margin"><a href="https://sciebook.ir/downloads/the-synthesis-of-aliphatic-aminoalcohols-of-p-6486">The synthesis of aliphatic aminoalcohols of pharmacologic interest</a></h3> <h4 class="title"><div class="bookprice"><span class="bprice">44000</span> تومان</div></h4> </div> <!--<p class="desc">توضیحاتی که در مورد محصول لازم است را در اینجا مینویسید</p>--> <p class="center-align stars"> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span><span class="icon-star"></span> </p> </div> </div> <!-- /product --> <div class="span3 miniv"> <div class="product productv"> <div class="product-img"> <div class="picture"> <img src="https://cover.sciebook.ir/cover/cover.php?md5=c6201f3b2be11dcb5092adab70f02bab&id=486849" alt="Sarah Bernhardt (Lucky Luke) (French Edition)" width="540" height="374" /> <div class="img-overlay"> <a href="https://sciebook.ir/downloads/sarah-bernhardt-lucky-luke-french-edition-6497" class="btn more btn-primary">توضیحات بیشتر</a> <form action="" method="post" class="form form-inline clearfix"> <input type="hidden" name="item[]" value="474964" /> <input type="hidden" name="item[]" value="Sarah Bernhardt (Lucky Luke) (French Edition)" /> <input type="hidden" name="item[]" value="" /> <input type="hidden" name="item[]" value="30000" /> <button class="btn btn-danger pull-right" style="margin-top: 10px;"><i class="icon-shopping-cart"></i> اضافه به سبد خرید</button> </form> </div> </div> </div> <div class="main-titles no-margin"> <h3 class="no-margin"><a href="https://sciebook.ir/downloads/sarah-bernhardt-lucky-luke-french-edition-6497">Sarah Bernhardt (Lucky Luke) (French Edition)</a></h3> <h4 class="title"><div class="bookprice"><span class="bprice">30000</span> تومان</div></h4> </div> <!--<p class="desc">توضیحاتی که در مورد محصول لازم است را در اینجا مینویسید</p>--> <p class="center-align stars"> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span><span class="icon-star"></span> </p> </div> </div> <!-- /product --> <div class="span3 miniv"> <div class="product productv"> <div class="product-img"> <div class="picture"> <img src="https://cover.sciebook.ir/cover/cover.php?md5=5020d4194452c376669c6f7cfc3b8dc4&id=610174" alt="Cittadino della Galassia" width="540" height="374" /> <div class="img-overlay"> <a href="https://sciebook.ir/downloads/cittadino-della-galassia-7855" class="btn more btn-primary">توضیحات بیشتر</a> <form action="" method="post" class="form form-inline clearfix"> <input type="hidden" name="item[]" value="474964" /> <input type="hidden" name="item[]" value="Cittadino della Galassia" /> <input type="hidden" name="item[]" value="" /> <input type="hidden" name="item[]" value="55000" /> <button class="btn btn-danger pull-right" style="margin-top: 10px;"><i class="icon-shopping-cart"></i> اضافه به سبد خرید</button> </form> </div> </div> </div> <div class="main-titles no-margin"> <h3 class="no-margin"><a href="https://sciebook.ir/downloads/cittadino-della-galassia-7855">Cittadino della Galassia</a></h3> <h4 class="title"><div class="bookprice"><span class="bprice">55000</span> تومان</div></h4> </div> <!--<p class="desc">توضیحاتی که در مورد محصول لازم است را در اینجا مینویسید</p>--> <p class="center-align stars"> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span> <span class="icon-star stars-clr"></span><span class="icon-star"></span> </p> </div> </div> <!-- /product --> </div> <!-- end of related posts --> <!-- ========== --> <!-- = Related Products = --> <!-- ========== --> <!-- ========== --> <!-- = Footer = --> <!-- ========== --> <footer> <!-- ========== --> <!-- = Upper footer = --> <!-- ========== --> <div class="foot-light"> <div class="container"> <div class="row"> <div class="span4"> <h2 class="pacifico">ساینس ایبوک<img src="https://sciebook.ir/images/webmarket.png" width="23" height="20" alt="ساینس ایبوک" class="align-baseline" /></h2> <p>فروشگاهی امن با بیش از 3 میلیون کتاب در همه رشته ها و علوم</p> </div> <div class="span4"> <div class="main-titles lined"> <h3 class="title"><!--<a href="https://refebook.ir/">رفرنس ایبوک</a>--></h3> </div> <div class="bordered"> <div class="fill-iframe"> <div class="fb-like-box" data-href="https://www.facebook.com/ProteusNet" data-width="292" data-height="200" data-colorscheme="dark" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div> </div> </div> </div> <div class="span4"> <div class="main-titles lined"> <h3 class="title"><span class="light">عضویت</span> در خبرنامه</h3> </div> <p>با ثبت ایمیل می توانید از جدید ترین محصولات آگاه شوید.</p> <!-- Begin MailChimp Signup Form <div id="mc_embed_signup"> <form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate form form-inline" target="_blank" novalidate> <div class="mc-field-group"> <input type="email" value="" placeholder="آدرس ایمیلتان را وارد کنید" name="EMAIL" class="required email" id="mce-EMAIL"> <input type="submit" value="ارسال" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> </form> </div>--> <!--End mc_embed_signup--> </div> </div> </div> </div> <!-- /upper footer --> <!-- ========== --> <!-- = Bottom Footer = --> <!-- ========== --> <div class="foot-last"> <a href="#" id="toTheTop"> <span class="icon-chevron-up"></span> </a> <div class="container"> <div class="row"> <!--<div class="span6"> © Copyright 2013. Images of products by <a target="_blank" href="http://www.horsefeathers.eu/">horsefeathers</a>. </div> <div class="span6"> <div class="pull-right">قالب HTML وبمارکت توسط<a href="http://www.proteusthemes.com">ProteusThemes</a></div> </div> --> <center>تمامی حقوق برای وبسایت ساینس ایبوک و اینترنشنال لایبرری محفوظ است.</center> </div> </div> </div> <!-- /bottom footer --> <a referrerpolicy="origin" target="_blank" href="https://trustseal.enamad.ir/?id=518104&Code=PWBy28T8rPtnVosz6KEBpzrfpVVRVTwv"><img class="enamad" alt="نماد اعتماد الکترونیکی" src="https://sciebook.ir/images/enamad.png"></a> </footer> <!-- /footer --> <!-- ========== --> <!-- = Modal Windows = --> <!-- ========== --> <!-- = Login = --> <!-- contact --> <div id="contact_us" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="contact_usLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="contact_usLabel">تماس با ما</h3> </div> <div class="modal-body"> <p>کاربر گرامی درصورت نیاز به پشتیبانی می توانید با شماره های زیر در ارتباط باشید</p> <p class="center-align push-down-0"> <a href="tel:09117179751" data-dismiss="modal">09117179751</a> </p> <p class="center-align push-down-0"> <a href="tel:09117307688" data-dismiss="modal">09117307688</a> </p> <p class="center-align">در صورت عدم پاسخ گویی از طریق پیامک با پشتیبان در ارتباط باشید</p> </div> </div> <!-- = Login = --> <div id="loginModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="loginModalLabel">ورود به حساب</h3> </div> <div class="modal-body"> <form method="post" action=""> <div class="control-group"> <label class="control-label hidden shown-ie8" for="inputEmail">نام کاربری</label> <div class="controls"> <input name="type" type="hidden" value="login"> <input name="input" type="text" class="input-block-level" id="inputEmail" placeholder="ایمیل | نام کاربری | موبایل"> </div> </div> <div class="control-group"> <label class="control-label hidden shown-ie8" for="inputPassword">رمز عبور</label> <div class="controls"> <input name="pass" type="password" class="input-block-level" id="inputPassword" placeholder="کلمه عبور"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> مرا به خاطر بسپار </label> </div> </div> <button type="submit" class="btn btn-primary input-block-level bold higher"> ورود </button> </form> <p class="center-align push-down-0"> <a href="#" data-dismiss="modal">رمز عبورتان را فراموش کرده اید؟</a> </p> </div> </div> <!-- = Register = --> <div id="registerModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="registerModalLabel">عضویت در ساینس ایبوک</h3> </div> <div class="modal-body"> <form method="post" action=""> <div class="control-group"> <label class="control-label hidden shown-ie8" for="inputNameRegister">نام و نام خانوادگی</label> <div class="controls"> <input name="name" type="text" class="input-block-level" id="inputNameRegister" placeholder="نام و نام خانوادگی"> </div> </div> <div class="control-group"> <label class="control-label hidden shown-ie8" for="inputUsernameRegister">نام کاربری</label> <div class="controls"> <input name="type" type="hidden" value="register"> <input name="username" type="text" class="input-block-level" id="inputUsernameRegister" placeholder="نام کاربری"> </div> </div> <div class="control-group"> <label class="control-label hidden shown-ie8" for="inputEmailRegister">ایمیل</label> <div class="controls"> <input type="email" name="email" class="input-block-level" id="inputEmailRegister" placeholder="ایمیل"> </div> </div> <div class="control-group"> <label class="control-label hidden shown-ie8" for="inputMobileRegister">موبایل</label> <div class="controls"> <input name="mobile" type="text" class="input-block-level" id="inputMobileRegister" placeholder="شماره موبایل"> </div> </div> <div class="control-group"> <label class="control-label hidden shown-ie8" for="inputPasswordRegister">رمز عبور</label> <div class="controls"> <input name="pass" type="text" class="input-block-level" id="inputPasswordRegister" placeholder="رمز عبور"> </div> </div> <button type="submit" class="btn btn-danger input-block-level bold higher"> عضویت </button> </form> <p class="center-align push-down-0"> <a data-toggle="modal" role="button" href="#loginModal" data-dismiss="modal">قبلا ثبت نام کرده اید؟</a> </p> </div> </div> </div> <!-- end of master-wrapper --> <!-- ========== --> <!-- = JavaScript = --> <!-- ========== --> <!-- = FB = --> <div id="fb-root"></div> <!-- Modernizr --> <script async src="https://sciebook.ir/js/modernizr.custom.56918.js"></script> <script> function function2() { var result = '9781492051466'; $.ajax({ url: "https://www.googleapis.com/books/v1/volumes?q=isbn:" + result, type: 'GET', dataType: 'json', // added data type success: handleResponse }); function handleResponse(res) { $.each(res.items, function(i, item) { var desc = item.volumeInfo.description; $('#result').append(desc); }) } } </script> <!-- = jQuery - CDN with local fallback = --> <!--<script async type="text/javascript" src="https://sciebook.ir/js/jquery.min.js"></script>--> <!--<script type="text/javascript"> if (typeof jQuery == 'undefined') { document.write('<script src="https://sciebook.ir/js/jquery.min.js"><\/script>'); } </script>--> <!-- = _ = --> <script async src="https://sciebook.ir/js/underscore/underscore-min.js" type="text/javascript"></script> <!-- = Bootstrap = --> <script async src="https://sciebook.ir/js/bootstrap.min.js" type="text/javascript"></script> <!-- = Slider Revolution = --> <script async src="https://sciebook.ir/js/rs-plugin/pluginsources/jquery.themepunch.plugins.min.js" type="text/javascript"></script> <script async src="https://sciebook.ir/js/rs-plugin/js/jquery.themepunch.revolution.min.js" type="text/javascript"></script> <!-- = CarouFredSel = --> <script async src="https://sciebook.ir/js/jquery.carouFredSel-6.2.1-packed.js" type="text/javascript"></script> <!-- = jQuery UI = --> <script async src="https://sciebook.ir/js/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script> <script async src="https://sciebook.ir/js/jquery-ui-1.10.3/touch-fix.min.js" type="text/javascript"></script> <!-- = Isotope = --> <script async src="https://sciebook.ir/js/isotope/jquery.isotope.min.js" type="text/javascript"></script> <!-- = Tour = --> <script async src="https://sciebook.ir/js/bootstrap-tour/build/js/bootstrap-tour.min.js" type="text/javascript"></script> <!-- = PrettyPhoto = --> <script async src="https://sciebook.ir/js/prettyphoto/js/jquery.prettyPhoto.js" type="text/javascript"></script> <!-- = Google Maps API = <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>--> <!--<script type="text/javascript" src="https://sciebook.ir/js/goMap/js/jquery.gomap-1.3.2.min.js"></script>--> <!-- = Custom JS = --> <script async src="https://sciebook.ir/js/custom.js" type="text/javascript"></script> </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-131050320-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-131050320-1'); </script> </body> </html>