3.19 component file organization

In this short lesson we look at one of React's key ideas — the difference between an imperative approach and a declarative one. We are currently inside App.js, where the function App already lives. To start, we add a simple paragraph inside the returned div that says "React course". After saving, the text appears on the page exactly as expected.

Now, if we wanted to produce the same result with plain JavaScript, we would have to manipulate the DOM manually. We would select an element on the page, for example with document.getElementById for the root container, then call document.createElement('p') to build a paragraph, set its textContent to the desired string, and finally append it to the root element.

const root = document.getElementById('root');
const para = document.createElement('p');
para.textContent = 'React course';
root.appendChild(para);

Imperative vs declarative

• Imperative: in standard JavaScript you give the browser explicit, step-by-step instructions about what to select, create and append.
• Declarative: in React you describe what the UI should look like, and the library figures out which DOM operations to run for you.

Of course we are not going to keep the manual DOM code — it is cluttered and not the React way. But comparing the two side by side makes it very clear why we use React: we describe the final markup directly inside our components, and the framework handles all the underlying DOM work. With that in mind, we are now ready to keep building the first real component of our expense tracker.