00:00 Let's go ahead and create a CSS class name using TypeStyle's style function. We will go ahead and set up a color and a font size. Next, we're going to create a React app component that uses the CSS class name to style the div, and we put in some demo text, like, "Hello, World" into the div.
00:27 We can easily render this app component to an HTML string using ReactDOMServer. We will bring in the ReactDOMServer module. We get the HTML as a string using ReactDOMServer.renderToStatic markup function, passing in the app component. Let's log out this HTML string as a demonstration.
00:56 Similar to how you can get all the HTML for a React component, you can get all the CSS managed by TypeStyle using the get styles function, which you can bring in from the main TypeStyle module. It simply returns as a string all the CSS that has been managed by TypeStyle at a particular point in time. Let's log out the CSS next to our HTML.
01:25 Now that you have a pattern for getting all the CSS and HTML for your application, you can use these to create a static HTML file that is fully self-contained quite easily. Let's create a reusable render page function that takes some component HTML and CSS strings, and returns static HTML strings.
01:48 Our static HTML file will contain a root HTML tag, a head tag containing a style tag, which will contain all our CSS. Now, we can close out our document head. Next, we add a body tag containing a div which will contain all our HTML. Then we close out the root div and the root body tag.
02:13 Now, with this reusable render page function in place, we can call it with our generated HTML and CSS to get the rendered page as a string. Now, if you want, we can write this rendered page string to a file on disk. For example, an index.html right next to this app.tsx.
02:39 Now, if you run this application, an index.html file will appear on disk as expected. If we go ahead and open this file in our browser, you can see that we get a properly styled div based on our CSS.
02:54 If you inspect the source code for this HTML file, you will see that it is fully self-contained in terms of CSS present in the document head, and HTML present in the document body.