React from Scratch
React from Scratch
A definitive and comprehensive guide to React + Remix.
About the Book
This book introduces the knowledge needed to develop web applications in React using the most modern techniques available in 2023. In addition to learning how to build applications in React, you will also learn how to build applications with the Remix framework. After going over all the concepts of React and Remix, including examples, we will create an AirBnb clone application with React, Remix, Prisma, PicoCss and deploy it to the Render.com server.
About the Author
Table of Contents
- 1 Introduction
- 1.1 About Piracy
- 1.2 Support
- 1.3 Source Code
- 1.4 Instalation
- Visual Studio Code Extensions
- 1.5 Git
- 2 The React
- 2.1 Project Creation
- Using the Create-react-app
- Running the Project
- Opening in Vscode
- Editing Code
- The Files
- Cleaning Up the Project
- Install Pico Css
- Using Pico Css
- 2.2 Back to React!
- Everything is Component!
- Component Creation
- Structure of a Component
- A React Component Always Returns Jsx
- 2.3 Passing Props to a Component
- Using Destructuring Parameters
- Boolean Props
- 2.4 Conditional Rendering
- 2.5 Lists
- The Key Property
- 2.6 Events
- Use Arrow Functions in the Events
- Always Create Functions Instead of Including Code Directly
- Why Arrow Functions?
- 2.7 Propagating Events Outside the Component
- 2.8 Default Values
- 2.9 The Hook UseState
- 2.10 The Hook UseEffect
- 2.11 Forms
- 2.12 Fecth Data
- Json Server
- 2.13 Usign “fetch” to Read Data
- 2.14 The Router
- 2.15 Dark Mode and Light Mode Switch
- Remembering your Choice
- 2.1 Project Creation
- 3 React and Styled Components
- 3.1 Project Creation
- 3.2 Installing Styled-components
- 3.3 Creating the Container Component
- 3.4 Creating the Title Component
- 3.5 Buttons
- 3.6 Creating a Card
- 3.7 Conclusion
- 4 Creating an Application With React and React Router
- 4.1 Creating the App
- 4.2 The Routes
- Installing React Router
- Our First Route
- Creating the Route to List Categories
- Creating the Route to List Friends
- 4.3 Backend API
- Getting the Json File
- Installing Json Server
- Testing Json Server
- 4.4 Show the Book List
- 4.5 Listing All Categories
- 4.6 Listing All Friends
- 4.7 Editing a Category
- 4.8 Create a Category
- 4.9 Delete Category
- 4.10 Friends Crud
- Refactor Service
- Edit Friends
- 4.11 Create Friends
- 4.12 Remove Friend
- 4.13 The Routes
- 4.14 Create a Book
- Let’s Create a Simple JSON Component to Show “book” Data
- Inserting the Title and Author Fields
- Date and Range Fileds
- Category and Friend Fields
- The Create Book Route
- 4.15 Editing a Book
- Edit Book Route
- Create a Link to Edit Book
- 4.16 Remove a Book
- 4.17 Conclusion
- 5 React and Remix
- 5.1 The “contacts” Project
- 5.2 Project Creation
- 5.3 Running the Project
- Project Structure
- 5.4 Installing Picocss
- 5.5 Project Routes and Components
- Navigator Component
- Theme Switch
- 5.6 Solving Some Alignments in the Application
- 5.7 Database Access
- Installing Knex
- Migration
- 5.8 Displaying the Contacts
- 5.9 Inserting Contacts
- The Remix Way to Handle Forms
- 5.10 Handling Errors
- 5.11 Editing a Contact
- 5.12 Removing a Contact
- 5.13 Conclusion
- 6 Typescript, Prisma and Authentication
- 6.1 Typescript
- 6.2 Prisma
- 6.3 Getting Started With Prisma
- Creating a Simple Project With Typescript+Prisma
- 6.4 Remix E Typescript
- Project Creation
- 6.5 Typescript and the ? Operator
- 6.6 Conclusion
- 7 The Airbnb Clone App - Project Creation, Database, Authentication
- 7.1 Project Creation
- 7.2 Production Server
- 7.3 Installing PicoCSS
- 7.4 Updating Modifications at Render.com
- 7.5 Installing Prisma
- Installing PostgreSQL
- 7.6 Setting Up the Database On the Production Server
- Creating a Database On Render.com
- 7.7 Creating the Users Table
- Creating the Migration
- Seeding
- 7.8 What If the Migrations Are Ready?
- 7.9 Testing Prisma in Remix
- 7.10 Reusing the Prism Connection
- 7.11 Production Database
- 7.12 Prisma Studio
- 7.13 Authentication
- Sessions
- 7.14 Login
- 7.15 The Login Form
- 7.16 Viewing Session Data
- 7.17 Using Root’s UseRouteLoaderData
- 7.18 Creating the Header Component
- 7.19 Logout
- 7.20 Register
- Adding a Registraion Link in the Header
- 7.21 Pending UI
- Login Form
- Simulating Page Transition
- 7.22 Profile Page
- 7.23 Flash Messages
- Hiding the Message After a While
- 7.24 Changing the Password
- The Form
- 7.25 Changing the Role From User to Host
- 8 The Airbnb Clone App - Make Cruds Fast - Admin Page
- 8.1 Using Migration in Prisma to Update the Database
- 8.2 The Admin Route
- 8.3 Countries CRUD With RemixForms
- 8.4 The Remix Forms Component
- 8.5 The Country Service
- 8.6 Listing Countries
- 8.7 Passing Parameters to a Route
- 8.8 Creating the Form for Editing a Country
- 8.9 Handle Errors
- 8.10 Changing the Form That Was Generated Automatically
- 8.11 Delete Country
- 8.12 Using Active Links
- 8.13 Cities CRUD
- Create City
- Editing a City
- Added the Country Field in the City Listing
- 8.14 Cities and Countries Seed
- 9 The Airbnb Clone App - Create Places, Upload Files
- 9.1 Adding Model Place
- 9.2 Profile Page
- 9.3 Adding a Place
- 9.4 Editing a Place
- 9.5 Adding Photos to a Place
- Migration
- Initial Code
- The Form
- Saving a Uploaded File in Prisma
- Showing All Uploaded Images
- Deleting a Photo
- 9.6 Showing Places
- 1 Introduction
The Leanpub 60 Day 100% Happiness Guarantee
Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.
You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!
So, there's no reason not to click the Add to Cart button, is there?
See full terms...
80% Royalties. Earn $16 on a $20 book.
We pay 80% royalties. That's not a typo: you earn $16 on a $20 sale. If we sell 5000 non-refunded copies of your book or course for $20, you'll earn $80,000.
(Yes, some authors have already earned much more than that on Leanpub.)
In fact, authors have earnedover $13 millionwriting, publishing and selling on Leanpub.
Learn more about writing on Leanpub
Free Updates. DRM Free.
If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).
Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.
Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.
Learn more about Leanpub's ebook formats and where to read them
