Forem: AlterClass

Introducing the AlterClass accelerator program

Grégory D'Angelo — Fri, 18 Mar 2022 11:15:26 +0000

Want to launch an online course this year? What about next month?

At AlterClass, we'd like to empower the next generation of tech instructors;
that's why we are launching the AlterClass accelerator program.
This is the perfect opportunity to help you get started and launch a successful
online course in 30 days only.

This exclusive program maps out every step you need to take to have a course
ready to sell within 30 days, no matter where you're starting from — whether
it's your first, second, or fifteenth course. You'll get the techniques,
resources, and guidance you need to launch and start selling your course.

The AlterClass accelerator program includes:

👨‍💻 Live sessions: 1-hour live session every week for 4 weeks to get clear
guidance and a detailed strategy for a successful launch.
🏅 Private Discord access: Be part of the first AlterClass instructors
cohort and get access to a private Discord channel with the AlterClass team
and the other authors.
🛠 Course builder: Create an engaging and interactive programming course by
using the AlterClass course builder.
📢 Extra exposure: We'll feature your course on the AlterClass marketplace
to give it an extra boost when you launch and beyond.
⭐️ Pro instructor: Receive an AlterClass Pro subscription for free for a
year and access advanced features such as course pre-orders.
💵 No transaction fees: We'll waive the transaction fees of your course
sales. So, you will keep all the profit for yourself.

What are you waiting for? Join the AlterClass accelerator now and be part of the
first instructors cohort → Apply now.

Video vs. Interactive and Multi-Media Content for Programming Courses

Grégory D'Angelo — Sat, 02 Oct 2021 06:38:12 +0000

At some point in our career, we all have watched coding tutorials on YouTube or followed some coding courses on Udemy to stay up to date on a specific technology or learn completely new skills. Myself, included.

And as an instructor, creating those video-based and coding-along courses/tutorials are great as it helps to quickly and easily share our knowledge on a topic by screencasting our code on VS Code.

But here's the catch.

The resources created this way that we share for free on YouTube or through paid courses on Udemy (or elsewhere) are passive learning and do not help our viewers.

Who wants in 2021 to sit for hours in front of a screen watching someone coding, especially after being forced at home during the COVID-19 pandemic?

Plus, I'm asking you. Have you ever applied the skills taught in these videos in a real-world project?

Are you even able to remember what you have seen from those videos a few weeks later?

Or, in other words, are you really learning something from those video-based courses apart from a few tips here and there?

Finally, I want you to think about it. Is the coding-along format really efficient to teach a new skill in software development?

It is what I will explore in this article and provide you with a better alternative based on interactive and multi-media content where your students can learn at their own pace and practice along the way.

I will cover:

What's wrong with video-based and coding-along courses?
Why should you use interactive and multi-media content?
Getting started

What's wrong with video-based and coding-along courses?

In some way, video-based only courses are a double-edged sword. Let me explain.

On one side, platforms like YouTube or Udemy have allowed people to share an incredible amount of high-skilled knowledge on the internet, either for free or a few bucks. In addition, creating videos has become very easy and inexpensive as anyone with a smartphone can do it.

As a consequence, it has allowed more and more people across the globe to access this knowledge and acquire some kind of education through those resources.

However, on the other side, video-based only courses are by far not the best way to learn any skill as practical as programming or software development in general.

As I often say, you don't learn how to drive a car or be a better driver only by watching others unless you are an artificial intelligence. Software development is no different.

Coding requires a significant amount of practice to really acquire the skill and being able to use it in different situations outside of the classroom.

Indeed, if you just stay passive in front of your screen, watching the instructor building an application with X and Y technologies, then there is a good chance that you won't remember anything. And even if you try to code along by pausing the video several times along the way and reproducing instruction-by-instruction what the instructor is typing, I bet you won't be able to apply what you've "learned" in another context/project.

Learning this way is not practical at all, let alone fun.

In summary, in video-based only (or coding-along) courses, the skill taught do not stick for long or at all, and worst than that, you rarely can use it elsewhere.

Moreover, for an instructor, producing high-quality video content can be challenging and sometimes requires expensive gear (such as a good microphone, a decent camera if you plan to film yourself, etc...). I don't even mention the time needed to film and edit all those videos. Plus, if you need to update some content of your course because the web framework you are teaching about has released a new version, you'll have to re-record entire videos.

Nevertheless, videos are an excellent medium as part of a multi-media content course to emphasize or show something specific such as before asking your students to complete an exercise or to give them your solution of a coding assignment.

Why should you use interactive and multi-media content?

From now on, you should be convinced (I hope so) that videos only is not great to teach and learn technical skills.

Students need high-quality content which is interactive, practical, and allows them to learn at their own pace by practicing over and over again until they get it.

In case you are still not convinced about it, check out how Josh Comeau made $550k in revenue when he opened the pre-orders for his CSS for JS Developers online course that combines videos, articles, interactive widgets, and mini-games.

Impressive, isn't it?

So, why using several media types and building an interactive online course is so important?

One of the main reasons is that people are not looking to learn a new skill or stay up to date just for fun. No, people are looking to acquire real employable skills which could help them scale up their careers.

When creating an online course, you have to think about the value you provide to your students, right from the choice of the course topic to the content creation.

It is essential you always think about what problem(s) you are solving with your online course for your students and how they could get the most out of it in their career.

All this to say that you need way more than just passive learning. Indeed, no one will want to recruit someone that claims to know how to create web applications with React JS only after watching videos passively on YouTube or Udemy and reproducing every keystroke from the instructor without thinking by himself.

You need to make your students think and really get a grasp of what you are teaching. The only way I know is by making your students practice by themself (with some guidance from you, of course), make mistakes, think and try again, and build something meaningful that they would be proud of. Large and real-world projects are a great way to do that.

Also, they need to learn gradually and be reassured that they completely understand everything from what they are learning. As the instructor, you could do that by providing them with practical exercises, quizzes, and mini-challenges for example.

So, instead of showing everything to your students through videos only, and giving them no time to think and assess their knowledge, use several types of media throughout your online course and make your course as interactive as possible. Your students will thank you for that as their learning experience will be richer and more fun, and they will feel more engaged.

Getting started 🚀

Alright! Now that you know how important it is to create online courses based on interactive multi-media content, you can start building your own online course.

The easiest way to get started is to sign up for a free account on AlterClass and start creating your online courses right away!

How to make money selling courses online in 2021 (as a developer)

Grégory D'Angelo — Wed, 29 Sep 2021 15:05:55 +0000

As a developer, there are a lot of different ways to make an (extra) income from your skills other than your day-to-day job. Among all of the options you have, creating and selling courses online to make money is probably the most promising.

Indeed, the demand for flexible and interactive online courses has been extremely high over the past three to five years, and it will grow even more: the e-Learning market surpassed $250 billion in 2020 and is expected to reach $1 trillion by 2027. In other words, the online courses market is gigantic, and there are a lot of buyers out there looking for high-quality courses to upgrade their skills so they can upscale their career.

And because AlterClass is all about online education for developers, below are some critical steps and pieces of advice you can follow right now to create and sell programming courses online.

1. Choose the right topic

As obvious as it sounds, the very first thing to do when it comes to creating a new online course is to choose a topic.

Choosing the right topic to teach can be tricky, but it is crucial for you as the instructor but also for your future students. Indeed, you don't want to choose a subject that no one cares about anymore, like teaching about an outdated web framework, for example, or a topic you are not comfortable with.

You need to find that sweet spot where you have enough practical experience about an in-demand technology in the industry. People are NOT looking to spend hours learning a new technical skill just for the fun of it (well, some of them do, but they are by far not the majority). Instead, people are looking to acquire new skills that will help them in their career, either with their current job or to look for a new job.

So you must choose a topic for your students, so they get real employable skills by learning from your online course. In other words, you have to choose a topic that will impact the life of your students and not just a simple thing they can learn about by watching a 15-minutes Youtube video.

On the other end, you need to have enough experience with the technology you'd like to teach. Indeed, you need to create high-quality content for your course to teach the theory and come up with practical exercises so your students can learn by doing. You can only do that if you have enough practical experience with what you teach.

But don't get me wrong! You don't need to be an expert with 15 years of experience in your chosen topic. You can very well choose a subject you've learned three months ago and have been using so far. You'll be well suited to teach it to beginners with zero experience in this specific topic as you'll know how to speak to them.

Finally, don't think you can't teach something just because there is already a course about it somewhere on the web. It is just the opposite! It probably means that there is a high demand for this topic. Plus, we all have different teaching styles, and because of that, your course will be better suited for some students than any of the existing courses.

You can also find a niche inside the topic you'd like to teach. For example, there is a lot of React JS courses out there. But what about Testing React JS applications? Or you can teach your students about a topic they can apply in a particular situation, like building an e-commerce website with Next.js, FaunaDB, and Stripe?

If you are a software developer, you have something to teach. So think about it and find your niche topic.

2. Create your online course

Once you have your topic for your online coding course, it is time to create the content.

Most of the programming content we can find on the internet is video-based, either on YouTube or an e-learning platform like Udemy. You also have a lot of text-based content through blogging platforms like Hashnode or Medium.

But I'd like you to think about it for a moment. How do you think you learn the best technical/programming skill?

Is it by watching hours of videos of someone coding? Or is it by practicing as you learn at your own pace?

What I'm trying to say here is that you don't learn such practical skills as programming just by watching others coding, like you don't learn to drive just by watching others driving a car.

So, for the content of your online programming course, you need to create interactive and engaging lessons. What I mean by that is that you need, on top of the theory (which you could provide through videos and text), to give your students the opportunity to practice the skills you are teaching and to learn on their own through exercises, programming assignments, and projects.

It's also important to include several quizzes throughout your online course to test the knowledge of your students along the way and help them assess their learning.

You'll definitely pass the most out of your time creating the content of your online course. So you must have the right tool to help you with that. However, there is not a lot of options out there for creating high-quality and interactive programming courses online, which is why we've built AlterClass.

3. Choose your platform to host and sell your course

At this point, you should have the content of your online course ready to be published (or part of it if you'd like to release it in phases).

Now, you need to choose a platform that enables you to create the best learning experience for your students and makes it easy for you to sell your online course with integrated payment processing.

Fortunately, there are many existing e-learning platforms/marketplaces you can use to host and sell your course quickly. Some of the most popular are Udemy, Teachable, Thinkific, and AlterClass. They all have their pros and cons regarding the type of content you can use to create your online course or the pricing model they use. You need to consider that when choosing the platform for your course. More on that in a future article.

Or you can either build your own platform and host your online course on it. The advantage of doing so is that you have full control over it. However, you'll spend a LOT of time (probably months) working on things like authentication, payments, hosting, and more before being able to publish your course. Plus, you'll not have this time to focus on creating the content of your course, which is by far the most important thing here.

Keep in mind that there is no good or bad solution. Choose the option that best suits your needs, budget, and time.

4. Decide how much to charge for your course

Now that you are all set, you need to decide how much to charge for your online course. While you should not overthink it, there are still a few things you need to consider to choose the price of your course.

First, you need to check the competition and see where you stand within the market. Here are a few questions you may ask yourself to assess it:

Are you offering a course on a topic that is widely available in the market or a course on a specific niche topic?
How does your course differ from the existing ones?
Do you have a specific teaching style compared to your competitors? Or do you have an innovative teaching approach with your course?
Is your course mainly video/text-based, or does it include a lot of interactive content?

Then, you need to measure somehow the value you are offering your students with your online course. In step 1, when choosing the topic for your course, you should already have come up with a topic that brings value to your students' careers.

Indeed, the more they can apply what they have learned throughout their learning journey with your online course, in the real world, in their career, the highest the value you are providing, or in other words, the higher the price of your course.

Finally, you also need to take into account the cost of production. For example, if you include videos, you should take into account the cost of the gears you have been using (camera, microphone, software, etc...), and the cost of filming and editing those videos as well.

But you should also consider the cost of running your course. Indeed, depending on the platform you choose to host and sell your course, you probably have some fees for using the service. So make sure to include those fees in your calculation.

Summary - You got skills. Monetize them!

In summary, creating and selling online programming courses is an excellent way to generate (extra) income as a developer and to help your peers learn from your skills and experience.

In 2021, more and more people are moving online to learn new things and gain the skills they need to improve their careers and future. Plus, technical skills are in high demand in the industry. So as a developer, you have more than ever the opportunity to monetize your skills online.

However, creating an interactive and engaging technical course online is not an easy task. Most of the platforms available do not provide the necessary tools to do it, and some of them are charging high fees for their service.

Luckily, with the AlterClass all-in-one platform, you can build better online programming courses more easily and deliver the best learning experience for your students.

So if you are serious about monetizing your skills online, checkout AlterClass as it is free to use.

Originally published here: How to make money selling courses online in 2021 (as a developer)

How To COLLECT PAYMENTS With STRIPE + NEXT.Js (Step-By-Step Tutorial)

Grégory D'Angelo — Fri, 09 Jul 2021 10:32:49 +0000

How to COLLECT PAYMENTS with STRIPE + NEXT.js (Step-by-Step Tutorial)

Today, we gonna learn how to collect payments from our e-commerce website using Stripe.

More precisely, we gonna look at how to use Stripe Checkout to easily and securely accept payments from our e-commerce website built with the Next.js framework.

And as you'll see, it will only take a few minutes of your time to sell your products online and, more importantly, get paid! So without further ado, let's dive into it.

Watch the video on Youtube or keep reading.

Table of content

What are we building?
Set up your Stripe account + Next.js app
Create your products on the Stripe dashboard
Load Stripe in your Next.js app
Create a Next.js API endpoint to create a Stripe checkout session
Create a Next.js API endpoint to retrieve a checkout session
Redirect the user to the Stripe checkout page
Create a webhook+Next.js API endpoint to handle Stripe events
Create the success page
Thank-you

What are we building?

Processing payments is an essential part of any e-commerce website. Stripe is a toolkit and an API used by millions of businesses to accepts payments, manage customers, handle recurring subscriptions, and more.

It is very popular amongst startups because it is developer-friendly. And as you'll see, it only takes a few steps to collect payments from your React or Next.js applications using the Stripe API and toolkit.

So, in this article, we gonna use our existing Next.js website and focus on the Stripe integration from the front-end side to the back-end.

However, I'm not going to show you how to build the Next.js e-commerce website from scratch, but you can find the source code on Github. So check this out!

If you'd like to learn more about Next.js, check out my FREE course here.

So, in this article, we gonna cover:

How to set up our Stripe account and our Next.js app to collect payments
Create the products we want to sell in the Stripe dashboard
Learn how to create a checkout session from our Next.js API and redirect the user to the Stripe Checkout page from our user interface so we can collect the payment details such as the user email address and the card's details
Learn how to handle Stripe events using webhooks and our Next.js API.

🚀 Let's go!

Set up your Stripe account + Next.js app

Before we get started, make sure to install the Stripe and the @stripe/stripe-js libraries into your Next.js project.

nom install --save stripe @stripe/stripe-js

Then you need to create an account on stripe.com. But don't worry, it's entirely free. You don't have to provide you credit cards or anything. You just need to click the sign-in button at the top, and you should be good to go.

Once you are registered, you should be redirected to your Stripe dashboard. So the first thing we're going to need here is our Stripe API keys to query the Stripe API. So click on the developers link in the sidebar and click API keys.

As we can see here, we have two API keys.

The first one is the publishable key that you need to identify your account with Stripe.

The second one is the secret key. So be careful with this one. You should keep it confidential and don't publish it on your Github account, for example.

Also, note that here we are using Stripe in test mode, meaning that everything we will do is for demonstration only. It can be used to test our application and our payment flow end-to-end to make sure everything is working fine before deploying to production.

By the way, when you turn on the live mode in Stripe, you will get two new API keys. So make sure to use the right keys for the right environment.

All right, with that being said, copy your keys and go back to your code editor.

Inside your Next.js project, create a new file called .env.local and create the following environment variables:

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...

Create your products on the Stripe dashboard

So before going further with our Next.js application, go back to your Stripe dashboard, as we'll create the products we want to sell.

From here, click on products, an add product to create a new product.

Then, type in the name of your first product, upload an image for your product and set the price and the currency.

Finally, click \"save and add more\" to add the second product. And repeat those steps for every product you'd like to sell.

When you are done creating all your products, copy each product's API ID. We're going to use this ID from within our application and pass it to Stripe with our API requests to tell Stripe which products the user wants to buy.

Load Stripe in your Next.js app

We are all set! So go back to your code editor.

The first thing we're going to need is to load Stripe into our Next.js application. So inside a get-stripe.js file, load the loading wrapper loadStripe from the stripe-js library.

// get-stripe.js
import { loadStripe } from '@stripe/stripe-js';

Then create a variable to store the Stripe instance we are about to retrieve, and create a function named getStripe for doing so.

// get-stripe.js
...
let stripePromise = null;

const getStripe = () => {
  ...
};

Inside this function, make sure that we don't have already loaded Stripe. In that case, retrieve a Stripe instance by calling loadStripe and pass in your Stripe publishable key using the environment variable we created earlier. And then, return the Stripe instance from that function.

// get-stripe.js
...
const getStripe = () => {
  if (!stripePromise) {
    stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
  }
  return stripePromise;
};

Finally, don't forget to export as default the getStripe function.

export default getStripe;

Create a Next.js API endpoint to create a Stripe checkout session

All right! Now, before using the getStripe function from within our Next.js application, we will create the API endpoints we need to create a Stripe checkout session and retrieve the data from a checkout session using its session ID.

So start by creating a new folder named api under the pages folder. And then, within this folder, create another folder called checkout_sessions and create a file named index.js.

So inside this file, we will create the API endpoint we need to create a Stripe checkout session.

What is great about Next.js is that we don't have to create and set up our own Node.js server to create those API endpoints. Instead, we can do everything inside the same project, and Next.js would create and serve those API endpoints.

So, start by importing the Stripe module from stripe and then instantiate a new Stripe instance using your secret key from the STRIPE_SECRET_KEY environment variable.

// /pages/api/checkout_sessions/index.js
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

Next, create an async handler function and export it as default.

// /pages/api/checkout_sessions/index.js
...
export default async function handler(req, res) {
  ...
}

This handler function accepts two arguments, the HTTP request, and the HTTP response.

This is the only function that we need to create an API endpoint with Next.js. So within this function, make sure the request that we're receiving is an HTTP POST request. Otherwise, return of 405 status code to the client that initiated that request.

// /pages/api/checkout_sessions/index.js
...
export default async function handler(req, res) {
  if (req.method === 'POST') {
    ...
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

Then, if we get a POST request, we will handle everything inside a try-catch block. Finally, we return a 500 status code to the client if we catch an error.

// /pages/api/checkout_sessions/index.js
...
if (req.method === 'POST') {
  try {
    ...
  } catch (err) {
    res.status(500).json({ statusCode: 500, message: err.message });
  }
}

Otherwise, we create our checkout session using Stripe and pass inside the create function all the session's options.

Here, we set the mode to \"payment\", we enable \"card\" as the only payment method (check out the Stripe documentation for more payment methods), we pass all the line items the user wants to buy, and finally, we set the success URL and the cancel URL.

// /pages/api/checkout_sessions/index.js
...
if (req.method === 'POST') {
  try {
    const session = await stripe.checkout.sessions.create({
      mode: 'payment',
      payment_method_types: ['card'],
      line_items: req?.body?.items ?? [],
      success_url: `${req.headers.origin}/success?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${req.headers.origin}/cart`,
    });

    res.status(200).json(session);
  } catch (err) {
    res.status(500).json({ statusCode: 500, message: err.message });
  }
}

The success_url will be used by Stripe to redirect the user once his payment has been successful. Here we use /success for this URL and pass the current checkout session ID as a query parameter.

If the user cancels his payment from this Stripe checkout session, we redirect him to his shopping cart page, /cart.

By the way, don't forget to return the newly created sessions to the client.

And that's it for this API endpoint.

Create a Next.js API endpoint to retrieve a checkout session

Now let's create a second API endpoint to retrieve a checkout session using its session ID.

So create a new file inside the checkout_sessions folder and call it [id].js.

Once again, load Stripe inside that file and use your Stripe secret key to create a new instance.

// /pages/api/checkout_sessions/[id].js
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

Export as default an async handler function and retrieve the ID from the query parameter of the request.

// /pages/api/checkout_sessions/[id].js
...
export default async function handler(req, res) {
  const id = req.query.id;
}

Use a try-catch block, and if something goes wrong, return of 500 status code to the client.

// /pages/api/checkout_sessions/[id].js
...
export default async function handler(req, res) {
  const id = req.query.id;

  try {
    ...
  } catch (err) {
    res.status(500).json({ statusCode: 500, message: err.message });
  }
}

Then check the value of the ID to make sure that it starts with cs_. Otherwise, throw an error.

But if the ID is valid, retrieve the checkout sessions using Stripe by passing in the sessions ID and return it to the client.

// /pages/api/checkout_sessions/[id].js
...
export default async function handler(req, res) {
  const id = req.query.id;

  try {
    if (!id.startsWith('cs_')) {
      throw Error('Incorrect CheckoutSession ID.');
    }
    const checkout_session = await stripe.checkout.sessions.retrieve(id);

    res.status(200).json(checkout_session);
  } catch (err) {
    res.status(500).json({ statusCode: 500, message: err.message });
  }
}

All right! So we're done with our API endpoints.

Let's keep going with our user interface.

Redirect the user to the Stripe checkout page

So now, inside our shopping cart page, we're going to implement a function called redirectToCheckout.

// /pages/cart.js
const redirectToCheckout = async () => {
  ...  
};

This function is called when the user clicks on a button from this page to pay for its order.

So inside that function, start by creating the Stripe checkout sessions using axios to perform a POST request to the /api/checkout_sessions API endpoint we just created.

And once we get the response from the server, we can retrieve the ID of the newly created checkout session.

Don't forget to pass the line items to the body of the request. Below, I'm iterating over the items inside the user's shopping cart, and for each item, I'm just passing its ID and quantity.

Note that the key for the ID is actually named price and NOT id.

// /pages/cart.js
const redirectToCheckout = async () => {
  // Create Stripe checkout
  const {
    data: { id },
  } = await axios.post('/api/checkout_sessions', {
    items: Object.entries(cartDetails).map(([_, { id, quantity }]) => ({
      price: id,
      quantity,
    })),
  }); 
  ...
};

So when we have created this checkout session successfully, we can redirect the user to the corresponding checkout page.

// /pages/cart.js
const redirectToCheckout = async () => {
  ...

  // Redirect to checkout
    const stripe = await getStripe();
    await stripe.redirectToCheckout({ sessionId: id });
};

Create a webhook+Next.js API endpoint to handle Stripe events

So now that we're able to create a checkout session and accept payments using the Stripe checkout page, we still need to implement one more thing.

Indeed as all the payments are handled by Stripe outside of our application, we need to implement a webhook to listen to a Stripe event to know when Stripe has successfully processed a payment.

For that, we need to go back to our Stripe dashboard and create a webhook endpoint.

So from within your dashboard, click on the developers' link and then webbooks. From here, click on \"Add endpoint\", enter the URL of your application and add /api/webhook, which is the Next.js API endpoint we are about to create just after that.

Finally, select the event we want to listen to and choose checkout.session.completed, which is the event that Stripe will send to the endpoint URL once a session has been completed successfully. In other words, when the user has successfully paid for its order.

Then click \"Add endpoint\" to actually create this endpoint.

From here, copy your webhook signing secret, go back to your application, and create a new environment variable called STRIPE_WEBHOOK_SECRET inside the .env.local file, and pass the value you just copied.

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

Now, create a new folder under the api/ folder and call it webhook.

Inside this folder, create a new file named index.js that we will use to implement our webhook API endpoint.

Inside this file, import the Stripe module from stripe and the buffer method from the micro npm package. You can install this package with npm install micro. We are going to use this package/method to retrieve the raw body from the request.

// /pages/api/webhook/index.js
import Stripe from 'stripe';
import { buffer } from 'micro';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

Then export a config object with the following key/value to tell Next.js not to parse the body of the request because we need the raw data of that body to verify the webhook event signature. Why is it important? Because we need to make sure the webhook event was actually sent by Stripe and not by a malicious third party.

// /pages/api/webhook/index.js
...
export const config = {
  api: {
    bodyParser: false,
  },
};

Next, as usual, export as default an async handler function and check that we received a POST request. Otherwise, return of 405 status code.

// /pages/api/webhook/index.js
...
export default async function handler(req, res) {
  if (req.method === 'POST') {
    ...
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

Then create a new variable named event to store the webhook event data, and use a try-catch block to catch any errors that could occur.

// /pages/api/webhook/index.js
...
export default async function handler(req, res) {
  if (req.method === 'POST') {
    let event;

    try {
      ...
    } catch (err) {
      console.log(`❌ Error message: ${err.message}`);
      res.status(400).send(`Webhook Error: ${err.message}`);
      return;
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

Next, retrieve the Stripe event by verifying its signature using the raw body of the request and your webhook secret key.

// /pages/api/webhook/index.js
...
export default async function handler(req, res) {
  if (req.method === 'POST') {
    let event;

    try {
      const rawBody = await buffer(req);
      const signature = req.headers['stripe-signature'];

      event = stripe.webhooks.constructEvent(
        rawBody.toString(),
        signature,
        process.env.STRIPE_WEBHOOK_SECRET
      );
    } catch (err) {
      ...
    }
  } else {
    ...
  }
}

Once everything has been successfully processed, we could add our business logic.

In our example, we just log a message to the console but feel free to add any business logic you need here, such as sending an email to the customer.

And don't forget to acknowledge receipt of the event.

// /pages/api/webhook/index.js
...
export default async function handler(req, res) {
  if (req.method === 'POST') {
    let event;

    try {
      ...
    } catch (err) {
      ...
    }

    // Successfully constructed event
    console.log('✅ Success:', event.id);

    // Handle event type (add business logic here)
    if (event.type === 'checkout.session.completed') {
      console.log(`💰  Payment received!`);
    } else {
      console.warn(`🤷‍♀️ Unhandled event type: ${event.type}`);
    }

    // Return a response to acknowledge receipt of the event.
    res.json({ received: true });
  } else {
    ...
  }
}

Create the success page

For the last step of this article, we will create the success page that Stripe will use to redirect the user back to our application when he has successfully paid for his order.

So inside a success.js file, create a new React component called Success and export it as default.

// /pages/success.js
const Success = () => {
  ...
}

export default Success;

Then if you remember, we included the checkout session's id inside the query parameter of the success URL. So, use the useRouter hook from next/router to retrieve this id.

// /pages/success.js
const Success = () => {
  const {
    query: { session_id },
  } = useRouter();
  ...
}

Once we've got this id, we could perform a GET request to /api/checkout_sessions/${session_id} using the useSWR hook from the swr package.

// /pages/success.js
const Success = () => {
  const {
    query: { session_id },
  } = useRouter();

  const { data, error } = useSWR(
    () => `/api/checkout_sessions/${session_id}`,
    fetcher
  );
  ...
}

Once we have that, we can create a side effect using the useEffect hook from React to shoot some fireworks onto the screen and clear the shopping cart. And finally, return the UI of this page.

// /pages/success.js
const Success = () => {
  ...

  useEffect(() => {
    if (data) {
      shootFireworks();
      clearCart();
    }
  }, [data]);

  return (
    <div>{/* Your UI here */}</div>
  );
}

Thank you!

All right, guys, that's it for today.

I hope you enjoyed this article (or video). If you have any questions, please let me know in the comments. And don't forget to like my video on Youtube and subscribe to support the AlterClass channel.

Thank you so much!

🚀 The React Router Module Is Now Available!

Grégory D'Angelo — Wed, 30 Jun 2021 12:22:27 +0000

I'm excited to announce that the React Router module of my React JS program is now available in your classroom. 🥳

👉 For those who have not enrolled yet, you can still benefit from the 76% limited-time discount. It is expiring soon, though.

So, in this module, you'll learn to use the popular React Router library to route users to different views in your single-page application, build navigation links, use URL parameters to build dynamic pages, code-split your app using React.lazy, and more.

If you don't have time to read this post, here's a quick summary of what this module has to offer in a few numbers:

12 topics from basic routing to route-based code-splitting
13 quizzes to test your knowledge
2 projects to build your portfolio
1 cheatsheet

Now, let's dive into the details.

So, what's included?

This module has one large section to teach you everything you should know to enable client-side routing in your React application and organize it into different views, using the very famous React Router library.

It is composed of the following concepts:

1. Introduction - What is Routing and Server-side vs. Client-side Routing

In this lesson, you'll learn about the concept of routing in a web application, understand server-side routing, its pros, and cons, and learn about the differences between server-side and client-side routing.

2. Create Basic Routes With BrowserRouter

Next, you'll learn how to enable routing in your app using the <BrowserRouter /> component from React Router, and create the routes and render the different views of your app using the <Route /> component.

3. Use The Link Component To Navigate Between Routes

Then, you'll learn how to use the <Link /> component from React Router to allow your users to navigate around your application in a declarative and accessible way.

4. Style A Link That Is Active With NavLink

In this lesson, you'll learn to build navigation links using <NavLink />, which is a special version of the <Link /> component that gets an active state when the current URL matches its location.

5. Use URL Parameters With React Router

URL parameters are a fundamental concept of building web applications. In this lesson, you'll learn how to effectively leverage URL parameters in your React app using the useParams hook to create dynamic pages.

6. Use Regular Expressions With Routes

The path property of the <Route /> component can accept a string, an array of strings, or even regular expressions. So, in this lesson, you'll break down this prop and see how to create powerful rules to define the paths of your routes using regex.

7. Parse Query Strings In React Router

Next, you'll learn how to retrieve and parse the query strings from the current URL using the useLocation hook from React Router and the browser's built-in URLSearchParams API to use them in your React components.

8. Handle 404 Pages (Catch-All Routes) With React Router

In this lesson, you'll learn how to implement a catch-all route for handling 404 pages in a React app with React Router.

9. Redirect To Another Page With React Router

In this lesson, you'll learn how to use the <Redirect /> component from React Router to create a redirect rule from one route to another.

10. Protected Routes And Authentication With React Router

You'll often need to protect some pages of your application and display them only if the user is authenticated. So, in this lesson, you'll learn how to create a custom and reusable <ProtectedRoute /> component to protect your routes using React Router.

11. Programmatically Navigate Using React Router

Sometimes, you need to navigate the user to a new location without clicking on an actual link, but when he has performed a specific action in your app. That's when programmatic navigation is necessary. S, in this lesson, you'll learn how to navigate programmatically using React Router.

12. Code-Splitting With React, React.Lazy, And React Router

Finally, we'll look at what code-splitting is and how to do it, and how to implement it with React Router to split your app into separate bundles your users can progressively load when needed.

What will you build?

In this module, you'll not build only one but two projects. 🔥

As usual, I tried to design very nice projects you will proudly add to your portfolio and showcase to your friends and future employers.

So, for each project, you will use everything you've learned in the React Router module to build the corresponding application (see the screenshots below) using the provided components and pages, enable routing, create all the different routes and links with React Router, and set up route-based code-splitting using React.lazy.

Routing is an important piece of any client-side application, and therefore it is a necessary skill to have in your tool-belt as a React developer. So I hope you'll enjoy working on those projects as much as we'd enjoyed building them for you.

Once again, thank you for being part of the AlterClass community, and I hope you'll enjoy learning about React Router with me. Feel free to ask any questions or send any feedback you have by email or from our Discord server.

And for those of you who haven't enrolled yet, hurry up and take advantage of the 76% discount.

Happy coding, and see you in the classroom. 😎

[FREE COURSE] Build A Serverless JAMStack Micro-Blogging App Using Next.Js, Tailwind CSS, And FaunaDB

Grégory D'Angelo — Wed, 02 Jun 2021 09:18:05 +0000

BIG NEWS: I just launched a new (FREE!) course on my new screencasts platform. 🥳

→ Learn how to build a Serverless JAMStack Micro-Blogging App using Next.js, Tailwind CSS, and FaunaDB.

It is LIVE now and available to anyone. So feel free to share it with your friends!

This course is pretty different from my ReactJS program as it is a project-based screencast series. In other words, you'll learn with me step-by-step how to build a JAMStack application using the best modern tools and technologies available.

React: a JavaScript library that enables developers to quickly and efficiently build interactive and dynamic user interfaces. Working with React makes the developer's life a breeze, thanks to its simplicity and modular infrastructure
Next.js: a React-based web framework with a bunch of features out-of-the-box such as hybrid static and server rendering, file-system routing, API routes, TypeScript support, and so much more. It makes your React applications more powerful and faster to build and maintain
Tailwind CSS: a rapidly growing utility-first CSS framework that makes styling websites and web applications fast and flexible
Fauna DB: a flexible, developer-friendly, transactional database

In a nutshell, here's what this FREE course has to offer:

Almost 2 hours of pure coding
19 step-by-step screencast videos
4 modern technologies to add to your resume
An awesome application to add to your portfolio

What are you waiting for? 👉 Click here to start learning.

5 React Custom Hooks You Should Start Using (Explained)

Grégory D'Angelo — Mon, 01 Feb 2021 10:46:37 +0000

Are you repeating yourself by building the same features again and again inside your functional components? Then, in this video, we gonna cover the 5 custom hooks that I use every single day in most of my React applications and that you should also use.

Those 5 React hooks will boost your productivity, speed up your development process, and save you a lot of time so you can work on more valuable features for your product or application.

So let's dive in!

Watch the video on Youtube or keep reading.

Table of content

React hooks
useFetch
useEventListener
useLocalStorage
useMediaQuery
useDarkMode
Conclusion
Become a React Developer

React hooks

React hooks have been introduced to the library with version 16.8. It allows you to use state and other React features in your functional components so that you don't even need to write classes anymore.

In reality, hooks are much more than that.

Hooks let us organize the logic inside a component into reusable isolated units.

They are a natural fit for the React component model and the new way to build your applications. Hooks can cover all use cases for classes while providing more flexibility in extracting, testing, and reusing code throughout your application.

Building your own custom React hooks, you can easily share features across all components of your applications and even across different applications, so you don't repeat yourself and get more productive at building React applications.

Right now, we're going to take a look at my top 5 custom hooks, re-create them from scratch together, so you really understand how they work and exactly how you can use them to boost your productivity and speed up your development process.

So let's jump right into building our first custom React hook.

useFetch

How many times have you built a React application that needs to fetch data from an external source before rendering it to the users?

Fetching data is something I'm doing every single time when I'm building a React application. I even make several fetching calls inside a single application.

And whatever the way you choose to fetch your data, either with Axios, the Fetch API, or anything else, you are always writing the same piece of code again and again across your React components and across your applications as well.

So let's see how we can build a simple yet useful custom Hook we can call whenever we need to fetch data inside our application.

This way, we'll be able to reuse the logic inside that React hook in any functional components to fetch data with just one line of code.

Okay. So let's call our custom hook: useFetch.

This hook accepts two arguments, the URL we need to query to fetch the data and an object representing the options we want to apply to the request.

import { useState, useEffect } from 'react';

const useFetch = (url = '', options = null) => {};

export default useFetch;

Fetching data is a side effect. So we should use the React useEffect hook to perform our query.

In this example, we are going to use the Fetch API to make our request. So we are going to pass the URL and the options. And once the Promise is resolved, we retrieved the data by parsing the response body. For that, we use the json() method.

Then, we just need to store it in a React state variable.

import { useState, useEffect } from 'react';

const useFetch = (url = '', options = null) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url, options)
      .then(res => res.json())
      .then(data => setData(data));
  }, [url, options]);
};

export default useFetch;

Okay, but we should also catch and handle network errors in case something goes wrong with our request. So we gonna use another state variable to store the error. So we could return it from our hook and be able to tell if an error has occurred.

import { useState, useEffect } from 'react';

const useFetch = (url = '', options = null) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url, options)
      .then(res => res.json())
      .then(data => {
        if (isMounted) {
          setData(data);
          setError(null);
        }
      })
      .catch(error => {
        if (isMounted) {
          setError(error);
          setData(null);
        }
      });
  }, [url, options]);
};

export default useFetch;

Our useFetch hook would return an object containing the data fetched from the URL or the error if anything wrong happened.

return { error, data };

Finally, it is generally a good practice to indicate to your users the status of an asynchronous request, such as displaying a loading indicator before rendering the results.

So let's add a third state variable to our custom hook to track our request's status. We set this loading variable to true right before launching our request, and we set it back to false once it is done.

const useFetch = (url = '', options = null) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);

    fetch(url, options)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setError(null);
      })
      .catch(error => {
        setError(error);
        setData(null);
      })
      .finally(() => setLoading(false));
  }, [url, options]);

  return { error, data };
};

We can now return this variable with the others to use it in our components to render a loading spinner while the request is running so that our users know that we are getting the data they asked for.

return { loading error, data };

One more thing before we see how to use our new custom hook.

We need to check if the component using our hook is still mounted to update our state variables. Otherwise, we are introducing memory leaks in our application.

To do that, we can simply create a variable to check if our component is still mounted and use the cleanup function to update this variable when the component unmounts. And inside the Promise methods, we can first check if the component is mounted before updating our state.

import { useState, useEffect } from 'react';

const useFetch = (url = '', options = null) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    let isMounted = true;

    setLoading(true);

    fetch(url, options)
      .then(res => res.json())
      .then(data => {
        if (isMounted) {
          setData(data);
          setError(null);
        }
      })
      .catch(error => {
        if (isMounted) {
          setError(error);
          setData(null);
        }
      })
      .finally(() => isMounted && setLoading(false));

    return () => (isMounted = false);
  }, [url, options]);

  return { loading, error, data };
};

export default useFetch;

Alright! Now, let's see how easy it is to fetch data with our useEffect hook.

We just need to pass the URL of the resource we want to retrieve. From there, we get an object that we can use to render our application.

import useFetch from './useFetch';

const App = () => {
  const { loading, error, data = [] } = useFetch(
    'https://hn.algolia.com/api/v1/search?query=react'
  );

  if (error) return <p>Error!</p>;
  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <ul>
        {data?.hits?.map(item => (
          <li key={item.objectID}>
            <a href={item.url}>{item.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
};

useEventListener

Let's move into our second custom hook: useEventListener.

This hook is responsible for setting up and clean up an event listener inside our components.

This way, we don't need to repeat ourselves every time we need to add event listeners to our application.

It accepts as arguments the name of the event we want to listen for, the function to run whenever an event of the specified type occurs, the target under which to listen for the event, and finally, a set of options for the event listener.

import { useEffect, useRef } from 'react';

const useEventListener = (
  eventType = '',
  listener = () => null,
  target = null,
  options = null
) => {};

export default useEventListener;

As with the previous hook, we will use the React useEffect hook to add an event listener. But first, we need to make sure that the target supports the addEventListener methods. Otherwise, we do nothing!

import { useEffect, useRef } from 'react';

const useEventListener = (
  eventType = '',
  listener = () => null,
  target = null,
  options = null
) => {

  useEffect(() => {
    if (!target?.addEventListener) return;
  }, [target]);
};

export default useEventListener;

Then, we can add the actual event listener and remove it inside the cleanup function.

import { useEffect, useRef } from 'react';

const useEventListener = (
  eventType = '',
  listener = () => null,
  target = null,
  options = null
) => {
  useEffect(() => {
    if (!target?.addEventListener) return;

    target.addEventListener(eventType, listener, options);

    return () => {
      target.removeEventListener(eventType, listener, options);
    };
  }, [eventType, target, options, listener]);
};

export default useEventListener;

Actually, we gonna also use a reference object to store and persist the listener function across renders. We will update this reference only if the listener function changes and use this reference inside our event listener methods.

import { useEffect, useRef } from 'react';

const useEventListener = (
  eventType = '',
  listener = () => null,
  target = null,
  options = null
) => {
  const savedListener = useRef();

  useEffect(() => {
    savedListener.current = listener;
  }, [listener]);

  useEffect(() => {
    if (!target?.addEventListener) return;

    const eventListener = event => savedListener.current(event);

    target.addEventListener(eventType, eventListener, options);

    return () => {
      target.removeEventListener(eventType, eventListener, options);
    };
  }, [eventType, target, options]);
};

export default useEventListener;

We don't need to return anything from this hook as we are just listening for events and run the handler function pass in as an argument.

It is now easy to add an event listener to our components, such as the following component, to detect clicks outside a DOM element. Here we are closing the dialog component if the user clicks outside of it.

import { useRef } from 'react';
import ReactDOM from 'react-dom';
import { useEventListener } from './hooks';

const Dialog = ({ show = false, onClose = () => null }) => {
  const dialogRef = useRef();

  // Event listener to close dialog on click outside element
  useEventListener(
    'mousedown',
    event => {
      if (event.defaultPrevented) {
        return; // Do nothing if the event was already processed
      }
      if (dialogRef.current && !dialogRef.current.contains(event.target)) {
        console.log('Click outside detected -> closing dialog...');
        onClose();
      }
    },
    window
  );

  return show
    ? ReactDOM.createPortal(
        <div className="fixed inset-0 z-9999 flex items-center justify-center p-4 md:p-12 bg-blurred">
          <div
            className="relative bg-white rounded-md shadow-card max-h-full max-w-screen-sm w-full animate-zoom-in px-6 py-20"
            ref={dialogRef}
          >
            <p className="text-center font-semibold text-4xl">
              What's up{' '}
              <span className="text-white bg-red-500 py-1 px-3 rounded-md mr-1">
                YouTube
              </span>
              ?
            </p>
          </div>
        </div>,
        document.body
      )
    : null;
};

export default Dialog;

useLocalStorage

For our third custom hook, we will leverage the localStorage of our browser to persist our component's state across sessions.

For this one, we need the name of the key to create or update in localStorage and an initialValue. That's it!

import { useState } from 'react';

const useLocalStorage = (key = '', initialValue = '') => {};

export default useLocalStorage;

And we are going to return an array like the one you get with the React useState hook. So this array will contain a stateful value and a function to update it while persisting it in localStorage.

So let's dive in.

First, let's create the React state variable we will sync with localStorage.

import { useState } from 'react';

const useLocalStorage = (key = '', initialValue = '') => {
  const [state, setState] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });
};

export default useLocalStorage;

Here we are using lazy initialization to read 'localStorage' to get the key's value, parse the value if any has been found, or return the initial value passed in as the second argument to our hook.

In case something goes wrong while reading in localStorage, we just log an error and return the initial value.

Finally, we need to create the update function to return that it's going to store any state's updates in localStorage rather than using the default one returned by the useState hook.

import { useState } from 'react';

const useLocalStorage = (key = '', initialValue = '') => {
  const [state, setState] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setLocalStorageState = newState => {
    try {
      const newStateValue =
        typeof newState === 'function' ? newState(state) : newState;
      setState(newStateValue);
      window.localStorage.setItem(key, JSON.stringify(newStateValue));
    } catch (error) {
      console.error(`Unable to store new value for ${key} in localStorage.`);
    }
  };

  return [state, setLocalStorageState];
};

export default useLocalStorage;

This function updates both the React state and the corresponding key/value in localStorage. Note that we can also support functional updates like the regular useState hook.

And finally, we return the state value and our custom update function.

Now, we are good to go and can use the useLocalStorage hook to persist any data in our components in localStorage.

In the following example, we use it to store the application settings of the connected user.

import { useLocalStorage } from './hooks';

const defaultSettings = {
  notifications: 'weekly',
};

function App() {
  const [appSettings, setAppSettings] = useLocalStorage(
    'app-settings',
    defaultSettings
  );

  return (
    <div className="h-full w-full flex flex-col justify-center items-center">
      <div className="flex items-center mb-8">
        <p className="font-medium text-lg mr-4">Your application's settings:</p>

        <select
          value={appSettings.notifications}
          onChange={e =>
            setAppSettings(settings => ({
              ...settings,
              notifications: e.target.value,
            }))
          }
          className="border border-gray-900 rounded py-2 px-4 "
        >
          <option value="daily">daily</option>
          <option value="weekly">weekly</option>
          <option value="monthly">monthly</option>
        </select>
      </div>

      <button
        onClick={() => setAppSettings(defaultSettings)}
        className="rounded-md shadow-md py-2 px-6 bg-red-500 text-white uppercase font-medium tracking-wide text-sm leading-8"
      >
        Reset settings
      </button>
    </div>
  );
}

export default App;

useMediaQuery

Okay! Let's move on to our fourth React hook, useMediaQuery.

This hook will help us to test and monitor media queries programmatically inside our functional components. This is very useful, for example, when you need to render a different UI depending on the device's type or specific characteristics.

So our hook is accepting 3 arguments, which are:

first, the array of strings corresponding to media queries
then, an array of values matching those media queries, in the same order as the previous array
and finally, a default value if no media query matches

import { useState, useCallback, useEffect } from 'react';

const useMediaQuery = (queries = [], values = [], defaultValue) => {};

export default useMediaQuery;

The first thing we do inside this hook is building a media query list for each matched media query. We gonna use this array to get the corresponding value by matching the media queries.

import { useState, useCallback, useEffect } from 'react';

const useMediaQuery = (queries = [], values = [], defaultValue) => {
  const mediaQueryList = queries.map(q => window.matchMedia(q));
};

export default useMediaQuery;

And to that, we are creating a callback function wrapped inside the useCallback hook. We retrieve the value of the first media query in our list that matches or return the default value if none of them match.

import { useState, useCallback, useEffect } from 'react';

const useMediaQuery = (queries = [], values = [], defaultValue) => {
  const mediaQueryList = queries.map(q => window.matchMedia(q));

  const getValue = useCallback(() => {
    const index = mediaQueryList.findIndex(mql => mql.matches);
    return typeof values[index] !== 'undefined' ? values[index] : defaultValue;
  }, [mediaQueryList, values, defaultValue]);
};

export default useMediaQuery;

Then, we create a React state to store the matched value and initialize it using our function defined above.

import { useState, useCallback, useEffect } from 'react';

const useMediaQuery = (queries = [], values = [], defaultValue) => {
  const mediaQueryList = queries.map(q => window.matchMedia(q));

  const getValue = useCallback(() => {
    const index = mediaQueryList.findIndex(mql => mql.matches);
    return typeof values[index] !== 'undefined' ? values[index] : defaultValue;
  }, [mediaQueryList, values, defaultValue]);

  const [value, setValue] = useState(getValue);
};

export default useMediaQuery;

Finally, we add an event listener inside the useEffect hook to listen to each media query's changes. And we run the update function when changes occur.

Here we don't forget to clean up all those event listeners and return the state value from our hook.

import { useState, useCallback, useEffect } from 'react';

const useMediaQuery = (queries = [], values = [], defaultValue) => {
  const mediaQueryList = queries.map(q => window.matchMedia(q));

  const getValue = useCallback(() => {
    const index = mediaQueryList.findIndex(mql => mql.matches);
    return typeof values[index] !== 'undefined' ? values[index] : defaultValue;
  }, [mediaQueryList, values, defaultValue]);

  const [value, setValue] = useState(getValue);

  useEffect(() => {
    const handler = () => setValue(getValue);
    mediaQueryList.forEach(mql => mql.addEventListener('change', handler));

    return () =>
      mediaQueryList.forEach(mql => mql.removeEventListener('change', handler));
  }, [getValue, mediaQueryList]);

  return value;
};

export default useMediaQuery;

A simple example I've used recently is to add a media query to check if the device allows the user to hover over elements. This way, I could add specific opacity styles if the user can hover or apply basic styles otherwise.

import { useMediaQuery } from './hooks';

function App() {
  const canHover = useMediaQuery(
    // Media queries
    ['(hover: hover)'],
    // Values corresponding to the above media queries by array index
    [true],
    // Default value
    false
  );

  const canHoverClass = 'opacity-0 hover:opacity-100 transition-opacity';
  const defaultClass = 'opacity-100';

  return (
    <div className={canHover ? canHoverClass : defaultClass}>Hover me!</div>
  );
}

export default App;

useDarkMode

Okay, guys! One more hook to go.

This one is my favorite. It allows me to easily and quickly apply the dark mode feature to any of my React applications.

Let's see how to build such a hook.

This hook aims to enable and disable the dark mode on-demand, store the current state in localStorage.

For that, we are going to use two of the hooks we just built: useMediaQuery and useLocalStorage.

With useMediaQuery, we can check the user's browser preference for dark mode.

Then, with 'useLocalStorage,' we can initialize, store, and persist the current state (dark or light mode) in localStorage.

import { useEffect } from 'react';
import useMediaQuery from './useMediaQuery';
import useLocalStorage from './useLocalStorage';

const useDarkMode = () => {
  const preferDarkMode = useMediaQuery(
    ['(prefers-color-scheme: dark)'],
    [true],
    false
  );
};

export default useDarkMode;

Finally, the final piece of this hook is to fire a side effect to add or remove the dark class to the *document.body* element. This way, we could simply apply dark styles to our application.

import { useEffect } from 'react';
import useMediaQuery from './useMediaQuery';
import useLocalStorage from './useLocalStorage';

const useDarkMode = () => {
  const preferDarkMode = useMediaQuery(
    ['(prefers-color-scheme: dark)'],
    [true],
    false
  );

  const [enabled, setEnabled] = useLocalStorage('dark-mode', preferDarkMode);

  useEffect(() => {
    if (enabled) {
      document.body.classList.add('dark');
    } else {
      document.body.classList.remove('dark');
    }
  }, [enabled]);

  return [enabled, setEnabled];
};

export default useDarkMode;

And if you are looking for an easy way to do it, once again, have a look at Tailwind CSS, which supports dark mode. Coupled with this hook, Tailwind CSS becomes the easiest and fastest way of implementing dark mode in any React applications.

Conclusion

Alright! That's it, guys. Thank you so much for watching (or reading this article).

I really hope that this video was useful for you. Make sure to check the Github repository to get the source code of all the hooks we just built together.

Please share this video with your friends, hit the like button, and don't forget to subscribe on YouTube.

Become a React Developer

And if you need to learn more about building modern web applications with React, go check out my course on AlterClass.io.

My course will teach you everything you need to master React, become a successful React developer, and get hired!

I'll teach all the concepts you need to work with React, you'll get tons of hands-on practice through quizzes and programming assessments, and you'll build real-world projects on your own.

Plus, you'll be part of a growing community of learners.

So go to AlterClass.io, enroll in my course, and start building an amazing portfolio of powerful React applications.

Build a REALTIME CHAT APP in 5 MIN with React and Firebase

Grégory D'Angelo — Fri, 15 Jan 2021 11:20:05 +0000

In this video/article, I'll show you how to build a powerful real-time chat application like Discord or Slack in 5 MINUTES ONLY using React and Firebase.

You'll learn how to authenticate users with Google and work with real-time data using Cloud Firestore. Plus there is a BONUS at the end 😉

Let's go! 🚀 🔥

Watch the video on Youtube or keep reading.

Table of content

What are we building?
Create a React app
Create a Firebase project
Define the UI
Google Authentication
Read data in realtime from Firestore
Add data to Firestore
Bonus
What's next?
Conclusion
Become a React Developer

What are we building?

Before we get started, let's have a quick look at what we are building today.

It's a simple but powerful chat application that everybody can use to communicate using text messages. It's like a Discord server or a Slack room with a single channel.

To enter the chat and interact with people, the user must log in using his Google account.

Once logged in, the user can read the previous messages from the chat and start chatting by sending messages.

All messages are stored in a Firestore database and are sync in real-time with our React application.

So let's get started! I'll set a timer, and in just 5 minutes, you'll have an up and running real-time chat application.

And remember, at the end of the video, I'll show you how to deploy your app for free in 3 easy steps! So stick with me till the end, and you'll get a lived application.

Create a React app

First of all, we'll need to create a new React application. For that, we are going to use the create-react-app tool to set up our application with just one command line.

So let's go ahead and run that command with the name of our application React FireChat:

npx create-react-app react-firechat

Once it's done, we can install the dependency to work with Firebase, which is the Firebase JS SDK.

npm install --save firebase

Now, let's go ahead and open our App.js file and remove all of the boilerplate code already in place.

function App() {
  return <div></div>;
}

export default App;

Then, import the Firebase SDK along with Firestore for our database and firebase auth for user authentication.

// Firebase deps
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

Finally, we need to initialize Firebase in our app by passing in the Firebase project configuration. To get this configuration, we need a Firebase project. So let's create one.

firebase.initializeApp({ ... });

Create a Firebase project

To create a new Firebase project, head over to the Firebase console, click "Add project," and follow through the steps.

Then, to allow users to sign in using their Google account, we need to enable the Google sign-in method from the authentication page for our project.

And to use Firestore as our database for storing messages, we need to enable it from the Cloud Firestore page.

Finally, the last thing we need to do is to add a new web app to our Firebase project. Once you are done, you should get a JavaScript object representing the configuration of the Firebase project application you just created.

So go ahead and copy this configuration object and paste it into the initializeApp in your source code.

Alright! Now we should have everything we need to build our chat application. We created the React application, the Firebase project, and linked the two together.

So let's build the views of our application.

Define the UI

But first, let's see how our application is structured and break the UI down into a component hierarchy.

In this application, if the user is logged in, we show the chat with the list of messages. Otherwise, we show a button to sign in with Google.

In addition to our main App component, we have 3 other React components to create. One for the sign-in and sign-out buttons, one for the channel that contains the list of messages, and the one for the messages themselves.

Google authentication

Sign-in button

So let's start with the sign-in button.

This component is pretty straightforward. It is a simple button that accepts an onClick prop.

const Button = ({ onClick = null, children = null }) => (
  <button onClick={onClick}>{children}</button>
);

export default Button;

From theApp component, we can now render it and implement the onClick event handler.

function App() {
  const signInWithGoogle = async () => {
    // Retrieve Google provider object
    const provider = new firebase.auth.GoogleAuthProvider();
    // Set language to the default browser preference
    firebase.auth().useDeviceLanguage();
    // Start sign in process
    try {
      await firebase.auth().signInWithPopup(provider);
    } catch (error) {
      console.log(error.message);
    }
  };

  return (
    <div>
      <Button onClick={signInWithGoogle}>Sign in with Google</Button>;
    </div>
  );
}

In this event handler, we are starting the sign-in process by using the Google Auth provider from Firebase, we then set the language to the user's preferred language, and we call the signInWithPopup method to prompt the user to sign in through a pop-up window.

Okay, now we need a way to check if the user is authenticated. In this case, we don't show the sign-in button, but instead, we let him enter the chat directly.

We can quickly get access to the authenticated user from Firebase through the auth.currentUser property.

const [user, setUser] = useState(() => auth.currentUser);

But as with many applications, you will also want to know whether your users are currently signed-in or signed-out of your application. Firebase provides a method called onAuthStateChanged, which allows you to subscribe to the user's current authentication state and receive an event whenever that state changes.

Setting such an event listener is something we should do inside the useEffect React hook as it is a side effect.

So let's go ahead and set this up.

const [initializing, setInitializing] = useState(true);
const [user, setUser] = useState(() => auth.currentUser);

useEffect(() => {
  const unsubscribe = firebase.auth().onAuthStateChanged(user => {
    if (user) {
      setUser(user);
    } else {
      setUser(false);
    }
    if (initializing) {
      setInitializing(false);
    }
  });

  // Cleanup subscription
  return unsubscribe;
}, [initializing]);

This method returns a function we can use to clean up our subscription whenever our component unmount.

One more thing, the onAuthStateChanged listener is asynchronous and will trigger an initial state once a connection with Firebase has been established.

Therefore, it is crucial to set up an "initializing" state that blocks our main application from rendering while the connection is established.

After a user signs in for the first time, a new user account is created and stored as part of your Firebase project. It can be used to identify a user across every app in your project, regardless of how the user signs in.

Sign-out button

Great! Now let's add a sign-out button to allow the user to sign out from our app.

To sign out a user, we can just call the signOut method from the Firebase SDK. And as we have set up a listener to listen for any authentication changes, the user state should be updated automatically and set to null, triggering a re-render of our app, which now display the sign-in button again.

function App() {
  const signInWithGoogle = async () => { ... };

  const signOut = async () => {
    try {
      await firebase.auth().signOut();
    } catch (error) {
      console.log(error.message);
    }
  };

  return (
    <div>
      {
        user ? (
          <>
            <Button onClick={signOut}>Sign out</Button>
            <p>Welcome to the chat!</p>
          </>
        ) : <Button onClick={signInWithGoogle}>Sign in with Google</Button>
      }
    </div>
  );
}

Read data in realtime from Firestore

Now, let's jump into creating the Channel component.

This one is responsible for displaying the chat messages and an input field to allow the user to send new messages to the chat.

But first, we need to set up our Firestore database from the Firebase console.

Cloud Firestore stores data within "documents," which are contained within "collections." In our case, we'll store the chat messages of our users within a "Messages" collection.

Let's go ahead and also create our first document within this collection.

For now, we just add two fields to this new document. The text of the message itself and a timestamp representing the date and time when the message has been created.

Great! That's all we need. Let's go back to our application.

Within our Channel component, we need to query Firestore for retrieving the messages and render them onto the screen with JSX as usual. So let' start by creating a state variable to store our messages.

const Channel = ({ user = null }) => {
  const [messages, setMessages] = useState([]);
  return <ul></ul>;
};

export default Channel;

Querying data is a side effect. So we'll fetch the messages from within the useEffect hook.

Cloud Firestore provides the ability to read the value of a collection or a document. This can be done in one shot or by listening to real-time updates when the data within a query changes.

In our case, we are only interested in real-time updates. The way we do it with Firestore is by setting up an active listener to react to any changes to the query we want to perform, using the onSnapshot method with an event handler callback.

To watch the "Messages" collection for any changes, we create the following query.

const db = firebase.firestore();
const query = db.collection('messages').orderBy('createdAt').limit(100);

We get the reference to the collection, order it by the createdAt property, and finally, we limit the number of messages returned from the query.

This one is up to you. For simplicity here, we limit it to 100 messages. You can also use query cursors to read the messages by batches.

Now that we have our query, we can set up our event listener with the onSnapshot method. It also returns a function, allowing us to unsubscribe from events to clean up our side effects when the component unmounts.

useEffect(() => {
  // Subscribe to query with onSnapshot
  const unsubscribe = query.onSnapshot(querySnapshot => {
    ...
  });

  // Detach listener
  return unsubscribe;
}, []);

Once a query has returned a result, Firestore returns a QuerySnapshot. These snapshots provide the ability to actually get the data we requested through our query.

To access all the documents returned by our query, we can just get it from the docs property of the QuerySnapshot and loop over it to get the data for each document alongside the document id.

useEffect(() => {
  // Subscribe to query with onSnapshot
  const unsubscribe = query.onSnapshot(querySnapshot => {
    // Get all documents from collection - with IDs
    const data = querySnapshot.docs.map(doc => ({
      ...doc.data(),
      id: doc.id,
    }));
  });

  // Detach listener
  return unsubscribe;
}, []);

Finally, we update our state and render the messages.

useEffect(() => {
  // Subscribe to query with onSnapshot
  const unsubscribe = query.onSnapshot(querySnapshot => {
    // Get all documents from collection - with IDs
    const data = querySnapshot.docs.map(doc => ({
      ...doc.data(),
      id: doc.id,
    }));
    // Update state
    setDocs(data);
  });

  // Detach listener
  return unsubscribe;
}, []);

So, if we create a new message in our Firestore collection, we should see it automatically appear on the screen.

// Channel.js
const Channel = ({ user = null }) => {
  const [messages, setMessages] = useState([]);

  useEffect(() => { ... });

  return (
    <ul>
      {messages.map(message => (
        <li key={message.id}>{message.text}</li>
      ))}
    </ul>
  );
};

// App.js
function App() {
  ...

  return (
    <div>
      {
        user ? (
          <>
            <Button onClick={signOut}>Sign out</Button>
            <Channel user={user} />
          </>
        ) : <Button onClick={signInWithGoogle}>Sign in with Google</Button>
      }
    </div>
  );
}

Add data to Firestore

Alright! Now let's add the ability to create new messages from our application.

To achieve that, we can create a form with a single input field inside our Channel component.

const Channel = ({ user = null }) => {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');

  ...

  const handleOnChange = e => {
    setNewMessage(e.target.value);
  };

  return (
    <>
      <ul>
        {messages.map(message => (
          <li key={message.id}>{message.text}</li>
        ))}
      </ul>
      <form
        onSubmit={handleOnSubmit}>
        <input
          ref={inputRef}
          type="text"
          value={newMessage}
          onChange={handleOnChange}
          placeholder="Type your message here..."
        />
        <button
          type="submit"
          disabled={!newMessage}
        >
          Send
        </button>
      </form>
    </>
  );
};

And implement the onSubmit event handler to add the new messages to our Firestore database.

It's actually pretty easy to do as we already have everything in place. Again we are using the messages collection reference from the Firebase SDK and call the add method by passing in an object representing the data of the new message.

const handleOnSubmit = e => {
  e.preventDefault();

  const trimmedMessage = newMessage.trim();
  if (trimmedMessage) {
    // Add new message in Firestore
    messagesRef.add({
      text: trimmedMessage,
      createdAt: firebase.firestore.FieldValue.serverTimestamp(),
      uid,
      displayName,
      photoURL,
    });
    // Clear input field
    setNewMessage('');
  }
};

So we have the text itself, the createdAt timestamp - here, we let Firebase setting the value using a server-generated timestamp - and then we have the user ID, the user displayName, and his photoURL. We get this information from the parent component through props.

const { uid, displayName, photoURL } = user;

Here you go! Now our users can post messages, and others can read them in real-time.

One more thing, now that we are attaching user information to each message, let's add the photo and name of the user next to each message on the chat.

To do so, we can create a last component called Message to render each individual message from within the Channel component.

// Message.js
const Message = ({
  createdAt = null,
  text = '',
  displayName = '',
  photoURL = '',
}) => {
  if (!text) return null;

  return <div></div>;
};

// Channel.js
const Channel = ({ user = null }) => {
  ...

  return (
    <>
      <ul>
        {messages.map(message => (
          <li key={message.id}>
            <Message {...message} />
          </li>
        ))}
      </ul>
    </>
  );
};

This component is responsible for formatting and rendering the message's data. So we have the user's photo and display name, the creation date that we convert to a more readable format using the date-fns library, and finally, we have the text of the message.

import { formatRelative } from 'date-fns';

const formatDate = date => {
  let formattedDate = '';
  if (date) {
    // Convert the date in words relative to the current date
    formattedDate = formatRelative(date, new Date());
    // Uppercase the first letter
    formattedDate =
      formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1);
  }
  return formattedDate;
};

const Message = ({
  createdAt = null,
  text = '',
  displayName = '',
  photoURL = '',
}) => {
  if (!text) return null;

  return (
    <div>
      {photoURL ? (
        <img
          src={photoURL}
          alt="Avatar"
          className="rounded-full mr-4"
          width={45}
          height={45}
        />
      ) : null}
      {displayName ? <p>{displayName}</p> : null}
      {createdAt?.seconds ? (
        <span>{formatDate(new Date(createdAt.seconds * 1000))}</span>
      ) : null}
      <p>{text}</p>
    </div>
  );
};

So now you have a powerful real-time chat application built with React and Firebase!

I know what you think right now! The application looks terrible. There is no way our users gonna use it like that. So let's use our magic CSS wand and turn this awful app into something like this.

Much better right?

That's not a video/article about CSS, so I'll save your time and energy and link the source code here so you can get through it.

I don't even use and write plain CSS anymore for my React applications. In fact, I'm using Tailwind CSS to rapidly add styles to my apps. It is one of those tools that once you start using it, you can't stop using it. I promise Tailwind CSS is such a life-changer.

If you'd like me to create a video or a tutorial about it, please let me know in the comments section below.

And have a look at the Github repository for the source code of the app we just built.

Bonus

For learning how to deploy this app for free in 3 easy steps, go watch the video on YouTube, and see me going through the steps.

What's next?

Now I invite you to go a step further and add more features to it.

For example, you could implement an AI-powered moderation strategy and include it in your app to moderate users' messages automatically and ban the ones that break your community guidelines.

You could also add payments to your application using tools like Stripe, for example.

You got the point here. Possibilities are endless. This application is just a starting point. Grab the source code, and work from there to build your own application.

Conclusion

Alright! That's it, guys. Thank you so much for watching this video (or read the article) up to the very end.

I really hope that this video was useful for you guys. Please share it with your friends and colleagues or whoever may be interested in building applications with React.

And if you have not yet subscribed, don't forget to subscribe to AlterClass on Youtube, hit the like button, and ring the bell if you want to be notified every time I release a new video.

Thank you!

Become a React Developer

And if you need to learn more about building modern web applications with React, go check out my course on AlterClass.io.

My course will teach you everything you need to master React, become a successful React developer, and get hired!

I'll teach all the concepts you need to work with React, you'll get tons of hands-on practice through quizzes and programming assessments, and you'll build real-world projects on your own.

Plus, you'll be part of a growing community of learners.

So go to AlterClass.io, enroll in my course, and start building an amazing portfolio of powerful React applications.

The BEST WAY to get started with React FOR BEGINNERS [2021]

Grégory D'Angelo — Sat, 12 Dec 2020 10:39:48 +0000

Table of content

Introduction
Declarative Programming
Composition of Components
Unidirectional Data Flow
Conclusion
BONUS: Become a React Developer

One of the biggest mistakes people make when trying to learn React is simply by watching Youtube tutorials and trying to reproduce what they see line by line.

Let me tell you something. YouTube tutorials won't make you a React developer!

So in this article, I'm going to show you THE best way to get started with React for BEGINNERS so you can get up and running quickly and effectively.

Let's go!

Introduction

React is so popular you can find endless content across the internet, which makes learning React on your own quite challenging.

You don't know where to start or what to learn.

You finally end up watching a YouTube tutorial or a code-along course of someone coding an entire application using React, Redux, Firebase, GraphQL, and more.

STOP doing that. You are wasting your time. You won't remember anything from that, plus you are not going to learn the fundamental principles that you should know to build your OWN React applications from scratch.

If you want to become a React developer, there is ONE important thing you should know.

Without the proper foundation, you will limit the progress you can make in your learning journey.

When you don't have the proper foundation, you'll be a lot less efficient when building React applications.

You can go through a coding tutorial and feel like you are learning something, but you will struggle and don't know what to do when working on your own projects.

Or worse, you'll apply the wrong technique or use the wrong tool. And now you are struggling because your codebase is more complicated than it should be.

This is why the first thing you need to do, and the best way to start learning React for beginners, is to master the fundamentals.

Of course, you should have some experience with JavaScript, HTML, and CSS, but here I'm talking about the core principles behind React.

You need to understand the three main principles that make React unique, even before writing your first line of code.

By learning the fundamentals, you'll develop the proper techniques and way of thinking to build your first React application and progress a lot faster towards building large-scale and production-ready applications.

And this why mastering the fundamentals is not only the best way to start learning React for beginners but also to ensure that you will continue to progress through your learning journey.

Now I'm going to give you the three core principles that you need to master the fundamentals.

Declarative Programming

Okay, so the first principle you need to understand is declarative programming.

Actually, this is not something specific to React but a programming paradigm in computer science.

When you have to accomplish a task, you have two ways to do it: using the imperative or the declarative way.

Let's see the differences between the two with a simple example.

So let's say you have to go from home to work.

Using the imperative way, you'll take your car and give it step-by-step instructions on how to get to work.

Indeed, you have to steer the wheel, brake, and throttle to take the right direction to the final destination.

In other words, you are telling your car HOW to drive with instructions like go straight or take a right at the first traffic light.

This is the imperative way.

Now let's say you don't have a car anymore, so you order a taxi to get to work.

This time, instead of giving step by step instructions, you are just giving the driver the address of your final destination.

By doing so, you're telling WHAT needs to be done, which is going from home to work. That's it!

You don't care how the driver does it. It's up to him to drive you safely to the final destination. In other words, the driver is handling the imperative work for you.

So, declarative programming consists of instructing a program on WHAT needs to be done instead of telling it HOW to do it.

This is the same thing with React.

You declare what the user interface should look like using markups for each state of your application. And, React does the imperative work for you by keeping the DOM in sync with your application. You don't actually manipulate the DOM yourself.

Composition of Components

Now, the second principle is composition.

In React, you create complex user interfaces by combining smaller components together.

React follows a strong component-based model.

In React, all you have to do is create components and compose them to build your application.

This powerful composition model gives you an easy way to reuse components code throughout the application.

So let's take a look at a simple example to understand how composition works in React.

For example, here's my GitHub home page.

Suppose you had to build this page with React. In that case, you have to break the UI into a component hierarchy by identifying all the different components and thinking about how to arrange them together.

The first thing you'll want to do is draw boxes around every component and give them a name.

Here's how I see it.

Of course, this is not the only solution here, you might not need an individual component for all of these things, or you may want more components.

But that's okay.

Thinking about the structure of your application beforehand is very important.

If you want to save some time later and make your React applications maintainable in the long run, you have to think about the component hierarchy.

I encourage you to do this exercise with other websites and try to figure out which components you'll need and how you will compose them together.

Let me know, in the comments section below, which website did you choose and what solution you came up with.

Unidirectional Data Flow

Finally, the last thing you should know about React when you are just starting out is how the data flows in a React application.

In React, the data flows down from the parent component to the child component.

This technique is called unidirectional data flow or top-down data flow because the data always flows in the same way from top to bottom.

The main benefit of this approach is that the data flows throughout your application in a single direction, down the component of hierarchy.

It makes your views more predictable and helps with debugging your application in case something goes wrong.

Conclusion

Great! So let's recap what we have learned in this video.

React is used to build complex user interfaces and rely on a few principles that make it unique. You should understand those principles if you are just starting out.

First, React leverages declarative programming,
Second, It uses a powerful composition model based on components,
and finally, data as one and only one way to flow throughout the application.

So now you are ready to get started!

Become a React Developer

Visit AlterClass.io if you want to get the skills employers are looking for and become a React developer 👉 https://alterclass.io/courses/react.

Our Course:

📚 8 Self-Paced Modules
⚛️ 8 Real-world projects
📄 Complete Portfolio
👨‍👨‍👦‍👦 An Amazing Community
👨‍🏫 World-class Instructor
💯 1-on-1 Code Review and Expert Feedback
♾️ Lifetime Access

AlterClass is disrupting the way you learn React.

Our next-generation platform will give you the confidence and skills to land your dream job 👨‍💻.

Everything you need to master React.

💯 Join 'Become a React Developer' 30-Day Money-Back Guarantee now 👇
https://www.alterclass.io/courses/react

AlterClass on Social Media:

3 THINGS YOU NEED to know before learning React JS

Grégory D'Angelo — Sat, 12 Dec 2020 10:17:37 +0000

Table of content

Introduction
Get Really Good at JavaScript
Focus on Only React
Get Your Hands Dirty
Conclusion
BONUS: Become a React Developer

I'm going to share with you guys, in this article, what you should know if you'd like to learn ReactJS.

So keep reading as I'm coming to give you a ton of tips and tricks that's gonna make a huge difference in your learning journey.

With that said, let's jump right into it!

Get Really Good at JavaScript

The first thing you need to know before learning React is JavaScript.

Indeed, the great thing about React is that it is "just" a JavaScript library. So the more you know about JavaScript, the better you'll get at writing applications with React.

It is really important that you master and become comfortable with JavaScript fundamentals. You'll be much more productive with React.

A common mistake many people tend to make is to start learning React before having a solid JavaScript programming foundation. So please don't make this mistake yourself.

First, get really good at JavaScript. Otherwise, you'll quickly be overwhelmed by everything you'll have to learn alongside React and you'll probably quit before you even realize how awesome it is to work with React.

So, build that solid foundation if you want to really focus on getting the most out of React.

Let me know in the comment section below if you'd like to know about the JavaScript concepts you need to become a good React developer.

Also, check out Eloquent JavaScript by Marijn Haverbeke. This is an excellent book about JavaScript that you can read online here (for free).

I've also included an entire lesson for you to learn Modern JavaScript with ES6 in the first part of my Become a React Developer course.

Check this out. The first part is totally free!

Focus on Only React

The second thing is focusing on learning only ReactJS.

You need to start by understanding the three main design principles (Declarative Programming, Composition of Components, and Unidirectional Data Flow) that make React unique from the very beginning.

That's gonna make a huge difference in your learning curve.

So, make sure you watch my video about that so you can get up and running quickly with ReactJS.

Besides that, you don't need any extra 3rd party library or tool to start with React. The React API is pretty small and surprisingly simple.

Actually, there are only two methods necessary to build a React application. One for creating React elements, and another one for rendering those elements.

The most simple app you can make only consists of the index.html file with the React dependencies. That's all you need!

<html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script type="text/javascript">
      var title = React.createElement("h1", null, "Hello, World!");
      ReactDOM.render(title, document.getElementById("root"));
    </script>
  </body>
</html>

Once again, you don't need to learn and configure any build tools to get you started.

You can even use create-react-app to set up your React application by running only one command line without having to configure anything.

npx create-react-app my-app

Unfortunately, many online resources for beginners include many tools and make learning React more complicated than it is.

That's why I've created the Become a React Developer course. It starts from the ground up all the way through becoming a React Developer.

In this course, you'll learn everything you need to master React steps-by-steps by building your own projects.

So make sure to check this out.

Get Your Hands Dirty

Finally, there is no better way to learn something new, especially when it comes to learning a new programming language or a new library than building things.

I really believe that it is the only way to grasp a concept and make the most out of your time.

You can watch hours of video content on Youtube, watch people coding on Udemy. Still, if you don't practice early on, on your own, you won't learn anything from it.

So, build (a lot of) things and start as early as possible in your learning journey.

This is also valid with learning ReactJS. Just put in the work, and you will get better over time. I promise!

But don't just follow training tutorials and reproduce what the instructor is doing. Build React applications by yourself from scratch.

You'll learn so much more this way.

And you can start with something simple and go from there to build more complex applications.

For example, from the very first part of my Become a React Developer course, you will build a Kanban-style app all by yourself.

Then, you'll use modern React techniques (like hooks) to build an incredible car configurator.

So, practice, practice, and practice!

And check out my course.

Conclusion

So by now, you should have an idea about what you should learn and focus on from the very beginning to get started with ReactJS.

The most important things to remember:

Get really good at JavaScript and modern JS to excel at building React applications
Focus on only React so you don't get lost with too much to learn at once
Finally, Build things from the very beginning to practice your newly acquired skills

Become a React Developer

Visit AlterClass.io if you want to get the skills employers are looking for and become a React developer 👉 https://alterclass.io/courses/react.

Our Course:

📚 8 Self-Paced Modules
⚛️ 8 Real-world projects
📄 Complete Portfolio
👨‍👨‍👦‍👦 An Amazing Community
👨‍🏫 World-class Instructor
💯 1-on-1 Code Review and Expert Feedback
♾️ Lifetime Access

AlterClass is disrupting the way you learn React.

Our next-generation platform will give you the confidence and skills to land your dream job 👨‍💻.

Everything you need to master React.

💯 Join 'Become a React Developer' 30-Day Money-Back Guarantee now 👇
https://www.alterclass.io/courses/react

AlterClass on Social Media:

5 reasons why YOU SHOULD LEARN React JS

Grégory D'Angelo — Sat, 12 Dec 2020 10:03:14 +0000

Table of content

Introduction
Most loved and used library
Easy to use
High paying jobs
Popularity and community
Mobile and VR
Conclusion
BONUS: Become a React Developer

If you care about your career as a developer, you know that react is a must-have in your toolbelt.

*One of the best and most valuable skills you could have TODAY as a JavaScript developer is ReactJS. *

So in this article, I'm going to tell you exactly why you should learn ReactJS in 2021.

Introduction

Learning a new skill always takes time and effort. So you don't want to waste your time and money in learning something that you will not really use or that will become obsolete in a few years.

You should NOT learn new technology because it's hot or because everybody is talking about it.

You should learn new technology because it will give you something in return.

And that something could be more job opportunities, or scaling up your career as a developer, or getting a raise at your current job, or being more efficient in your day-to-day work, or building better products, and building things a lot faster.

Don't be seduced by all the buzz around new tech, a new programming language, or a new framework.

Always evaluate what it will bring in your life and your work before putting a lot of time and effort into learning it.

So make sure you know why you are learning something new and what it will bring in your life as a software engineer or a developer.

Do I really need this new tech? Will it solve some of my problems? Which ones and how? How much effort and time do I need to learn it? Is it worth it or not?

You need to consider all of that before, even starting to learn something new.

So with that being said, let me give you my top 3 reasons why you should learn React in 2021.

Most loved and used library

So the first reason you should learn ReactJS is because it is the most loved and used web library among professional developers.

Every successful business uses react and is looking for new talents daily.

So if you had any doubt that learning or becoming a React developer can get a new job. Don't worry. There are thousands of jobs on the market right now for React developers (even remotely).

So if you want to become a React developer, go for it! This is the right time to do it.

And there is a reason why businesses use react and love it so much! Which brings us to our second reason to learn React in 2021.

Easy to use

React it's a JavaScript library that enables developers to quickly and efficiently build interactive and dynamic user interfaces with minimal coding.

Working with react makes our life as a developer easier, thanks to its simplicity and its modular infrastructure. And we can build and maintain our applications WAY much faster. People love it, I love it, and you will love it as well!

It's a breeze for the developers to build scalable and easy to maintain web applications with react. But React is also saving a lot of money for the companies that are hiring those developers.

And that's why businesses are looking to build things with React. And so, once again, they are hiring a lot of React developers.

They're saving money, a lot of money, because their developers are much more efficient by working with ReactJS compared to any other technology on the front-end side.

Therefore, it is one of the most demanding skills on the market for developers, if not the first one.

Engineering teams are looking at React as their first front-end choice.

And it is not only used by top tech companies like Facebook, Netflix, Google, Twitter but also by any companies that want to build incredible products fast.

If you want to be competitive in the market, you have to use the best technology to build your projects. And react is one of them.

High paying jobs

My third reason to learn ReactJS in 2021 is that those jobs you will get as a React developer in any of those companies will pay you a high salary.

In the US, the average salary for a React developer is 120K a year.

Just look at the numbers on Glassdoor and LinkedIn.

It is worth investing your time to learn ReactJS. Because in the end, you will eventually get a job as a ReactJS developer and earn a 6-figures salary.

And apart from those jobs, you could also earn a lot by working as a freelancer or building your own projects with React and selling your products online.

Popularity and community

The next reason why learning ReactJS in 2021 is worth your time and money is because React is very popular among developers around the world.

There is a HUGE community around it.

Just look at the number of open-sourced projects on Github.

There are hundreds of great libraries and tools that make building react applications a lot easier and faster.

Plus, React is developed by one of the world's largest tech companies.

A lot of money is invested in building this library.

It is evolving daily. Engineers at Facebook are working hard to make this library the best in the market. They are constantly adding features and making React better release after release.

The technology is very mature. The initial release was 7 years ago!

So by learning React today, you'll learn the skills that you can immediately apply at work, which will be useful for years to come.

Mobile and VR

Finally, my last reason to learn ReactJS is that you will not only be able to build amazing and complex web applications, but you will also be able to build mobile and VR applications.

With just one technology!

You'll be able to build a lot of different stuff without having to learn a new framework or a new programming language every time.

I told you, you will be much more efficient and valuable.

So when you are looking for jobs, you will have way more opportunities. You could work as a front-end developer, a mobile developer, or even specialized in Virtual Reality.

Conclusion

So I hope now you know why you should learn ReactJS in 2021.

There are hundreds of thousands of jobs available on the market right now.

You will get a high-paying salary, and you will future-proof your career because React is here to last.

And there's a large community around React. It is loved by so many developers, and I'm sure you will love it as well.

And if you are looking to become a React developer and get real employable skills that top companies want, make sure to check out my React course on AlterClass.io.

My course will give you the skills to build any React application and the confidence to apply for front-end developer roles at top tech companies.

In this course, you'll get tons of hands-on practice through quizzes and programming assessments, you'll build real-world projects on your own like this one right here, and you'll get feedback on your work from our team of experts to help you become a successful React developer.

So make sure to check this out on AlterClass.io.

Become a React Developer

Visit AlterClass.io if you want to get the skills employers are looking for and become a React developer 👉 https://alterclass.io/courses/react.

Our Course:

📚 8 Self-Paced Modules
⚛️ 8 Real-world projects
📄 Complete Portfolio
👨‍👨‍👦‍👦 An Amazing Community
👨‍🏫 World-class Instructor
💯 1-on-1 Code Review and Expert Feedback
♾️ Lifetime Access

AlterClass is disrupting the way you learn React.

Our next-generation platform will give you the confidence and skills to land your dream job 👨‍💻.

Everything you need to master React.

💯 Join 'Become a React Developer' 30-Day Money-Back Guarantee now 👇
https://www.alterclass.io/courses/react

AlterClass on Social Media:

BEST Framework for React JS (Gatsby vs Next.js)

Grégory D'Angelo — Sat, 12 Dec 2020 09:52:41 +0000

Table of content

Introduction
Client-Side Rendering
Why using a React framework?
The BEST React framework
Conclusion
BONUS: Become a React Developer

Up until a few months ago, choosing between Next.js and Gatsby was relatively simple.

Need to make a static website, like a blog where the content doesn't change too often? Cool, choose Gatsby.

Need to build a site with server-side rendering, like an e-commerce store with thousands of items? Great, go with Next.js.

But there have been some recent updates that blurred the lines between those 2 frameworks, leaving developers just like you confused about which React framework to choose.

So I'm going to tell you how to make the right decision to build your next React project.

Let's jump into it.

Introduction

So you want to build a React application, but you don't want to deal with routing, configuration, SEO, SSR, image optimization, or all of the hard and cool stuff surrounding React.

These features can be hard or can take a lot of time to implement on your own.

Both Gatsby and Next.js give you those features out of the box. But they both have their own way of doing it.

They are both popular React Frameworks, and each of them has its own strengths and weaknesses.

So in this article, I'm going to give you some tips to help you choose between the two.

But first, let's talk about why you should use a React framework instead of just building a regular React application.

Client-Side Rendering

You are probably familiar with create-react-app, but if you have never heard of it, this is a tool from Facebook you could use to generate a new single-page React application.

It gives you a modern build setup with no configuration.

Thanks to it, you don't have to learn and configure any build tools, and you can dive right into your code.

It's pretty awesome as you just need to run one command line to get up-and-running. Besides that, you even have a basic folder structure to start from.

Under the hood, create-react-app uses tools like webpack, Babel, ESLint, and other amazing projects to power your app, hidden from you behind a single dependency, making it easier to focus on your application itself.

So you may probably wonder, "what's the problem with that"?

Well, with CRA, you get a lot of configuration already in place for you and a folder structure for your application, so you don't have to worry about it.

And in my opinion, it is one of the easiest ways to create a React application very quickly, and if you're new to React, that's probably the way to go.

If you're just learning React, I would recommend starting with CRA or creating your React app by yourself from scratch and then moving into CRA.

But there are some problems with those single-page React applications.

And it is because they use client-side rendering.

With client-side rendering, when you make a URL request, your browser downloads a bare-bones HTML document, and all the content is entirely rendered in the browser with JavaScript.

Basically, all your application is sent down to your browser at the initial request. And then, React handles everything on the browser, like fetching data and rendering the views of your application depending on the route the user is visiting.

For example, with React, you have this HTML file with all your JavaScript dependencies and a single DOM element, which is the root of your application. Nothing else.

And then, when the client requests a page of your website, your browser downloads that single blank HTML page, loads all the JavaScript included and necessary to run your website, and finally, React renders your website's content by filling the HTML file.

So the first problem you can see here with this mechanism is about speed and performance.

Even if this kind of application is great because you don't have to refresh the entire page when having new data to display, the initial loading of your application can be pretty slow.

Your visitors have to wait for the JavaScript bundle to load and for the browser to build the DOM before any content is visible. Your visitors may see a blank page or a loading spinner while JavaScript is loading.

So that's one problem.

The second problem that comes with client-side rendering is about SEO.

With client-side rendering applications, Google has to run all your JavaScript code before it knows what's on your website and how to index it.

So it can take some time and delay your website ranking.

And, you don't even know if the Google web crawler will run your JavaScript the same way your browser is doing it.

Furthermore, your bare-bones HTML document lacks the keyword, description, and social media metadata necessary for search engine optimization and social media sharing.

React doesn't do this for you out-of-the-box. So you need something to help with that as well.

Why using a React framework?

One possible solution is Server-Side Rendering.

In contrast with traditional client-side rendering, in server-side rendering, HTML is generated and populated with all the necessary data on the server.

This process produces static HTML that does not require JavaScript to run on the browser.

In other words, your application will load much faster and will be interactive a lot sooner.

You will also improve your SEO because search engines can more quickly, reliably, and accurately parse your content and meta tags. This is because the page content is immediately available to Googlebot and any other search engine crawlers.

So server-side rendering addresses both concerns we have discussed so far with client-side rendering applications.

But how do you enable SSR?

You can actually implement it on your own, but it's kind of a pain.

Hopefully, both Gatsby and Next.js use Server-Side rendering, so you don't have to implement it yourself from scratch. It's handled out-of-the-box for you by those frameworks.

So, what does differentiate one from the other?

They are both leveraging SSR but the way they do it is quite different.

With Gatsby, all HTML pages are generated in advance, during the build phase, and are then simply sent once to the browser during runtime. Gatsby websites only contain static files that can be hosted on any CDN or hosting service like Netlify, AWS, or anywhere else actually.

Websites built with Gatsby are very fast by nature since they are already rendered during compilation. This technique is actually called Static Site Generation (SSG).

Whereas, with Next.js, HTML is generated at runtime each time a client sends a request to the server.

The way it actually works is quite different from Gatsby. Next.js is running on a Node.js server. And when it receives a request, it matches it with a specific page (or React component), requests the data from an API, a database, or a CMS, waits for this data, and then generates the HTML based on the received data and the React components and finally sends it to the browser.

But with Next.js, you can also choose if you'd like a specific page to be rendered to static HTML at build time or use regular server-side rendering and generate HTML at runtime on each request.

This is pretty powerful because you can use the best of both worlds, SSG and SSR, inside the same framework. So you could build a website where you have, for example, the blog pages rendered at build time using SSG and render more dynamic pages of your website at runtime using regular SSR.

So that's a considerable advantage for Next.js over Gatsby.

I'd also like to mention the difference in how you fetch data with both frameworks.

With Next.js, you can use any asynchronous or even synchronous data fetching technique, including fetch, REST, GraphQL, or even directly accessing a database. Next.js really does not care about how you do it. It's up to you!

While Gatsby is much more opinionated about how you should do it. It is not required, but Gatsby recommends you and encourages you to use GraphQL as a best practice for structuring and writing your Gatsby applications.

So when building your app with Gatsby, you should access your data through GraphQL. But like Next.js, Gatsby can load data from anywhere, a CMS, a database, through an API, or from the filesystem.

So that's something you should consider when choosing between those 2 frameworks. If you'd like to use something other than GraphQL to fetch your data, you better use Next.js.

But keep in mind that's GraphQL has become a popular alternative to REST for modern web applications. So, you are probably already using it in your projects, but if you are not, working with Gatsby is an excellent opportunity to learn about this powerful technology.

Question of the day: have you already used GraphQL to fetch your data before? If yes, I'd like to hear from you what application you have built with it. Let me know in the comments section below.

Alright! Let's keep going.

Something important you should also consider between those 2 frameworks is the way you will host your applications.

As we've seen, Gatsby only generates static files during compilation. So you could actually host your Gatsby website anywhere you want.

On the other side, with Next.js, you get a Node.js server. So you have to host this node server for your app to run. I believe the easiest way to do it is by using Vercel, which has been made by the creators of Next.js. So, it could be the fastest and easiest way to do it.

Let me know in the comments section below if you have used it before.

But, you can actually deploy your Next.js application to any hosting provider that supports Node.js, like Heroku or Netlify, which I love, by the way!

So that's important. Remember that with Gatsby, you just get static content, which is actually cheaper to deploy than the Node server you get with Next.js. And it may be a bit easier even if today, you won't have any problem to host a Node server thanks to all these great hosting providers.

The BEST React framework

So now, maybe that's why you've been waiting for, let's talk about when to use which.

We have seen so far that both are leveraging pre-rendering.

Gatsby uses SSG, where the HTML is generated at build time and is reused on each request.

Next.js lets you choose which pre-rendering technique you'd like to use for each page. You can create a "hybrid" Next.js app using Static Generation for most pages and using Server-side Rendering for others.

But Gatsby gives you a nice and unified data layer out-of-the-box. In Gatsby, you use plugins to pull in data from any number of sources like API or CMS, and you can query all that data with GraphQL throughout your app. This data layer simplifies the process of pulling data from different sources and providing them in your pages and components.

On top of that, both frameworks add a ton of great features to your applications. But Next.js is probably winning the game over Gatsby with its recent release.

Now, with Next.js, you get automatic image optimization, built-in internationalization, continuous analytics from real measurements, and you even have an all-in-one starter kit for e-commerce that you can use and fully customize.

Even if Gatsby is also providing some of these features (but not all of them) through its plugin system, we can clearly see that Next.js is becoming the best React framework to actually build anything you want.

So, in conclusion, I'll still probably use Gatsby for a purely static website like a blog as it's an excellent framework, and it has been designed from the very beginning to build this kind of website.

And, you have a vast community of people used to build static websites with Gatsby. So it may help sometimes.

But, if I have to build a web app that contains dynamic data, or even a hybrid web app where I need both — static site generation and server-side rendering, I'll choose Next.JS for sure.

More and more of my applications are built with Next.js, but I still keep using Gatsby for static websites as I don't need to deal with Node. And I can use any CDN to create superfast websites.

And what about create-react-app? I don't really use it very often now, but I keep using it for teaching purposes and building prototypes and small applications.

Conclusion

Alright! That's it, guys. I hope you enjoyed this video and get a ton of value out of it. Please let me know in the comments section below which framework you will use for your next React project. I'd be happy to hear from you.

Thank you so much for reading.

Become a React Developer

Visit AlterClass.io if you want to get the skills employers are looking for and become a React developer 👉 https://alterclass.io/courses/react

Our Course:

📚 8 Self-Paced Modules
⚛️ 8 Real-world projects
📄 Complete Portfolio
👨‍👨‍👦‍👦 An Amazing Community
👨‍🏫 World-class Instructor
💯 1-on-1 Code Review and Expert Feedback
♾️ Lifetime Access

AlterClass is disrupting the way you learn React.

Our next-generation platform will give you the confidence and skills to land your dream job 👨‍💻.

Everything you need to master React.

💯 Join 'Become a React Developer' 30-Day Money-Back Guarantee now 👇
https://www.alterclass.io/courses/react

AlterClass on Social Media: