AUTH_TOKEN

Your authentication token that you acquired after a successful login.

GMAIL_EMAIL

Your email on Gmail that will be used to send confirmation emails.

OAUTH_CLIENT_ID

Your client id that we explained in the Secure Emails lesson.

OAUTH_CLIENT_SECRET

Your client's secret that we explained in the Secure Emails lesson.

OAUTH_REFRESH_TOKEN

Your refresh token that we explained in the Secure Emails lesson.

docker.tar.gz

PORT

CONFIRMATION_SECRET_KEY

CRYPTO_ALGORITHM

INITIALIZATION_VECTOR

MONGO_URI

SALT

TOKEN_SECRET_KEY

hello_world

wrong_hello_world

routes_examples

events

async

mongoose

usermodel

signup

confirmation

login

auth

props

router

react

SignupGUI

ConfirmationGUI

LoginGUI

AuthGUI

navbar

SignupPage

SignupPageGUI

ConfirmationPage

LoginPage

ux-page

home-page

UploadGUI

SpellGUI

ImageGUI

GetGUI

UpdateGUI

DeleteGUI

CRUD

Heroku

GetGUI-copy

SpellGUIV2

ImageGUIV2

CRUDV2

Node.js is a popular JavaScript runtime environment used to create server-side applications. It is an ideal tool for building robust, full-stack web applications with React.

This course is an introduction to web development leveraging these two popular technologies. You’ll learn server-side applications with Node.js and learn to add database functionality with MongoDB fitting into the Express application framework. You’ll then build a user authorization system using the JSON Web Token (JWT).

You’ll then focus on a client-side environment built with React. You’ll build a sample application to get familiar with the framework before styling the application and adding necessary user-interaction elements. You’ll wrap up by tying the frontend and backend together and deploying your web application with Heroku.

By the end of this course, you’ll be prepared to build real-world websites using the most popular JavaScript tools.

Building Full-Stack Web Applications With Node.js and React

The `useEffect` hook runs before rendering and prevents the browser from painting. This is because it initializes the data used in the DOM.

The `useEffect` hook runs before rendering and doesn’t prevent the browser from painting. This is because it initializes the data used in the DOM.

The `useEffect` effects runs after rendering and prevents the browser from painting. This is because it runs the side effects that affect the DOM.

The `useEffect` runs after rendering and doesn’t prevent the browser from painting. This is because it runs the side effects that affect the DOM.

Does the `useEffect` hook run before or after rendering? Why or why not?

<p>Does the <code>useEffect</code> hook run before or after rendering? Why or why not?</p>


“Educative Answers” is printed to the console. This is because `useState` runs synchronously and updates the `name` directly.

“Educative Answers” is printed on the console. This is because `useState` runs asynchronously, but it blocks the execution of code.

“Educative” is printed on the console. This is because `useState` is a non-blocking hook that doesn’t immediately mutate the `name`.

“Educative” is printed on the console. This is because `useState` is a blocking hook that doesn’t immediately mutate the `name`.

What is printed to the `console` after clicking the `button`, and why?

```
import React, { useState } from "react";


export default function App() {
  const [name, setName] = useState("Educative");
  const updateName = () => {
    setName("Edpresso");
    console.log(name);
  }

  return (
    <div className="App">
      <h1>Hello Educative</h1>
      <button onClick={updateName}>Update</button>
    </div>
  );
}
```

<p>What is printed to the <code>console</code> after clicking the <code>button</code>, and why?</p>
<pre><code>import React, { useState } from &quot;react&quot;;


export default function App() {
  const [name, setName] = useState(&quot;Educative&quot;);
  const updateName = () =&gt; {
    setName(&quot;Edpresso&quot;);
    console.log(name);
  }

  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;h1&gt;Hello Educative&lt;/h1&gt;
      &lt;button onClick={updateName}&gt;Update&lt;/button&gt;
    &lt;/div&gt;
  );
}
</code></pre>


Yes, it’s a controlled component because it accepts a callback to change the value

Yes, it’s a controlled component because it accepts values as props.

Yes, it’s a controlled component because it accepts values as props and a callback to change the value.

No, it’s an uncontrolled component because the DOM handles the values change

Is `input` a controlled component? Why or why not?

```
<input
  id="email-address"
  name="email"
  type="email"
  autoComplete="email"
  required
  className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
  placeholder="Email address or Username"
  value={emailOrUsername}
  onChange={(e) => setEmailOrUsername(e.target.value)}
/>
```

<p>Is <code>input</code> a controlled component? Why or why not?</p>
<pre><code>&lt;input
  id=&quot;email-address&quot;
  name=&quot;email&quot;
  type=&quot;email&quot;
  autoComplete=&quot;email&quot;
  required
  className=&quot;appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm&quot;
  placeholder=&quot;Email address or Username&quot;
  value={emailOrUsername}
  onChange={(e) =&gt; setEmailOrUsername(e.target.value)}
/&gt;
</code></pre>


The `username` state is passed as a prop many times from a parent component to its children.

This is a popular pattern that is known as prop drilling.

Context API and Redux are popular alternatives that can solve the problem presented in the code above.

**(Select all that apply)** Which of the statements below describe the pattern of the following code? 

```
function App() {
  const [username, setUsername] = useState("John Doe");

  return (
    <div className="app">
      <h1>Welcome, {username}</h1>
      <Dashboard {...{username}}/>
    </div>
  )
}

function Dashboard({username}) {
  return (
    <div className="dashboard">
      <SideNav />
      <Main {...{username}}/>
    </div>
  )
}

function SideNav() {
  return (
    <nav className="side-nav">
      <h1>Hello, Educative</h1>
    </nav>
  )
}

function Main({username}) {
  return (
    <div className="main-content">
      <Page {...{username}}/>
    </div>
  )
}

function Page({username}) {
  return <Profile {...{username}}/>
}

function Profile({username}) {
  return <h1>{username}</h1>
}
```

<p><strong>(Select all that apply)</strong> Which of the statements below describe the pattern of the following code?</p>
<pre><code>function App() {
  const [username, setUsername] = useState(&quot;John Doe&quot;);

  return (
    &lt;div className=&quot;app&quot;&gt;
      &lt;h1&gt;Welcome, {username}&lt;/h1&gt;
      &lt;Dashboard {...{username}}/&gt;
    &lt;/div&gt;
  )
}

function Dashboard({username}) {
  return (
    &lt;div className=&quot;dashboard&quot;&gt;
      &lt;SideNav /&gt;
      &lt;Main {...{username}}/&gt;
    &lt;/div&gt;
  )
}

function SideNav() {
  return (
    &lt;nav className=&quot;side-nav&quot;&gt;
      &lt;h1&gt;Hello, Educative&lt;/h1&gt;
    &lt;/nav&gt;
  )
}

function Main({username}) {
  return (
    &lt;div className=&quot;main-content&quot;&gt;
      &lt;Page {...{username}}/&gt;
    &lt;/div&gt;
  )
}

function Page({username}) {
  return &lt;Profile {...{username}}/&gt;
}

function Profile({username}) {
  return &lt;h1&gt;{username}&lt;/h1&gt;
}
</code></pre>


The code throws an error because we can’t define the same route twice.

If we access `/verify`, we are redirected to the `/verify/:confirmationToken` by default with a random value for `confirmationToken`.

If we access `/verify`, we are redirected to the `/verify/:confirmationToken` by default with `confirmationToken` equals 1.


Nothing will happen because the `/verify/1` route isn’t defined.

What is the output of the following code?

```
<Route
  path="/verify"
  element={
    <Navigate to="/verify/1" />
  }
/>
<Route
  path="/verify/:confirmationToken"
  element={
    <OnlyNotAuth>
      <Confirmation />
    </OnlyNotAuth>
  }
/>
```

<p>What is the output of the following code?</p>
<pre><code>&lt;Route
  path=&quot;/verify&quot;
  element={
    &lt;Navigate to=&quot;/verify/1&quot; /&gt;
  }
/&gt;
&lt;Route
  path=&quot;/verify/:confirmationToken&quot;
  element={
    &lt;OnlyNotAuth&gt;
      &lt;Confirmation /&gt;
    &lt;/OnlyNotAuth&gt;
  }
/&gt;
</code></pre>


Choose the correct answer(s).

<p>Choose the correct answer(s).</p>


Test your knowledge of client-side development.

Before You Begin

The Server-side

User Authentication with a JSON Web Token

Set up the Client-side Environment

Develop the Client-side

Business Logic

Server-side Routes

Client-side Routes

Appendix

Conclusion

Test Yourself: Client-side Development