React: Up & Running. 2nd Edition - Helion
ISBN: 9781492051411
stron: 232, Format: ebook
Data wydania: 2021-11-11
Księgarnia: Helion
Cena książki: 169,15 zł (poprzednio: 196,69 zł)
Oszczędzasz: 14% (-27,54 zł)
Hit the ground running with React, the open source technology from Facebook for building rich web applications fast. Updated for the latest React release, the second edition of this hands-on guide shows you how to build React components and organize them into maintainable large-scale apps. If you're familiar with JavaScript syntax, you're ready to get started.
Through the course of this book, author Stoyan Stefanov helps web developers and programmers build a complete single-page application. You'll quickly learn why some developers consider React the key to the web app development puzzle.
- Set up React and write your first "Hello, World" web app
- Create and use custom React components alongside generic DOM components
- Build a data table component that lets you edit, sort, search, and export its contents
- Master the JSX syntax
- Use built-in Hooks and create your own custom ones
- Manage the app's data flow with reducers and contexts
- Use Create React App to take care of the build process and focus on React itself
- Build a complete custom app that lets you store data on the client
Osoby które kupowały "React: Up & Running. 2nd Edition", wybierały także:
- Windows Media Center. Domowe centrum rozrywki 66,67 zł, (8,00 zł -88%)
- Ruby on Rails. Ćwiczenia 18,75 zł, (3,00 zł -84%)
- Przywództwo w świecie VUCA. Jak być skutecznym liderem w niepewnym środowisku 58,64 zł, (12,90 zł -78%)
- Scrum. O zwinnym zarządzaniu projektami. Wydanie II rozszerzone 58,64 zł, (12,90 zł -78%)
- Od hierarchii do turkusu, czyli jak zarządzać w XXI wieku 58,64 zł, (12,90 zł -78%)
Spis treści
React: Up & Running. 2nd Edition eBook -- spis treści
- Preface
- About This Book
- Conventions Used in This Book
- Using Code Examples
- OReilly Online Learning
- How to Contact Us
- Acknowledgments
- 1. Hello World
- Setup
- Hello React World
- What Just Happened?
- React.createElement()
- JSX
- Setup Babel
- Hello JSX World
- On Transpilation
- Next: Custom Components
- 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?
- A Custom Function Component
- 3. Excel: A Fancy Table Component
- Data First
- Table Headers Loop
- Table Headers Loop, a Terse Version
- Debugging the Console Warning
- Adding <td> 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
- 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
- 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
- <textarea> Value
- <select> Value
- Controlled and Uncontrolled Components
- Uncontrolled example
- Uncontrolled example with an onSubmit handler
- Controlled example
- 6. Setting Up for App Development
- Create React App
- Node.js
- Hello CRA
- Build and Deploy
- Mistakes Were Made
- package.json and node_modules
- Poking Around the Code
- Indices
- JavaScript: Modernized
- CSS
- Moving On
- Create React App
- 7. Building the Apps Components
- Setup
- Start Coding
- Refactoring the Excel Component
- Version 0.0.1 of the New App
- CSS
- Local Storage
- The Components
- Discovery
- Logo and a Body
- Logo
- Body
- Discoverable
- <Button> Component
- Button.js
- classnames Package
- Forms
- <Suggest>
- <Rating> Component
- A <FormInput> Factory
- <Form>
- Types: shape, objectOf, arrayOf
- Refs
- Wrapping up <Form>
- <Actions>
- Dialogs
- Header
- App Config
- <Excel>: New and Improved
- The Overall Structure
- Rendering
- Rendering the table head
- Rendering the table body
- Tweaking and filtering of content
- React.Strict and Reducers
- Excels Little Helpers
- sort()
- showEditor()
- save()
- handleAction()
- reducer()
- 8. The Finished App
- Updated App.js
- DataFlow Component
- DataFlow Body
- Job Done
- Whinepad v2
- Context
- Next Steps
- Circular Data
- Providing Context
- Consuming Context
- Context in the Header
- Context in the Data Table
- Updating Discovery
- Routing
- Route Context
- Using the Filter URL
- Consuming the Route Context in the Header
- Consuming the Route Context in the Data Table
- useCallback()
- The End
- Index