username

password

stripe_secret

stripe_publishable

Gain insights into Meteor.js, explore JavaScript concepts, and discover how to build full-stack applications with React integration, email support, and Stripe payment processing.

meteor-docker.tar.gz

CreateMeteorApp

CreateMeteorAppSettingsFile

CreateReactiveApp

RunAppWithAuthentication

RunAppWithInstallation

Meteor.js is a Node.js framework for developing JavaScript applications. It's used to create full-stack applications that use a single language on both the server and client sides. Meteor.js is easy to use and simplifies the development of web applications.

This course will begin by discussing the fundamental concepts of Meteor.js before moving on to refresh the learner's knowledge of some key aspects of JavaScript used in React, another JavaScript framework. Then, through hands-on experience, you will learn how to build a production-grade Meteor.js application with a React frontend. Following that, you'll learn how to set up an SMTP server to send transactional emails and how to integrate Stripe into your Meteor.js application to accept payments.

By the end of this course, you will be able to create a full-stack application from scratch using Meteor.js and feel confident working with MongoDB as well. You will also be able to integrate Stripe into any Meteor.js application you create.

Building Full Stack Applications Using Meteor.js

# Application layout
The bookshop application’s structure determines that we have some of our components available to the users only if they’re authenticated. In the previous lessons, we implemented Meteor authentication using the `accounts-password` package. This lesson builds on the previous by adding client-side routing to the application.

# React Router
A **router** is used by a single page application (SPA) to navigate between different screens or components of the application. React Router is a `npm` package that’s installed through the terminal to add routing capabilities to an application. An application that’s non-trivial needs a way to navigate between all components available in it.

_The_ React Router is added to our project by running the command below on the terminal inside the project directory. This command installs and adds the router package to the project.
```js
meteor npm install react-router-dom
```
The coding playground below captioned “React application with routing using React Router” is a sample React application that shows how React Router works. On **line 2** of the `app.js` file, we import `BrowserRouter` as `Router`, `Switch, `Route`, and `Link` from the installed package.

The `Router` component, which was imported from the package, is a parent component and should be placed in the topmost layout of the application. Remember that the `App` component is usually the topmost component of our application. Because we’ve installed the router, however, we want the router component to be the parent so that all other components become its `children`. 

```jsx
 <Router>
   <App />
 </Router>
```  
The `Link` component is like an anchor link on a web page that points to a specific location on a webpage. A `Route` renders a component when a path is matched, while a `Switch` looks through its children Routes and renders the first that matches the current URL.

In the example below, when the path of the URL is `/about`, the `Switch` component renders the `Route` for the `About` component. Click the “Run” button, and experiment with the sample application. We’ll install the `react-router-dom` package in our bookshop application next.

Learn about routing in a React application and styling a React application with Bootstrap.


Getting Started

Meteor Framework

Introduction to MeteorJS

Working With Data

A Pop Quiz On Data Access With Meteor

A Simple Idea Vote Application

JavaScript Refresher

Pop Quiz: JavaScript Refresher for React Development

An Overview of React

Pop Quiz: React

Coding an Online Bookshop

Deployment

Appendix

Creating Application Layout and Installing Bootstrap

Application layout

React Router