Modern Full-Stack Development

 The Starting Point, Redux: main.tsx
Okay, now it’s time to get to some real code! The first file to look at is main.tsx, which is 
the main entry point code-wise. This is where React will start to execute our application 
from. Given the .tsx extension, we know that this is a JSX file that is written in 
TypeScript. And it begins simply enough:
Note  For the remainder of this chapter, to save some trees, i’ve removed all 
imports except where they are something unique, as is the case here.
import "normalize.css";
import "../css/main.css";
It may seem a bit odd to see CSS files imported into a code file like this, but it’s okay 
because JSX and the TypeScript compiler (and Webpack) know how to deal with that on 
our behalf. That’s also why index.html doesn’t have them imported, as you’d normally do.
Chapter 9   Delivering the gooDs: MailBag, the Client

---

231
Now, as far as what those files are, normalize.css is a CSS reset, meaning that it 
normalizes initial style conditions on a page across browsers. It takes care of ensuring 
every browser has the same padding around a given HTML element, for example, or that 
the margins on the document itself are consistent across browsers. All of that stuff can be 
different from browser to browser, so using a reset helps ensure that the styles our app 
uses, which are in the main.css file, are applied on a stable, consistent foundation. You 
don’t use any styles in normalize.css yourself directly; they’re strictly something that 
gets applied automatically before your app’s styles do (which is why normalize.css must 
be imported first, by the way).
With the imports out of the way, it’s time for some code:
const baseComponent = ReactDOM.render(
  , document.body
);
That kicks off the React portion of the proceedings, rendering the BaseLayout 
component, which we’ll be looking at soon, into the body of the document. With that, we 
have an app on the screen!
Before we get there, though, there’s a fair number of other stops this train must make, 
starting with application state.