Exercises $1\mathrm{.}1.-1\mathrm{.}2.$

Use Vite to initialize a new application. Modify main.jsx to match the following

import ReactDOM from 'react$-$dom$/$client$\text{'}$

import App from $\text{'}./$App$\text{'}$

ReactDOM. createRoot$($document$,$getElementById$(\text{'}$root$\text{'})),$ render$($App $//)$

c$)$ Flexbox Froggy $-$ A gam...

Exercises $1\mathrm{.}1.-1\mathrm{.}2.$

$-$App.jsx to match the following

Exercises $1\mathrm{.}1.-1\mathrm{.}2.$

and remove extra files App.css and index.css$,$ and the directory assets.

Unfortunately, the entire application is in the same component. Refactor the code so that it consists of three new components: Header, Content, and Total. All data still resides in the App component, which passes the necessary data to each component using props. Header takes care of rendering the name of the course, Content renders the parts and their number of exercises and Total renders the total number of exercises.

$-$Define the new components in the file App.jsx$.$