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

Which parts of the document get rerendered after the timer updates in the code below?

```
function tick() {
  const element = (
     <div>
      <h1>Hello, world!</h1>
      <h2>Time = {new Date().toLocaleTimeString()}.</h2>
     </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);
```

<p>Which parts of the document get rerendered after the timer updates in the code below?</p>
<pre><code>function tick() {
  const element = (
     &lt;div&gt;
      &lt;h1&gt;Hello, world!&lt;/h1&gt;
      &lt;h2&gt;Time = {new Date().toLocaleTimeString()}.&lt;/h2&gt;
     &lt;/div&gt;
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);
</code></pre>


Which of the following is used in React to increase performance?

<p>Which of the following is used in React to increase performance?</p>


```
const App = () => {
   return <h1>Hello, world!</h1>
}
```

```
function App() {
   return <h1>Hello, world!</h1>
}
```

```
class extends React.Component App {
   render(){
      return <h1>Hello, world!</h1>
   }
}
```   

```
class App extends React.Component {
   render(){
      return <h1>Hello, world!</h1>
   }
}
```   

Which of the following is a valid declaration of a component that displays a “Hello, world!” message in React?

<p>Which of the following is a valid declaration of a component that displays a “Hello, world!” message in React?</p>


Which of the following is the correct way to write an `if` statement in JavaScript?

<p>Which of the following is the correct way to write an <code>if</code> statement in JavaScript?</p>


`Hello, undefined` \
`Hello, Educative Answers`

`Hello, Educative` \
`Hello, Educative Answers`

What is the output of the following in React?

```
function Welcome(props) {
  return <h5>Hello, {props.name}</h5>;
}

function App() {
  return (
    <div>
      <Welcome name="Educative" />
      <Welcome name="Educative Answers" />
    </div>
  );
}
```

<p>What is the output of the following in React?</p>
<pre><code>function Welcome(props) {
  return &lt;h5&gt;Hello, {props.name}&lt;/h5&gt;;
}

function App() {
  return (
    &lt;div&gt;
      &lt;Welcome name=&quot;Educative&quot; /&gt;
      &lt;Welcome name=&quot;Educative Answers&quot; /&gt;
    &lt;/div&gt;
  );
}
</code></pre>


How should the syntax error that results from the code below be fixed?

```js
const person = (firstName, lastName) => {
            first: firstName,
            last: lastName
}
console.log(person("jhon", "Wolson"))
```

<p>How should the syntax error that results from the code below be fixed?</p>
<pre><code class="language-js">const person = (firstName, lastName) =&gt; {
            first: firstName,
            last: lastName
}
console.log(person(&quot;jhon&quot;, &quot;Wolson&quot;))
</code></pre>


Which of the following is correct in JSX?

<p>Which of the following is correct in JSX?</p>


<p>How is inline style written in JSX?</p>


In JavaScript, what is the result of the following code?

`3 > 2 > 1 === false;`

<p>In JavaScript, what is the result of the following code?</p>
<p><code>3 &gt; 2 &gt; 1 === false;</code></p>


What type of programming language is JavaScript?

<p>What type of programming language is JavaScript?</p>


What is the output of the following code?
```js
var x = 0;
function fun(){
   ++x;
   this.x = x;
   return x;
}
var bar = new new fun;
console.log(bar.x);
```

<p>What is the output of the following code?</p>
<pre><code class="language-js">var x = 0;
function fun(){
   ++x;
   this.x = x;
   return x;
}
var bar = new new fun;
console.log(bar.x);
</code></pre>


What's the output of the following code?

```js
x = 90;
function f() {
  console.log(x);
  var x = 100;
}
f();
```

<p>What’s the output of the following code?</p>
<pre><code class="language-js">x = 90;
function f() {
  console.log(x);
  var x = 100;
}
f();
</code></pre>


What is the output of the following code?

```js
function foo() {
  console.log(z);
  console.log(bar());
  return true;

  function bar() {
    return "this is bar";
  }

  var z = "zzz";
}

foo();
```

<p>What is the output of the following code?</p>
<pre><code class="language-js">function foo() {
  console.log(z);
  console.log(bar());
  return true;

  function bar() {
    return &quot;this is bar&quot;;
  }

  var z = &quot;zzz&quot;;
}

foo();
</code></pre>


Choose the correct answer(s).

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


Test your knowledge of JavaScript and React before you take the lessons in this course.

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: Prerequisites