ReenaGo / react-jsx-exercises

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React JSX Exercises

Overview

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.

Exercises

First Component

Make the <FirstComponent> component render like the Windows Logo

List Group

Make the <ListGroup> component render a bunch of <ListGroupItem> components.

Blog

Make the <Blog> component render a <Header>, <Article> and a <Footer> component. There is more detail about each component in the app.js file.

Comments

Make the <Comments> component render a bunch of <Comment> components, and make the <Comment> component render a <ProfilePic> and a <CommentBody> component.

Form

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.

Bonus

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.

Bonus 2

Combine all the components you've built into a new single page blog with comments, and a new comment form.

About


Languages

Language:JavaScript 53.6%Language:HTML 46.4%