In this lab, you will be building your first front-end application using ReactJS.
It's called Chirper, a platform where you can post short messages on the internet for all the world - even the Presidents of the United States - to see!
- Watch the "Introduction to React" videos available to you at Covalence. Rewatch them where necessary.
- Install
create-react-app
on your local machine. - Use
create-react-app
to create your first React application. - Install the React Developer Tools in Chrome.
- Import Bootstrap 4 into your
index.html
file.
Your objective should be to create a "timeline" of Chirps - short messages that you post on the Chirper platform.
Your timeline should load with at least three chirps, and your users need the capability of posting new Chirps, which will be displayed back to them in the timeline once they are posted.
Design constraint: You can only invoke ReactDOM.render()
one time in your entire application.
Familiarize yourself with your new React application, but quickly move into separating components into their own directory.
Remember: Only one component per file!
Convert your .js
files into .jsx
files.
Use only Bootstrap classes. You should not need any custom CSS
in this project.
Think about the design of your project. How will you compose (or extract) components to achieve the desired result?