React.js Academy for Beginners with Firebase

React.js Academy for Beginners with Firebase

by Chris Dixon
Released October 2019
Publisher(s): Packt Publishing
ISBN: 9781839216251

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

React is one of the most popular and in-demand technologies in modern web development. Using a component-based approach, React allows you to build interactive user interfaces using JavaScript.

This course is designed to teach you everything you need to know to build modern applications using React.

You’ll learn to build a Trello-inspired project that will enable you to take advantage of React's features:

• Scaffolding projects using the Create React app

• React file and folder structures and what they do

• What components are and how to use them

• Writing JSX

• Class-based and function components

• Managing state

• Looping through data

• Using props to pass data and methods to components

You won't stop there! Even though React handles the user interface for us, most apps also need a backend. You’ll use Firebase to provide a real-time database for your project. This will help you not only to store your data, but also to be subscribed to any database changes as they happen. You’ll learn how to do the following:

• Set up a Firestore database

• Push and read data from our database

• Update and delete data

• Sort and filter data

• Work with real-time data using onSnapshot

This course will guide you in using Firebase to handle authentication. Users can sign up and log in and out, allowing them to have their own personal boards that only they can see and edit. You’ll also take advantage of React's Context API to pass the user's auth state throughout your application and handle conditional rendering. To round things off, you’ll look at how to build your project for production and then deploy it for the world to see!

What You Will Learn

  • Looping through data, components, and lifecycle methods
  • Study core React concepts such as props, state, JSX, forms, and validation
  • Create, read, update, and delete data from Firebase
  • Understand how users sign up and log in and log out, along with listening for changes
  • Dealing with document changes, updating in real-time, and conditional rendering
  • Explore authentication and the Context API
  • Build apps for production and deployment

Audience

If you’re new to React and frontend frameworks in general, this course is for you. If you come from a different framework or library such as Vue or Angular, you can use it as a great introduction to how React compares. Learning React will expand your core JavaScript knowledge and introduce you to backend technologies. This course is also for anyone keen to learn Firebase or add a real-time database with authentication. Although this course is for novice React developers, you’re expected to have at least basic knowledge of JavaScript and web design/development.

About The Author

Chris Dixon: Chris Dixon is a self-employed web developer teaching others through training courses. Chris offers freelance web development and training workshops on various topics, including HTML, CSS, JavaScript, Vue.js, NUXT.js, WordPress (custom theme development), Mongo/Mongoose, PostgreSQL, Express, Firebase, and Supabase. Chris is also involved in building Shopify ecommerce solutions, including custom apps and theme development. Chris has vast experience in GraphQL, Keystone CMS, and many other front-end/full-stack skills. He is additionally a regular Shopify user in creating and managing online stores and editing/creating custom liquid templates.

Table of contents

  1. Chapter 1 : Welcome and let's get started!
    1. Welcome to the course
    2. What we will be building
    3. What you will need for this course
  2. Chapter 2 : Project setup Components
    1. Create React App
    2. Project files folders
    3. A closer look at components
    4. Components in action
  3. Chapter 3 : Props, State Looping
    1. First look at state and JSX
    2. Component lifecycle and looping
    3. Passing data as props
    4. Passing methods as props
    5. Prop type validation
  4. Chapter 4 : Forms, inputs and refs
    1. Controlled components
    2. Uncontrolled components and refs
    3. Create new card form
  5. Chapter 5 : Routing
    1. Setting up React router
    2. Passing props to a router component
    3. URL parameters
    4. Using with Router and push
    5. Passing state via router
  6. Chapter 6 : Setting up Firebase, reading deleting data
    1. Setting up Firebase
    2. Pushing data to Firebase
    3. Reading data from Firebase
    4. The where orderBy methods
    5. Deleting cards and lists from Firebase
    6. Deleting boards
  7. Chapter 7 : Updating data and Modals
    1. Updating data in Firebase
    2. Edit card modal
    3. Updating the card text
    4. Setting the labels
    5. Text area auto resize
  8. Chapter 8 : Reading realtime data from Firebase
    1. First look at onSnapshot
    2. Working with document changes
    3. Realtime cards with updates
  9. Chapter 9 : User authentication and React context
    1. React Context API
    2. Firebase Authentication and set up
    3. User sign up
    4. Logging in and out
    5. Listening for auth changes
    6. Conditional rendering
    7. Rendering boards based on user
    8. Redirecting and error messages
    9. Roles permissions
  10. Chapter 10 : Deployment
    1. Building for production
    2. Deploying to Netlify
  11. Chapter 11 : Thank You
    1. Thank you

Product information

  • Title: React.js Academy for Beginners with Firebase
  • Author(s): Chris Dixon
  • Release date: October 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781839216251