https://github.com/austindd/chirper
Covalence lab demonstrating a basic React web app
https://github.com/austindd/chirper
Last synced: 11 months ago
JSON representation
Covalence lab demonstrating a basic React web app
- Host: GitHub
- URL: https://github.com/austindd/chirper
- Owner: austindd
- Created: 2018-11-29T19:48:05.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-12-03T05:14:24.000Z (over 7 years ago)
- Last Synced: 2025-06-26T08:44:29.008Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 307 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Dependencies:
[React](https://reactjs.org/) (using [Create React App](https://github.com/facebook/create-react-app))
[Bootstrap 4](https://getbootstrap.com/)
[ReactStrap](https://reactstrap.github.io/)
[Material Icons React](https://www.npmjs.com/package/material-icons-react)
# Chirper (Front End)
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!
### Prerequisites
1. Watch the "Introduction to React" videos available to you at Covalence. Rewatch them where necessary.
2. Install Create React App on your local machine.
3. Use Create React App to create your first React application.
4. Install the React Developer Tools in Chrome.
5. Import Bootstrap 4 into your index.html file.
### Instructions
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.
### Getting Started
Familiarize yourself with your new React application, but quickly move into separating components into their own directory.
Remember: 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?
Happy Hacking!