Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
The React Workshop

You're reading from   The React Workshop Get started with building web applications using practical tips and examples from React use cases

Arrow left icon
Product type Paperback
Published in Aug 2020
Publisher Packt
ISBN-13 9781838645564
Length 806 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Authors (6):
Arrow left icon
Florian Sloot Florian Sloot
Author Profile Icon Florian Sloot
Florian Sloot
Ryan Yu Ryan Yu
Author Profile Icon Ryan Yu
Ryan Yu
Brandon Richey Brandon Richey
Author Profile Icon Brandon Richey
Brandon Richey
Endre Vegh Endre Vegh
Author Profile Icon Endre Vegh
Endre Vegh
 Theofanis Despoudis Theofanis Despoudis
Author Profile Icon Theofanis Despoudis
Theofanis Despoudis
Anton Punith Anton Punith
Author Profile Icon Anton Punith
Anton Punith
+2 more Show less
Arrow right icon
View More author details
Toc

Table of Contents (20) Chapters Close

Preface
1. Getting Started with React 2. Dealing with React Events FREE CHAPTER 3. Conditional Rendering and for Loops 4. React Lifecycle Methods 5. Class and Function Components 6. State and Props 7. Communication between Components 8. Introduction to Formik 9. Introduction to React Router 10. Advanced Routing Techniques: Special Cases 11. Hooks – Reusability, Readability, and a Different Mental Model 12. State Management with Hooks 13. Composing Hooks to Solve Complex Problems 14. Fetching Data by Making API Requests 15. Promise API and async/await 16. Fetching Data on Initial Render and Refactoring with Hooks 17. Refs in React 18. Practical Use Cases of Refs Appendix

1. Getting Started with React

Activity 1.01: Design a React Component

Solution:

  1. Verify that Node.js and Create React App are installed on your machine:
    $ node --version

    Output:

    V12.6.0
    $ npx create-react-app --version

    Output:

    2.1.1
  2. Create your project, called buystuff, via the Create React App CLI:
    $ npx create-react-app buystuff 
  3. Delete all the unnecessary files for our project.

    Delete App.css, delete the contents of App.js except for the import and export statements, and delete logo.svg.

  4. Build the App React component as a class component but leave it blank.
  5. In App.js, change the import statement at the top:
    import React, {Component} from "react";
  6. Then add the following component definition:
    class App extends Component {
      render() {
        return <div className="App"/>;
      }
    }
  7. Build the Header React component as a functional component inside App.js. Its only prop should be title, which contains...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image