traintocode

Creating The Markup

To kick off this project we have set you up a new Vite project with React & Typescript. On the right is an empty App.tsx component. You will start by scaffolding some HTML elements for your chat app. These will have with test data hard-coded onto the page.

Later on you will be replacing these with dynamically generated elements driven by the state of your application, but for now, creating a simple static layout will help give structure to the rest of the project.

Exercise

Create the layout below inside the <main> tag of the component on the right. Your layout should have a <h1> heading, three <p> tags for the sample text messages, and a <form> element containing <input> tags for the text and the submit button. CSS styling will be covered in the next section, so no need to add class names or styles.

You cannot do the coding exercises on this device, visit this page on a larger screen.

App.tsx

⋮