Basics

Question 1

What is the app.js file?

Answer 1

This is the main component of your React application.

Question 2

What is the index.js file?

Answer 2

This file is the entry point of your React application. It is responsible for rendering the root component (App.js) and attaching it to the HTML document.

Question 3

Write out the app.js file for basic starter project, returning an empty div.

Answer 3

import React from 'react';
import './style.css';

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

Question 4

Write out index.js file for basic starter project.

Answer 4

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const root = createRoot(document.getElementById('app'));

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Question 5

Define a simple functional component that displays the text “Hello”.

Answer 5

function Intro() {
  return (
    <div>Hello</div>
  );
}

Question 6

Write out the App component, including a single component inside it name

Answer 6

`
export default function App() {
return (
<div><Intro></Intro></div>
);
}
`

Question 7

Create two components, MyComponent and ChildComponent. Using props, pass a prop name ‘title’ into ChildComponent, and in the child display it as the value inside h1 tags.

Answer 7

function MyComponent(){
  return <MyChildComponent title = 'My Title'/>
}
function MyChildComponent(props){
  return <h1>{props.title}</h1>
}

Question 8

Where is the root div element that is rendered by React?

Answer 8

In the index.html file

Question 9

What is the index.html file?

Answer 9

The main html page inside which react is rendered.

Question 10

How to you render the root element?

i.e. what is the syntax. Assume the main component is <MyComponent></MyComponent>

Answer 10

root.render(
        <MyComponent>
  );

Question 11

(two lines)

How to you get the root element?

i.e. what syntax?

Answer 11

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);