ReactJS - Tutorialspoint
ReactJS i
ReactJS
About the Tutorial
React is an open source, JavaScript library for developing user interface (UI) in web application. React is developed and released by Facebook. Facebook is continuously working on the React library and enhancing it by fixing bugs and introducing new features. This tutorial starts with the architecture of React, how-to guide to setup projects, creating components, JSX and then walks through advanced concepts like state management, form programming, routing and finally conclude with step by step working example.
Audience
This tutorial is prepared for professionals who are aspiring to make a career in the field of developing front-end web application. This tutorial is intended to make you comfortable in getting started with the React concepts with examples.
Prerequisites
Before proceeding with the various types of concepts given in this tutorial, we assume that the readers have the basic knowledge in HTML, CSS and OOPS concepts. In addition to this, it will be very helpful, if the readers have a sound knowledge in JavaScript.
Copyright & Disclaimer
Copyright 2021 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@
ii
ReactJS
Table of Contents
About the Tutorial ........................................................................................................................................... ii Audience.......................................................................................................................................................... ii Prerequisites.................................................................................................................................................... ii Copyright & Disclaimer .................................................................................................................................... ii Table of Contents ........................................................................................................................................... iii 1. ReactJS -- Introduction.............................................................................................................................1 React versions.................................................................................................................................................. 1 Features ........................................................................................................................................................... 1 Benefits............................................................................................................................................................ 1 Applications ..................................................................................................................................................... 1 2. ReactJS -- Installation...............................................................................................................................3 Toolchain ......................................................................................................................................................... 3 The serve static server ..................................................................................................................................... 4 Babel compiler................................................................................................................................................. 5 Create React App toolchain ............................................................................................................................. 5 3. ReactJS -- Architecture.............................................................................................................................7 Workflow of a React application ..................................................................................................................... 7 Architecture of the React Application ........................................................................................................... 11 4. React -- Creating a React Application .....................................................................................................13 Using CDN ...................................................................................................................................................... 13 Using Create React App tool.......................................................................................................................... 15 Files and folders............................................................................................................................................. 16 Source code of the application...................................................................................................................... 18 Customize the code ....................................................................................................................................... 19 Run the application ....................................................................................................................................... 20 Using custom solution ................................................................................................................................... 21
iii
ReactJS
Using Rollup bundler ..................................................................................................................................... 21 Using Parcel bundler...................................................................................................................................... 26 5. React -- JSX ............................................................................................................................................30 Expressions .................................................................................................................................................... 30 Functions ....................................................................................................................................................... 31 Attributes....................................................................................................................................................... 31 Expression in attributes ................................................................................................................................. 32 6. ReactJS -- Component ............................................................................................................................33 Creating a React component ......................................................................................................................... 33 Creating a class component .......................................................................................................................... 34 Creating a function component..................................................................................................................... 36 7. React -- Styling .......................................................................................................................................38 CSS stylesheet................................................................................................................................................ 38 Inline Styling .................................................................................................................................................. 39 CSS Modules .................................................................................................................................................. 40 8. React -- Properties (props) .....................................................................................................................43 Create a component using properties ........................................................................................................... 43 Nested components ...................................................................................................................................... 48 Use components............................................................................................................................................ 51 Component collection ................................................................................................................................... 53 9. React -- Event management...................................................................................................................59 Introduce events in Expense manager app ................................................................................................... 64 10. React -- State Management ...................................................................................................................69 What is state?................................................................................................................................................ 69 State management API .................................................................................................................................. 69 Stateless component ..................................................................................................................................... 70 Create a stateful component......................................................................................................................... 71 Introduce state in expense manager app ...................................................................................................... 74
iv
ReactJS
State management using React Hooks .......................................................................................................... 79 Create a stateful component......................................................................................................................... 80 Introducing state in expense manager app ................................................................................................... 82 Component Life cycle .................................................................................................................................... 86 Working example of life cycle API ................................................................................................................. 89 Life cycle api in Expense manager app .......................................................................................................... 91 Component life cycle using React Hooks....................................................................................................... 92 React children property aka Containment..................................................................................................... 95 Layout in component..................................................................................................................................... 98 Sharing logic in component aka Render props ............................................................................................ 100 Pagination.................................................................................................................................................... 101 Material UI................................................................................................................................................... 111 11. React -- Http client programming.........................................................................................................118 Expense Rest Api Server .............................................................................................................................. 118 The fetch() api ............................................................................................................................................. 122 12. React -- Form programming .................................................................................................................129 Controlled component ................................................................................................................................ 129 Uncontrolled Component............................................................................................................................ 137 Formik.......................................................................................................................................................... 143 13. React -- Routing ...................................................................................................................................152 Install React Router ..................................................................................................................................... 152 Nested routing............................................................................................................................................. 154 Creating navigation ..................................................................................................................................... 154 14. React -- Redux......................................................................................................................................161 Concepts ...................................................................................................................................................... 161 Redux API..................................................................................................................................................... 162 Provider component.................................................................................................................................... 163 15. React -- Animation ...............................................................................................................................175
v
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.