ReactJS - Tutorialspoint

ReactJS 1

ReactJS

About the Tutorial

React is a front-end library developed by Facebook. It is used for handling the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it.

Audience

This tutorial will help JavaScript developers who look ahead to deal with ReactJS for the first time. We will try to introduce every concept by showing simple code examples that can be easily understood. After finishing all the chapters, you will feel confident working with ReactJS. As a bonus we will introduce additional elements that work well with ReactJS to help you learn the best practices and follow the modern JavaScript trends.

Prerequisites

If you want to work with ReactJS, you need to have solid knowledge of JavaScript, HTML5, and CSS. Even though ReactJS doesn't use HTML, the JSX is similar so your HTML knowledge will be very helpful. We will explain this more in one of the next chapters. We will also use EcmaScript 2015 syntax so any knowledge in this area can be helpful.

Copyright & Disclaimer

Copyright 2017 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at contact@

2

ReactJS

Table of Contents

About the Tutorial ...........................................................................................................................................2 Audience.......................................................................................................................................................... 2 Prerequisites .................................................................................................................................................... 2 Copyright & Disclaimer ....................................................................................................................................2 Table of Contents.............................................................................................................................................3

1. REACTJS OVERVIEW...........................................................................................................7

React Features ..............................................................................................................................................7 React Advantages .........................................................................................................................................7 React Limitations ..........................................................................................................................................7

2. REACTJS ENVIRONMENT SETUP.........................................................................................8

Step 1 - Install Global Packages........................................................................................................................8 Step 2 - Create the Root Folder ........................................................................................................................8 Step 3 - Add Dependencies and Plugins ...........................................................................................................8 Step 4 - Create the Files ...................................................................................................................................9 Step 5 - Set Compiler, Server and Loaders........................................................................................................9 Step 6 - index.html.........................................................................................................................................10 Step 7 - App.jsx and main.js ...........................................................................................................................11 Step 8 - Running the Server............................................................................................................................12

3. REACTJS JSX.....................................................................................................................13

Using JSX........................................................................................................................................................13 Nested Elements............................................................................................................................................14 Attributes ......................................................................................................................................................15 JavaScript Expressions ...................................................................................................................................15 Styling ............................................................................................................................................................ 17

3

ReactJS

Comments .....................................................................................................................................................18 Naming Convention .......................................................................................................................................19

4. REACTJS COMPONENTS...................................................................................................20

Stateless Example ..........................................................................................................................................20 Stateful Example............................................................................................................................................22

5. REACTJS STATE ................................................................................................................25 6. REACTJS PROPS OVERVIEW ............................................................................................. 27

Using Props....................................................................................................................................................27 Default Props.................................................................................................................................................28 State and Props .............................................................................................................................................29

7. REACTJS PROPS VALIDATION ........................................................................................... 32

Validating Props.............................................................................................................................................32

8. REACTJS COMPONENT API .............................................................................................. 35

Set State ........................................................................................................................................................35 Force Update .................................................................................................................................................36 Find Dom Node..............................................................................................................................................37

9. REACTJS COMPONENT LIFE CYCLE...................................................................................39

Lifecycle Methods..........................................................................................................................................39

10. REACTJS FORMS ...........................................................................................................43

Simple Example .............................................................................................................................................43 Complex Example ..........................................................................................................................................44

11. REACTJS EVENTS ..........................................................................................................47

Simple Example .............................................................................................................................................47 Child Events ...................................................................................................................................................48

4

ReactJS

12. REACTJS REFS...............................................................................................................51

Using Refs ......................................................................................................................................................51

13. REACTJS KEYS ...............................................................................................................53

Using Keys .....................................................................................................................................................53

14. REACTJS ROUTER .........................................................................................................56

Step 1 - Install a React Router ........................................................................................................................56 Step 2 - Create Components ..........................................................................................................................56 Step 3 - Add a Router.....................................................................................................................................58

15. REACTJS FLUX CONCEPT...............................................................................................59

Flux Elements ................................................................................................................................................59 Flux Pros ........................................................................................................................................................59

16. REACTJS USING FLUX....................................................................................................60

Step 1 - Install Redux .....................................................................................................................................60 Step 2 - Create Files and Folders ....................................................................................................................60 Step 3 - Actions..............................................................................................................................................60 Step 4 - Reducers ...........................................................................................................................................61 Step 5 - Store .................................................................................................................................................62 Step 6 - Root Component...............................................................................................................................63 Step 7 - Other Components............................................................................................................................64

17. REACTJS ANIMATIONS..................................................................................................66

Step 1 - Install React CSS Transitions Group ...................................................................................................66 Step 2 - Add a CSS file ....................................................................................................................................66 Step 3 - Appear Animation.............................................................................................................................66 Step 4 - Enter and Leave Animations .............................................................................................................68

18. REACTJS HIGHER ORDER COMPONENTS ......................................................................72

5

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download