NextJS, React, Gatsby

Question 1

Do browsers understand JSX?

Answer 1

No - Note that browsers don’t understand JSX out of the box, so you’ll need a JavaScript compiler, such as a Babel, to transform your JSX code into regular JavaScript.

Question 2

What are the 3 core concepts in React that you must know to build React application?

Answer 2

• -Components
• -Props
• -State

Question 3

What are the 3 JSX rules?

Answer 3

1 - Return a single root element
2 - Close all the tags
3 - camelCase all most of the things!

Question 4

What are the 9 things you need to consider when building modern web applications?

Answer 4

User Interface - how users will consume and interact with your application

Routing - how users navigate between different parts of your application.

Data Fetching - where your data lives and how to get it.

Rendering - when and where you render static or dynamic content.

Integrations - what third-party services you use (CMS, auth, payments, etc) and how you connect to them.

Infrastructure - where you deploy, store, and run your application code (Serverless, CDN, Edge, etc).

Performance - how to optimize your application for end-users.

Scalability - how your application adapts as your team, data, and traffic grow.

Developer Experience - your team’s experience building and maintaining your application.

Question 5

What is a component?

Answer 5

A component is a function that returns UI elements.

const app = document.getElementById(“app”)

  function header() {
     return (<h1>Develop. Preview. Ship. 🚀</h1>)
   }

ReactDOM.render(, app)

Question 6

What is JSX?

Answer 6

A syntax extension for JavaScript that allows you to describe your UI in a familiar HTML-like syntax

Question 7

What is NextJS?

Answer 7

A React framework that gives you building blocks to create web applications.

Question 8

What is React?

Answer 8

A JavaScript library for building interactive user interfaces.

Question 9

What is the DOM?

Answer 9

The DOM is an object representation of the HTML elements. It acts as a bridge between your code and the user interface, and has a tree-like structure with parent and child relationships.

Question 10

Important terms

Answer 10

• -Component Tree

- -Nesting Components

Question 11

In React which way does data flow?

Answer 11

Data flows down the component tree. This is referred to as one-way data flow.

State can be passed from parent to child components as props.

Question 12

Here are the topics you will learn about in this comprehensive course:

Local setup
Why React?
JSX
ReactDOM.render()
Custom components
Organizing components
Reusable components
JS inside JSX
Props
Destructuring props
Rendering arrays
Mapping components
Key prop
Passing objects as props
Spreading objects as props
Props vs state
useState
useState array destructuring
Changing state
Complex state
Refactoring state
Passing state as props
Local state
Unified state
Conditional rendering
React forms
Forms input
Forms state object
Submitting forms in React
Making API calls
useEffect
Async functions inside useEffect
Local storage with React
Lazy state initialization

Question 13

What is meant when it’s said that react is composable?

Answer 13

This means that code can be written in small components

Question 14

What is create-react-app?

Answer 14

A tool for building SPAs with a standard structure and a good set of default options. Generated projects use the React Scripts library to build, test, and run the code. Projects have a standard Webpack configuration and a standard set of language features enabled.

Question 15

npm launches a server on port 3000 and opens a browser at the homepage. How is this page being rendered?

Answer 15

it renders a single component called , which it imports from App.js (or App.tsx) in the same directory.

The application is delivered as a single, large bundle of JavaScript. The code mounts all of its components inside this <div> in public/index.html:

<div></div>

</div>

Question 16

How do I set a proxy in the package.json file?

Answer 16

“proxy”: “http://myapiserver”,

Question 17

How do I install gatsby globally on my machine?

Answer 17

npm i -g gatsby-cli

Question 18

How do I start a new gatsby project?

Answer 18

gatsby new my-app-name

Question 19

importing { Link } to enforce transparent routing between pages in your webapp accomplishes what?

Answer 19

Preloading pages inside the page so that a a full refresh of the entire page does not occur - which impacts performance

Question 20

importing { navigate } to enforce transparent programmatic routing between pages in your webapp accomplishes what?

Answer 20

i allows one to use the navigate(“/”)}> action by utilizing the navigate function

Question 21

How do I pass props to my components?

Answer 21

Like this: A Header component (header.js) note prop.title is the name we are providing

pass props inside the function as a props then reference the prop inside the component

import React from “react”

const Header = (props) => (
  <div>
    <h1>{props.title}</h1>
  </div>
)

Then inside index.js:

onst Home = () => (

<div>

...</div>