React Website Introduction

Question 1

What is the syntax for the two ways to create an object/element in React?

Answer 1

1. 
const element = (
  <h1>
    Hello, world!
  </h1>
);

2. 
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Question 2

What are React Elements?

Answer 2

These objects are called “React elements”. You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date. Elements are what components are “made of.”

An element describes what you want to see on the screen:

const element = <h1>Hello, world</h1>;
Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.

Question 3

How do you render an element into the DOM?

Answer 3

Let’s say there is a <div> somewhere in your HTML file:

<div></div>

We call this a “root” DOM node because everything inside it will be managed by React DOM.

Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.

To render a React element into a root DOM node, pass both to ReactDOM.render():

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));</div>

Question 4

Are react elements mutable?

Answer 4

React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.

With our knowledge so far, the only way to update the UI is to create a new element, and pass it to ReactDOM.render().

Question 5

What are components?

Answer 5

They are like JavaScript functions. Lets you split the UI into independent, reusable pieces, and let’s you think about each piece in isolation. They accept inputs (called “props”) and return React elements describing what should appear on the screen. React treats components starting with lowercase letters as DOM tags. For example, <div></div> represents an HTML div tag, but represents a component and requires Welcome to be in scope.

Question 6

Explain how elements can also represent user-defined components such as const element = ;

Answer 6

When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”.

For example, this code renders “Hello, Sara” on the page:

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

const element = ;
ReactDOM.render(
  element,
  document.getElementById('root')
);

We can think of names as one of the properties of props which is the argument for Welcome.

Question 7

Explain what's happening in this code 
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = ;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Answer 7

We call ReactDOM.render() with the element.
React calls the Welcome component with {name: ‘Sara’} as the props.
Our Welcome component returns a <h1>Hello, Sara</h1> element as the result.
React DOM efficiently updates the DOM to match <h1>Hello, Sara</h1>.

Question 8

What does this do and why?

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

function App() {
  return (
    <div>

</div>   ); }

ReactDOM.render(, document.getElementById(‘root’));

Answer 8

We can create an App component that renders Welcome many times:

Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.