In each subfolder you will find an index.html
and an app.js
file. There is some starting information in each app.js file. Open the index.html file in your browser and take a look at how it renders to start. Then complete the task.
Make the <FirstComponent>
component render like the Windows Logo
Make the <ListGroup>
component render a bunch of <ListGroupItem>
components.
Make the <Blog>
component render a <Header>
, <Article>
and a <Footer>
component. There is more detail about each component in the app.js
file.
Make the <Comments>
component render a bunch of <Comment>
components, and make the <Comment>
component render a <ProfilePic>
and a <CommentBody>
component.
Make the <Form>
render a form tag with 3 text inputs, two yes/no radio buttons, and a submit button. Make sure you use the <TextInput>
, <YesNoRadio>
and <SubmitButton>
components instead of plain html tags.
Use Bootstrap, Materialize, Bulma or any other CSS framework and style up each of your components. You'll have to include the framework css tag from a CDN, and include your own css tag in the <head>
of each index file. Make sure that when you add classes to your JSX you use the className
attribute.
Combine all the components you've built into a new single page blog with comments, and a new comment form.