ūüöÄ  We just launched hackr for designers. Visit it here

Hackr.io is a programming community to find and share the best online programming courses & tutorials. Join them, it only takes 30 seconds.

Here's how it works:

share-icon

Anybody can submit a course or a tutorial

thumbs-up

Community upvotes the useful tutorials

upwards-graph

The best tutorials rise to the top

Meteor and React for Realtime Apps (udemy.com)

Visit Tutorial
Paid Video Beginner
Top Three Medal #3 out of total 10 Meteor tutorials & courses

Why developers like this tutorial (one-liner reviews):

Content quality

Qualified Instructor

Video quality

Course Pace

Course depth and Coverage

Add your one-liner review here:

Tutorial Info

Session:
Self Paced
Video:
9 hours on-demand video
Certificate:
Available On Completion
Taught by:
Submitted by:
Visit Tutorial

Tutorial Details

What you'll learn

  • Create interactive web apps amazingly fast
  • Build amazing single page applications with Meteor and React JS
  • Master fundamental concepts behind structuring Meteor applications
  • Learn the true purpose of Meteor in a modern application
  • Be the engineer who explains how Meteor works to everyone else, because you know the fundamentals so well
  • Build and prototype interesting personal projects in a weekend

Requirements

  • You'll need a Mac or PC

About

Description

This is the tutorial you've been looking for to master building dynamic web apps with Meteor JS, with all the most important topics covered in great depth!

Authentication?  Covered.  Routing?  Of course!  Security? We got it.

Meteor JS can get you a position in web development or help you build that personal project you've been dreaming of.  Meteor is the ultimate framework for developer productivity; it is bar-none the fastest technology you can use to make fast and interactive web apps in just a few hours.

This course will get you up and running quickly, and teach you the core knowledge you need to deeply understand and build interesting apps with Meteor and React.

We'll start by mastering the fundamentals of React, including JSX, “props", “state", and eventing. Source code is provided for each lecture, so you will always stay up-to-date with the course pacing. After an introduction to React, we'll dive right in to Meteor, covering topics like Collections, Meteor Methods, Subscriptions, and Publications.

If you are new to Meteor or React, or if you've been working to learn it but sometimes feel like you still don't quite 'get it', this is the course for you! To learn Meteor you have to understand it.

  • Learn how to secure Meteor applications with enterprise-grade security. ¬†Don't let your data leak!
  • Set up user authentication and permissions using Meteor's built-in auth system.
  • Use React to render your Meteor data; master the process of breaking down a complex component into many smaller, interchangeable components
  • Grasp the difference between "props" and "state" and when to use each
  • Develop complex applications that scale in complexity by mastering Meteor

I've built the course that I would have wanted to take when I was learning Meteor. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.

Who is the target audience?
  • Programmers looking to learn Meteor
  • Engineers who have researched Meteor but have had trouble mastering some concepts
  • Web developers who are looking to build a full-stack web application
  • Entrepreneurs who want to make their own apps without relying on others

Syllabus

The Basics of Any Meteor App

One Quick Item...

Link to All Code For This Course

Installing Meteor

Purpose of Meteor Projects

Project Dependencies

React vs Meteor

What is Meteor, Again?

A React Primer

Getting Something on the Screen

Importing React

Building a React Component

Meteor Startup

Project Overview and Challenges

Export Statements

Nesting Component

Working with Dummy Data

Building a List of Images

Communication with Props

Adding CSS in Components

Key Props

Image API Endpoint

AJAX with Axios

Class Based Components

Loading Data with Lifecycle Methods

State in Components

Implementing State

Recap on State

Passing Images as Props

Filtering Out Albums

Image Description

Upvotes and Downvotes

Implementing Image Score

Wrapup

On to Meteor!

Directory Introduction

Challenges in this App

App Boilerplate

MongoDB Collections

Creating MongoDB Collections

Generating Data with Faker

Get Data with Collection Queries

Inserting Records into Collections

Reading Server Console Logs

Boilerplate for Employee List

Publications and Subscriptions

Publications with Cursors

Creating a Container

Publication and Subscription Review

Employee Detail Scaffolding

Styling Employee Details

More Styling and Bug Fixes

Flexbox Styling

Click Handlers

Updating Subscriptions

Refactoring from Functions to Classes

Fetching More Users

Getting More Complex - Meteor Methods

Project Overview

Problems to Solve

Redirecting Short Links

Boilerplate Setup

Header Component Warmup

Links Collection

Link Create Component

Form Submit and Refs

The Insecure Package

Handling Data Securely

Safely Changing Data with Meteor Methods

Validating URLs

Graceful Error Handling

Generating Unique Tokens for URLs

A Publication for Links

Link List Table

Intercepting Requests with Meteor Middleware

Finding Tokens in URLs

Redirecting Users to Long Links

Redirecting Users to Long Links Continued

Updating Mongo Records

Wrapup

Full Stack Development - Workspaces

Workspace Collaborator Overview

Project Challenges

Outlining Component Definitions

Bootstrapping an App

Scaffolding a Header

Authentication UI

Authenication UI Continued

Bins Collection

Insert Bins Method

Create Bin Button

Accessing Bins with Publications

Claiming Bins with Subscriptions

Rendering a List of Bins

Removing a Bin

Routing with React Router

More on React Router

Default Components with IndexRoutes

Accessing the URL with Route Params

Navigation with Link Tags

Programmatic Navigation

Just the Right Bin

Just the Right Bin Continued

Bin Editor

Markdown Editor

Capturing Change Events

Update Meteor Method

Markdown Viewer

Translating Markdown to HTML

Sharing Bins

Bin Sharing Form

Meteor Method for Sharing

Rendering Shared Addresses

Shared Bins Publication

Share Subscriptions

Markbin Review

RallyCoding

Wanna find a programming buddy?

Learning a new programming language can be tough especially if you are a beginner in programming. Find a programming buddy and learn this tutorial in a more engaged & fun way.

Discuss this tutorial:

Ask a question or write your feedback/review of this course or tell anything to the people taking this course.

Kickstart the conversation!