Description

Learn React by building a Trello-inspired application with a real-time database and authentication!

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! All the codes and supporting files for this course are available at - https://github.com/PacktPublishing/React.js-Academy-for-Beginners-with-Firebase

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.

Approach

You will not only learn to React, but will also be able to put all of your newly developed skills into practice. Everything you learn will be applied directly to a real-world project, so you can see exactly how things fit together. While building your project, you'll encounter common pitfalls and learn how to overcome them.
Additionally, you'll master how the library interacts with other packages and services such as Firebase, user authentication, routing, and building apps for production.

Key Features

Learn React using a hands-on, project-based approach by building a feature-rich app from scratch * Get to grips with Firebase and create a real-time database with authentication * Expand your core JavaScript and development knowledge using one of the most popular technologies in the industry

Github Repo

https://github.com/packtpublishing/react.js-academy-for-beginners-with-firebase

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.

Course Outline

1. Welcome and let's get started!

1. Welcome to the course

Welcome and let's get started: Welcome to the course

2. What we will be building

Welcome and let's get started: What we will be building

3. What you will need for this course

Welcome and let's get started: What you will need for this course

2. Project setup & Components

1. Create React App

Project setup & Components: Create React App

2. Project files & folders

Project setup & Components: Project files & folders

3. A closer look at components

Project setup & Components: A closer look at components

4. Components in action

Project setup & Components: Components in action

3. Props, State & Looping

1. First look at state and JSX

Props, State & Looping: First look at state and JSX

2. Component lifecycle and looping

Props, State & Looping: Component lifecycle and looping

3. Passing data as props

Props, State & Looping: Passing data as props

4. Passing methods as props

Props, State & Looping: Passing methods as props

5. Prop type validation

Props, State & Looping: Prop type validation

4. Forms, inputs and refs

1. Controlled components

Forms, inputs and refs: Controlled components

2. Uncontrolled components and refs

Forms, inputs and refs: Uncontrolled components and refs

3. Create new card form

Forms, inputs and refs: Create new card form

5. Routing

1. Setting up React router

Routing: Setting up React router

2. Passing props to a router component

Routing: Passing props to a router component

3. URL parameters

Routing: URL parameters

4. Using with Router and push

Routing: Using with Router and push

5. Passing state via router

Routing: Passing state via router

6. Setting up Firebase, reading & deleting data

1. Setting up Firebase

Setting up Firebase, reading & deleting data: Setting up Firebase

2. Pushing data to Firebase

Setting up Firebase, reading & deleting data: Pushing data to Firebase

3. Reading data from Firebase

Setting up Firebase, reading & deleting data: Reading data from Firebase

4. The where & orderBy methods

Setting up Firebase, reading & deleting data: The where & orderBy methods

5. Deleting cards and lists from Firebase

Setting up Firebase, reading & deleting data: Deleting cards and lists from Firebase

6. Deleting boards

Setting up Firebase, reading & deleting data: Deleting boards

7. Updating data and Modals

1. Updating data in Firebase

Updating data and Modals: Updating data in Firebase

2. Edit card modal

Updating data and Modals: Edit card modal

3. Updating the card text

Updating data and Modals: Updating the card text

4. Setting the labels

Updating data and Modals: Setting the labels

5. Text area auto resize

Updating data and Modals: Text area auto resize

8. Reading realtime data from Firebase

1. First look at onSnapshot

Reading realtime data from Firebase: First look at onSnapshot

2. Working with document changes

Reading realtime data from Firebase: Working with document changes

3. Realtime cards with updates

Reading realtime data from Firebase: Realtime cards with updates

9. User authentication and React context

1. React Context API

User authentication and React context: React Context API

2. Firebase Authentication and set up

User authentication and React context: Firebase Authentication and set up

3. User sign up

User authentication and React context: User sign up

4. Logging in and out

User authentication and React context: Logging in and out

5. Listening for auth changes

User authentication and React context: Listening for auth changes

6. Conditional rendering

User authentication and React context: Conditional rendering

7. Rendering boards based on user

User authentication and React context: Rendering boards based on user

8. Redirecting and error messages

User authentication and React context: Redirecting and error messages

9. Roles & permissions

User authentication and React context: Roles & permissions

10. Deployment

1. Building for production

Deployment: Building for production

2. Deploying to Netlify

Deployment: Deploying to Netlify

11. Thank You

1. Thank you

Thank You: Thank You

Course Images

React.js Academy for Beginners with Firebase

By Packt

Booking options

Highlights

Description

Course Content

About The Provider

Tags

Reviews