├── .gitignore
├── airbnb-clone-hooks-finishedRefactor
├── App.css
├── App.js
├── App.test.js
├── actions
│ ├── logoutAction.js
│ ├── openModal.js
│ └── regAction.js
├── customHooks
│ └── useControlledInput.js
├── index.css
├── index.js
├── logo.svg
├── pages
│ ├── Account
│ │ ├── Account.css
│ │ ├── Account.js
│ │ ├── AccountSideBar.js
│ │ ├── Bookings.js
│ │ ├── ChangePassword.js
│ │ └── SETUP.md
│ ├── CityVenues
│ │ ├── CityVenues.css
│ │ └── CityVenues.js
│ ├── Home
│ │ ├── Home.css
│ │ ├── Home.js
│ │ ├── SearchBox.css
│ │ └── SearchBox.js
│ ├── Login
│ │ ├── Login.css
│ │ ├── Login.js
│ │ ├── LoginBeforeUseDispatch.js
│ │ ├── LoginCompleted.js
│ │ └── SignUp.js
│ ├── PaymentSuccess
│ │ ├── PaymentSuccess.css
│ │ └── PaymentSuccess.js
│ ├── Search
│ │ ├── Search.css
│ │ └── Search.js
│ ├── SingleFullVenue
│ │ ├── Point.js
│ │ ├── SingleFullVenue.css
│ │ └── SingleFullVenue.js
│ └── logout
│ │ ├── Logout.css
│ │ └── Logout.js
├── reducers
│ ├── authReducer.js
│ ├── rootReducer.js
│ └── siteModal.js
├── serviceWorker.js
├── setupTests.js
├── utility
│ ├── Activity
│ │ ├── Activities.js
│ │ ├── Activity.css
│ │ └── Activity.js
│ ├── City
│ │ ├── Cities.js
│ │ ├── City.css
│ │ └── City.js
│ ├── Modal
│ │ ├── Modal.css
│ │ └── Modal.js
│ ├── NavBar
│ │ ├── NavBar.css
│ │ └── NavBar.js
│ ├── Slider
│ │ ├── Slider.css
│ │ └── Slider.js
│ ├── Spinner
│ │ ├── Spinner.css
│ │ └── Spinner.js
│ └── Venue
│ │ ├── Venue.css
│ │ ├── Venue.js
│ │ └── Venues.js
└── utiltityFunctions
│ └── loadScript.js
├── airbnb-clone-hooks
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── actions
│ │ ├── logoutAction.js
│ │ ├── openModal.js
│ │ └── regAction.js
│ ├── customHooks
│ │ └── useControlledInput.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── pages
│ │ ├── Account
│ │ │ ├── Account.css
│ │ │ ├── Account.js
│ │ │ ├── AccountSideBar.js
│ │ │ ├── Bookings.js
│ │ │ ├── ChangePassword.js
│ │ │ └── SETUP.md
│ │ ├── CityVenues
│ │ │ ├── CityVenues.css
│ │ │ └── CityVenues.js
│ │ ├── Home
│ │ │ ├── Home.css
│ │ │ ├── Home.js
│ │ │ ├── SearchBox.css
│ │ │ └── SearchBox.js
│ │ ├── Login
│ │ │ ├── Login.css
│ │ │ ├── Login.js
│ │ │ ├── LoginBeforeUseDispatch.js
│ │ │ ├── LoginCompleted.js
│ │ │ └── SignUp.js
│ │ ├── PaymentSuccess
│ │ │ ├── PaymentSuccess.css
│ │ │ └── PaymentSuccess.js
│ │ ├── Search
│ │ │ ├── Search.css
│ │ │ └── Search.js
│ │ ├── SingleFullVenue
│ │ │ ├── Point.js
│ │ │ ├── SingleFullVenue.css
│ │ │ └── SingleFullVenue.js
│ │ └── logout
│ │ │ ├── Logout.css
│ │ │ └── Logout.js
│ ├── reducers
│ │ ├── authReducer.js
│ │ ├── rootReducer.js
│ │ └── siteModal.js
│ ├── serviceWorker.js
│ ├── setupTests.js
│ ├── utility
│ │ ├── Activity
│ │ │ ├── Activities.js
│ │ │ ├── Activity.css
│ │ │ └── Activity.js
│ │ ├── City
│ │ │ ├── Cities.js
│ │ │ ├── City.css
│ │ │ └── City.js
│ │ ├── Modal
│ │ │ ├── Modal.css
│ │ │ └── Modal.js
│ │ ├── NavBar
│ │ │ ├── NavBar.css
│ │ │ └── NavBar.js
│ │ ├── Slider
│ │ │ ├── Slider.css
│ │ │ └── Slider.js
│ │ ├── Spinner
│ │ │ ├── Spinner.css
│ │ │ └── Spinner.js
│ │ └── Venue
│ │ │ ├── Venue.css
│ │ │ ├── Venue.js
│ │ │ └── Venues.js
│ └── utiltityFunctions
│ │ └── loadScript.js
└── yarn.lock
├── airbnb-clone
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
│ ├── App.css
│ ├── App.js
│ ├── actions
│ ├── logoutAction.js
│ ├── openModal.js
│ └── regAction.js
│ ├── index.css
│ ├── index.js
│ ├── pages
│ ├── Account
│ │ ├── Account.css
│ │ ├── Account.js
│ │ ├── AccountSideBar.js
│ │ ├── Bookings.js
│ │ ├── ChangePassword.js
│ │ └── SETUP.md
│ ├── CityVenues
│ │ ├── CityVenues.css
│ │ └── CityVenues.js
│ ├── Home
│ │ ├── Home.css
│ │ ├── Home.js
│ │ ├── SearchBox.css
│ │ └── SearchBox.js
│ ├── Login
│ │ ├── Login.css
│ │ ├── Login.js
│ │ ├── LoginCompleted.js
│ │ └── SignUp.js
│ ├── PaymentSuccess
│ │ ├── PaymentSuccess.css
│ │ └── PaymentSuccess.js
│ ├── Search
│ │ ├── Search.css
│ │ └── Search.js
│ ├── SingleFullVenue
│ │ ├── Point.js
│ │ ├── SingleFullVenue.css
│ │ └── SingleFullVenue.js
│ └── logout
│ │ ├── Logout.css
│ │ └── Logout.js
│ ├── reducers
│ ├── authReducer.js
│ ├── rootReducer.js
│ └── siteModal.js
│ ├── utility
│ ├── Activity
│ │ ├── Activities.js
│ │ ├── Activity.css
│ │ └── Activity.js
│ ├── City
│ │ ├── Cities.js
│ │ ├── City.css
│ │ └── City.js
│ ├── Modal
│ │ ├── Modal.css
│ │ └── Modal.js
│ ├── NavBar
│ │ ├── NavBar.css
│ │ └── NavBar.js
│ ├── Slider
│ │ ├── Slider.css
│ │ └── Slider.js
│ ├── Spinner
│ │ ├── Spinner.css
│ │ └── Spinner.js
│ └── Venue
│ │ ├── Venue.css
│ │ ├── Venue.js
│ │ └── Venues.js
│ └── utiltityFunctions
│ └── loadScript.js
├── airbnb-stages
├── src-beginning
│ ├── App.css
│ ├── App.js
│ ├── index.css
│ ├── index.js
│ ├── pages
│ │ └── Home
│ │ │ ├── Home.css
│ │ │ ├── Home.js
│ │ │ └── SearchBox.css
│ ├── reducers
│ │ ├── authReducer.js
│ │ └── rootReducer.js
│ └── utility
│ │ ├── City
│ │ └── City.css
│ │ ├── NavBar
│ │ ├── NavBar.css
│ │ └── NavBar.js
│ │ ├── Slider
│ │ └── Slider.css
│ │ └── Spinner
│ │ └── Spinner.css
├── src-make-the-modal
│ ├── App.css
│ ├── App.js
│ ├── index.css
│ ├── index.js
│ ├── pages
│ │ ├── Home
│ │ │ ├── Home.css
│ │ │ ├── Home.js
│ │ │ ├── SearchBox.css
│ │ │ └── SearchBox.js
│ │ └── SingleFullVenue
│ │ │ ├── Point.js
│ │ │ ├── SingleFullVenue.css
│ │ │ └── SingleFullVenue.js
│ ├── reducers
│ │ ├── authReducer.js
│ │ └── rootReducer.js
│ └── utility
│ │ ├── Activity
│ │ ├── Activities.js
│ │ ├── Activity.css
│ │ └── Activity.js
│ │ ├── City
│ │ ├── Cities.js
│ │ ├── City.css
│ │ └── City.js
│ │ ├── Modal
│ │ ├── Modal.css
│ │ └── Modal.js
│ │ ├── NavBar
│ │ ├── NavBar.css
│ │ └── NavBar.js
│ │ ├── Slider
│ │ ├── Slider.css
│ │ └── Slider.js
│ │ ├── Spinner
│ │ ├── Spinner.css
│ │ └── Spinner.js
│ │ └── Venue
│ │ ├── Venue.css
│ │ ├── Venue.js
│ │ └── Venues.js
├── src-make-the-spinner-lecture103
│ ├── App.css
│ ├── App.js
│ ├── index.css
│ ├── index.js
│ ├── pages
│ │ └── Home
│ │ │ ├── Home.css
│ │ │ ├── Home.js
│ │ │ ├── SearchBox.css
│ │ │ └── SearchBox.js
│ ├── reducers
│ │ ├── authReducer.js
│ │ └── rootReducer.js
│ └── utility
│ │ ├── Activity
│ │ ├── Activity.css
│ │ └── Activity.js
│ │ ├── City
│ │ ├── Cities.js
│ │ ├── City.css
│ │ └── City.js
│ │ ├── NavBar
│ │ ├── NavBar.css
│ │ └── NavBar.js
│ │ ├── Slider
│ │ ├── Slider.css
│ │ └── Slider.js
│ │ └── Spinner
│ │ ├── Spinner.css
│ │ └── Spinner.js
├── src-post-venue
│ ├── App.css
│ ├── App.js
│ ├── index.css
│ ├── index.js
│ ├── pages
│ │ └── Home
│ │ │ ├── Home.css
│ │ │ ├── Home.js
│ │ │ ├── SearchBox.css
│ │ │ └── SearchBox.js
│ ├── reducers
│ │ ├── authReducer.js
│ │ └── rootReducer.js
│ └── utility
│ │ ├── Activity
│ │ ├── Activities.js
│ │ ├── Activity.css
│ │ └── Activity.js
│ │ ├── City
│ │ ├── Cities.js
│ │ ├── City.css
│ │ └── City.js
│ │ ├── NavBar
│ │ ├── NavBar.css
│ │ └── NavBar.js
│ │ ├── Slider
│ │ ├── Slider.css
│ │ └── Slider.js
│ │ ├── Spinner
│ │ ├── Spinner.css
│ │ └── Spinner.js
│ │ └── Venue
│ │ ├── Venue.css
│ │ ├── Venue.js
│ │ └── Venues.js
├── src-pre-Venue
│ ├── App.css
│ ├── App.js
│ ├── index.css
│ ├── index.js
│ ├── pages
│ │ └── Home
│ │ │ ├── Home.css
│ │ │ ├── Home.js
│ │ │ ├── SearchBox.css
│ │ │ └── SearchBox.js
│ ├── reducers
│ │ ├── authReducer.js
│ │ └── rootReducer.js
│ └── utility
│ │ ├── Activity
│ │ ├── Activities.js
│ │ ├── Activity.css
│ │ └── Activity.js
│ │ ├── City
│ │ ├── Cities.js
│ │ ├── City.css
│ │ └── City.js
│ │ ├── NavBar
│ │ ├── NavBar.css
│ │ └── NavBar.js
│ │ ├── Slider
│ │ ├── Slider.css
│ │ └── Slider.js
│ │ └── Spinner
│ │ ├── Spinner.css
│ │ └── Spinner.js
├── src-pre-account
│ ├── App.css
│ ├── App.js
│ ├── actions
│ │ ├── logoutAction.js
│ │ ├── openModal.js
│ │ └── regAction.js
│ ├── index.css
│ ├── index.js
│ ├── pages
│ │ ├── Account
│ │ │ ├── Account.css
│ │ │ ├── Account.js
│ │ │ ├── AccountSideBar.js
│ │ │ ├── Bookings.js
│ │ │ ├── ChangePassword.js
│ │ │ └── SETUP.md
│ │ ├── CityVenues
│ │ │ ├── CityVenues.css
│ │ │ └── CityVenues.js
│ │ ├── Home
│ │ │ ├── Home.css
│ │ │ ├── Home.js
│ │ │ ├── SearchBox.css
│ │ │ └── SearchBox.js
│ │ ├── Login
│ │ │ ├── Login.css
│ │ │ ├── Login.js
│ │ │ ├── LoginCompleted.js
│ │ │ └── SignUp.js
│ │ ├── PaymentSuccess
│ │ │ ├── PaymentSuccess.css
│ │ │ └── PaymentSuccess.js
│ │ ├── SingleFullVenue
│ │ │ ├── Point.js
│ │ │ ├── SingleFullVenue.css
│ │ │ └── SingleFullVenue.js
│ │ └── logout
│ │ │ ├── Logout.css
│ │ │ └── Logout.js
│ ├── reducers
│ │ ├── authReducer.js
│ │ ├── rootReducer.js
│ │ └── siteModal.js
│ ├── utility
│ │ ├── Activity
│ │ │ ├── Activities.js
│ │ │ ├── Activity.css
│ │ │ └── Activity.js
│ │ ├── City
│ │ │ ├── Cities.js
│ │ │ ├── City.css
│ │ │ └── City.js
│ │ ├── Modal
│ │ │ ├── Modal.css
│ │ │ └── Modal.js
│ │ ├── NavBar
│ │ │ ├── NavBar.css
│ │ │ └── NavBar.js
│ │ ├── Slider
│ │ │ ├── Slider.css
│ │ │ └── Slider.js
│ │ ├── Spinner
│ │ │ ├── Spinner.css
│ │ │ └── Spinner.js
│ │ └── Venue
│ │ │ ├── Venue.css
│ │ │ ├── Venue.js
│ │ │ └── Venues.js
│ └── utiltityFunctions
│ │ └── loadScript.js
├── src-pre-redux-persist
│ ├── App.css
│ ├── App.js
│ ├── actions
│ │ ├── openModal.js
│ │ └── regAction.js
│ ├── index.css
│ ├── index.js
│ ├── pages
│ │ ├── Home
│ │ │ ├── Home.css
│ │ │ ├── Home.js
│ │ │ ├── SearchBox.css
│ │ │ └── SearchBox.js
│ │ ├── Login
│ │ │ ├── Login.css
│ │ │ ├── Login.js
│ │ │ ├── LoginCompleted.js
│ │ │ └── SignUp.js
│ │ ├── SingleFullVenue
│ │ │ ├── Point.js
│ │ │ ├── SingleFullVenue.css
│ │ │ └── SingleFullVenue.js
│ │ └── logout
│ │ │ ├── Logout.css
│ │ │ └── Logout.js
│ ├── reducers
│ │ ├── authReducer.js
│ │ ├── rootReducer.js
│ │ └── siteModal.js
│ └── utility
│ │ ├── Activity
│ │ ├── Activities.js
│ │ ├── Activity.css
│ │ └── Activity.js
│ │ ├── City
│ │ ├── Cities.js
│ │ ├── City.css
│ │ └── City.js
│ │ ├── Modal
│ │ ├── Modal.css
│ │ └── Modal.js
│ │ ├── NavBar
│ │ ├── NavBar.css
│ │ └── NavBar.js
│ │ ├── Slider
│ │ ├── Slider.css
│ │ └── Slider.js
│ │ ├── Spinner
│ │ ├── Spinner.css
│ │ └── Spinner.js
│ │ └── Venue
│ │ ├── Venue.css
│ │ ├── Venue.js
│ │ └── Venues.js
└── src-pre-stripe
│ ├── App.css
│ ├── App.js
│ ├── actions
│ ├── openModal.js
│ └── regAction.js
│ ├── index.css
│ ├── index.js
│ ├── pages
│ ├── CityVenues
│ │ ├── CityVenues.css
│ │ └── CityVenues.js
│ ├── Home
│ │ ├── Home.css
│ │ ├── Home.js
│ │ ├── SearchBox.css
│ │ └── SearchBox.js
│ ├── Login
│ │ ├── Login.css
│ │ ├── Login.js
│ │ ├── LoginCompleted.js
│ │ └── SignUp.js
│ ├── SingleFullVenue
│ │ ├── Point.js
│ │ ├── SingleFullVenue.css
│ │ └── SingleFullVenue.js
│ └── logout
│ │ ├── Logout.css
│ │ └── Logout.js
│ ├── reducers
│ ├── authReducer.js
│ ├── rootReducer.js
│ └── siteModal.js
│ └── utility
│ ├── Activity
│ ├── Activities.js
│ ├── Activity.css
│ └── Activity.js
│ ├── City
│ ├── Cities.js
│ ├── City.css
│ └── City.js
│ ├── Modal
│ ├── Modal.css
│ └── Modal.js
│ ├── NavBar
│ ├── NavBar.css
│ └── NavBar.js
│ ├── Slider
│ ├── Slider.css
│ └── Slider.js
│ ├── Spinner
│ ├── Spinner.css
│ └── Spinner.js
│ └── Venue
│ ├── Venue.css
│ ├── Venue.js
│ └── Venues.js
├── assets
└── section2
│ ├── lightswitch.css
│ └── lightswitch.html
├── aws_flash_cards
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── components
│ ├── FlashCard.js
│ ├── MultiCard.js
│ ├── QuizBar.js
│ ├── QuizType.js
│ ├── RandomWeighted.js
│ └── RegularCard.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
├── context-101
├── .gitignore
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── InnerContainer.js
│ ├── MainContainer.js
│ ├── ThemedButton.js
│ ├── contexts
│ │ └── themeContext.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── serviceWorker.js
│ └── setupTests.js
└── yarn.lock
├── hooks101
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── CityWeather.js
│ ├── CityWeatherHooks.js
│ ├── WeatherApp.js
│ ├── WeatherAppHooks.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── serviceWorker.js
│ └── setupTests.js
└── weatherSrcBeforeHooks
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── CityWeather.js
│ ├── WeatherApp.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── serviceWorker.js
│ └── setupTests.js
├── movie-router
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
│ ├── About.js
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── Home.js
│ ├── Movie.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
├── package-lock.json
├── paradigmsInAction
├── OopAndFunctional.js
├── imparativeAndOOP.js
├── imperativeAndProcedural.js
└── proceduralAndFunctional.js
├── redux-middleware-final
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── WarmOrNot.js
│ ├── Weather.js
│ ├── actions
│ ├── fetchWeather.js
│ └── testThunk.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reducers
│ ├── rootReducer.js
│ └── weatherReducer.js
│ └── serviceWorker.js
├── redux-middleware-starter
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── WarmOrNot.js
│ ├── Weather.js
│ ├── actions
│ └── fetchWeather.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reducers
│ ├── rootReducer.js
│ └── weatherReducer.js
│ └── serviceWorker.js
├── redux101-end-of-lecture79
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── components
│ └── FrozenDept.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reducers
│ ├── frozen.js
│ └── rootReducer.js
│ └── serviceWorker.js
├── redux101-end-of-lecture82
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── actions
│ ├── frozenInvUpdate.js
│ ├── meatInvUpdate.js
│ └── produceInvUpdate.js
│ ├── components
│ ├── FrozenDept.js
│ ├── MeatDept.js
│ └── ProduceDept.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reducers
│ ├── frozenReducer.js
│ ├── meatReducer.js
│ ├── produceReducer.js
│ └── rootReducer.js
│ └── serviceWorker.js
├── redux101
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── actions
│ ├── clearInventory.js
│ ├── frozenInvUpdate.js
│ ├── meatInvUpdate.js
│ └── produceInvUpdate.js
│ ├── components
│ ├── FrozenDept.js
│ ├── Main.js
│ ├── MeatDept.js
│ ├── NavBar.js
│ └── ProduceDept.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reducers
│ ├── frozenReducer.js
│ ├── meatReducer.js
│ ├── produceReducer.js
│ └── rootReducer.js
│ └── serviceWorker.js
├── router-101
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── Help.js
│ ├── Home.js
│ ├── NavBar
│ ├── NavBar.css
│ └── NavBar.js
│ ├── RouterBasics.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
├── section1
├── lecture11-jsxAndBabel
│ ├── expressions.html
│ ├── index.html
│ └── markUp.html
├── lecture13-components
│ ├── Card.js
│ └── index.html
├── lecture14-props
│ ├── Card.js
│ ├── data.js
│ └── index.html
├── lecture15-practiceProps
│ ├── Card.js
│ ├── CardSolution.js
│ ├── app.js
│ ├── appSolution.js
│ ├── data.js
│ └── index.html
├── lecture16-arrayOfComponents
│ ├── Card.js
│ ├── app.js
│ ├── cardsJs.html
│ ├── data.js
│ └── index.html
├── lecture17-componentClasses
│ ├── Card.js
│ ├── app.js
│ ├── data.js
│ └── index.html
├── lecture18-practiceClassArray
│ ├── CatNav.js
│ ├── CatNavAnswer.js
│ ├── app.js
│ ├── appAnswer.js
│ ├── catNav.css
│ ├── index.html
│ └── indexAnswer.html
├── lecture19-breakingDownComponents
│ ├── App.js
│ ├── CitiesContainer.css
│ ├── CitiesContainer.js
│ ├── City.js
│ └── index.html
├── lecture20-Review-noCode
│ └── notes.txt
├── lecture9-yourFirstReactProgram
│ └── index.html
├── package-lock.json
├── package.json
├── palidrome.js
└── server.js
├── section2
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── Card.js
│ ├── CardSet.js
│ ├── EventAndState.js
│ ├── SimpleEvents.js
│ ├── StateInAction.js
│ ├── StatePractice.js
│ ├── cards.js
│ ├── index.css
│ ├── index.js
│ ├── lecture32-PracticeNotes.md
│ ├── logo.svg
│ └── serviceWorker.js
├── section3
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── FormPractice.js
│ ├── Headers.js
│ ├── Modal.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── serviceWorker.js
│ └── temperatureApp
│ ├── BoilingVerdict.js
│ ├── Calculator.js
│ ├── TemperatureInput.js
│ └── temperatureInput.css
└── starterFiles
├── airbnb-components
├── Account
│ ├── AccountSideBar-markup.js
│ ├── App.css
│ └── Bookings-markup.js
├── Login
│ ├── Login.css
│ ├── Login.js
│ └── SignUp.js
├── PaymentSuccess
│ ├── PaymentSuccess.css
│ └── paymentSuccess-markup.html
└── logout
│ ├── Logout.css
│ └── Logout.js
├── aws_flash_cards
├── .gitignore
└── App.css
├── card.html
├── cards.js
└── section2
├── lightswitch.css
└── lightswitch.html
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS*
3 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/App.css:
--------------------------------------------------------------------------------
1 | .text-link{
2 | cursor: pointer;
3 | color: blue;
4 | }
5 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
6 | const { getByText } = render();
7 | const linkElement = getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
10 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/actions/logoutAction.js:
--------------------------------------------------------------------------------
1 | export default()=>{
2 | return{
3 | type: "LOGOUT",
4 | }
5 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/actions/openModal.js:
--------------------------------------------------------------------------------
1 | export default (openClose,content)=>{
2 | return{
3 | type: "OPEN_MODAL",
4 | payload: {
5 | openClose,
6 | content,
7 | }
8 | }
9 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/actions/regAction.js:
--------------------------------------------------------------------------------
1 | export default(regObj)=>{
2 | return{
3 | type: "REGISTER_ACTION",
4 | payload: regObj,
5 | }
6 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/customHooks/useControlledInput.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | // handle any onChange input that needs to be controlled
3 |
4 | export default (initValue)=>{
5 | const [ value, setValue ] = useState(initValue);
6 | return {
7 | value: value,
8 | onChange: (e)=>{
9 | console.log(e.target.value);
10 | setValue(e.target.value);
11 | }
12 | }
13 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/pages/Account/Account.css:
--------------------------------------------------------------------------------
1 | .account{
2 | position: relative;
3 | z-index: 100;
4 | margin-top: 55px;
5 | }
6 |
7 | .account .col.s8.offset-s3{
8 | margin-top: 50px;
9 | }
10 |
11 | .account .sidenav.sidenav-fixed{
12 | top: 64px;
13 | }
14 |
15 | .account .center-align{
16 | justify-content: center;
17 | }
18 |
19 | .account .sidenav span.account-link{
20 | color: rgba(0,0,0,0.87);
21 | display: block;
22 | font-size: 14px;
23 | font-weight: 500;
24 | height: 48px;
25 | line-height: 48px;
26 | padding: 0 32px;
27 | }
28 |
29 | .booking td, .booking th{
30 | vertical-align: top;
31 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/pages/Account/SETUP.md:
--------------------------------------------------------------------------------
1 | SET UP:
2 | Path to /account in App.js
3 | Add a link to the path in the navbar with
4 | Setup a class based component called Account
5 | 1. Put it in it's own folder with Account.css
6 | 2. give it access to redux, specifically state.auth
7 | 3. Include axios, moment, and { Route }
8 | 4. initialize 2 pieces of state:
9 | - pastBookings: []
10 | - upcomingBookings: []
11 | 5. initialize componentDidMount and render sanity check
12 |
13 | Setup these functional components in the Account folder
14 | with a sanity check for each, and import them into Account
15 | - Bookings
16 | - AccountSideBar
17 | - ChangePassword
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/pages/CityVenues/CityVenues.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone-hooks-finishedRefactor/pages/CityVenues/CityVenues.css
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/pages/Home/Home.css:
--------------------------------------------------------------------------------
1 | .home{
2 | padding: 0px !important;
3 | }
4 |
5 | .home .upper-fold{
6 | height: 100vh !important;
7 | background-image: url('https://a0.muscache.com/4ea/air/r:w775-h518-sfit,e:fjpg-c80/pictures/0ffd8594-f123-43f0-85bb-7ef88c6f0624.jpg');
8 | background-size: cover;
9 | }
10 |
11 | .lower-fold{
12 | padding-left: 80px;
13 | padding-right: 80px;
14 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/pages/Search/Search.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone-hooks-finishedRefactor/pages/Search/Search.css
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/pages/SingleFullVenue/Point.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Point(props){
4 |
5 | const descObj = props.pointDesc.find((point)=> point.pointTitle === props.point)
6 |
7 | return(
8 |
9 |
{props.point}
10 |
{descObj.text}
11 |
12 | )
13 | }
14 |
15 | export default Point;
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/pages/logout/Logout.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone-hooks-finishedRefactor/pages/logout/Logout.css
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/pages/logout/Logout.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './Logout.css';
3 | function Logout(props){
4 |
5 | return(
6 | Logout
7 | )
8 | }
9 |
10 | export default Logout;
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/reducers/authReducer.js:
--------------------------------------------------------------------------------
1 | const initState = {};
2 | export default(state = initState, action)=>{
3 | if(action.type==="REGISTER_ACTION"){
4 | return action.payload;
5 | }else if(action.type==="LOGOUT"){
6 | return initState;
7 | }else{
8 | return state;
9 | }
10 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import authReducer from './authReducer';
3 | import siteModal from './siteModal';
4 |
5 | const rootReducer = combineReducers({
6 | auth: authReducer,
7 | siteModal: siteModal,
8 | })
9 |
10 | export default rootReducer;
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/reducers/siteModal.js:
--------------------------------------------------------------------------------
1 | const initState = {openClose: "closed",content: ""}
2 |
3 | export default(state = initState, action)=>{
4 | if(action.type === "OPEN_MODAL"){
5 | return action.payload;
6 | }
7 | return state
8 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/utility/Activity/Activity.css:
--------------------------------------------------------------------------------
1 | .activities{
2 | margin-top:20px;
3 | }
4 |
5 | .activities .activity a{
6 | color: #000;
7 | }
8 |
9 | .activities .activity img{
10 | max-width: 100%;
11 | border-radius: 8px;
12 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/utility/City/Cities.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import City from './City';
3 | import SlickSlider from '../Slider/Slider';
4 |
5 | function Cities(props){
6 | const cities = props.cities.map((city, i)=>{
7 | return(
8 |
9 |
10 |
11 | )
12 | })
13 | return(
14 |
15 |
{props.header}
16 |
17 |
18 | )
19 | }
20 |
21 | export default Cities;
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/utility/NavBar/NavBar.css:
--------------------------------------------------------------------------------
1 | .nav{
2 | position: absolute;
3 | width: 100%;
4 | top: 0;
5 | left: 0;
6 | }
7 |
8 | .nav nav{
9 | box-shadow: none;
10 | }
11 |
12 | .nav ul li{
13 | color: white;
14 | cursor: pointer;
15 | }
16 |
17 | .nav ul li.login-signup{
18 | margin-right: 15px;
19 | }
20 |
21 | .nav .nav-non-link{
22 | padding: 0 15px;
23 | }
24 |
25 | .nav-non-link:hover{
26 | border-bottom: 2px solid white;
27 | background-color: initial;
28 | }
29 |
30 | .nav ul li:hover{
31 | border-bottom: 2px solid white;
32 | background-color: initial;
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/utility/Slider/Slider.css:
--------------------------------------------------------------------------------
1 | .slick .slick-prev:before, .slick .slick-next:before{
2 | font-size: 30px;
3 | }
4 |
5 | .slick .slick-arrow{
6 | z-index: 100;
7 | }
8 |
9 | .slick .slick-arrow.slick-prev{
10 | left: 15px;
11 | }
12 |
13 | .slick .slick-arrow.slick-next{
14 | right: 25px;
15 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/utility/Spinner/Spinner.css:
--------------------------------------------------------------------------------
1 | .spinner-wrapper{
2 | position: absolute;
3 | left: 50%;
4 | transform: translateX(-50%);
5 | top: 40%;
6 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/utility/Spinner/Spinner.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Spinner.css';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { faSpinner } from '@fortawesome/free-solid-svg-icons';
5 | import { library } from '@fortawesome/fontawesome-svg-core'
6 | library.add(faSpinner);
7 |
8 | class Spinner extends Component{
9 |
10 | render(){
11 | return(
12 |
13 |
14 |
15 | )
16 | }
17 | }
18 |
19 | export default Spinner;
20 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/utility/Venue/Venue.css:
--------------------------------------------------------------------------------
1 | .venues{
2 | margin-top:20px;
3 | }
4 |
5 | .venues .venue{
6 | margin-bottom: 30px;
7 | }
8 |
9 | .venues .venue a{
10 | color: #000;
11 | }
12 |
13 | .venues .venue img{
14 | max-width: 100%;
15 | border-radius: 8px;
16 | }
17 |
18 | .venues .venue .location{
19 | color: rgb(113, 113, 113) !important;
20 | }
21 |
22 | .venue .material-icons{
23 | color: #f00;
24 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/utility/Venue/Venues.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Venue from './Venue';
3 | import './Venue.css'
4 |
5 | function Venues(props){
6 | console.log(props)
7 | const venues = props.venues.map((venue, i)=>{
8 | console.log(venue)
9 | return(
10 |
11 |
12 |
13 | )
14 | })
15 | return(
16 |
17 |
{props.header}
18 | {venues}
19 |
20 | )
21 | }
22 |
23 | export default Venues;
--------------------------------------------------------------------------------
/airbnb-clone-hooks-finishedRefactor/utiltityFunctions/loadScript.js:
--------------------------------------------------------------------------------
1 |
2 | export default (scriptUrl)=>{
3 | return new Promise((resolve, reject)=>{
4 | const script = document.createElement('script');
5 | script.type = 'text/javascript';
6 | script.src = scriptUrl;
7 | script.onload = ()=>{
8 | console.log("The script has loaded!")
9 | resolve();
10 | }
11 | document.getElementsByTagName('head')[0].appendChild(script);
12 | console.log("The script has been added to the head!")
13 | })
14 | }
15 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone-hooks/public/favicon.ico
--------------------------------------------------------------------------------
/airbnb-clone-hooks/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone-hooks/public/logo192.png
--------------------------------------------------------------------------------
/airbnb-clone-hooks/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone-hooks/public/logo512.png
--------------------------------------------------------------------------------
/airbnb-clone-hooks/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/App.css:
--------------------------------------------------------------------------------
1 | .text-link{
2 | cursor: pointer;
3 | color: blue;
4 | }
5 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
6 | const { getByText } = render();
7 | const linkElement = getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
10 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/actions/logoutAction.js:
--------------------------------------------------------------------------------
1 | export default()=>{
2 | return{
3 | type: "LOGOUT",
4 | }
5 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/actions/openModal.js:
--------------------------------------------------------------------------------
1 | export default (openClose,content)=>{
2 | return{
3 | type: "OPEN_MODAL",
4 | payload: {
5 | openClose,
6 | content,
7 | }
8 | }
9 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/actions/regAction.js:
--------------------------------------------------------------------------------
1 | export default(regObj)=>{
2 | return{
3 | type: "REGISTER_ACTION",
4 | payload: regObj,
5 | }
6 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/customHooks/useControlledInput.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | // handle any onChange input that needs to be controlled
3 |
4 | export default (initValue)=>{
5 | const [ value, setValue ] = useState(initValue);
6 | return {
7 | value: value,
8 | onChange: (e)=>{
9 | console.log(e.target.value);
10 | setValue(e.target.value);
11 | }
12 | }
13 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
15 | .main-header-text{
16 | font-size: 30px !important;
17 | line-height: 36px !important;
18 | letter-spacing: normal !important;
19 | color: #484848 !important;
20 | padding-top: 6px !important;
21 | padding-bottom: 6px !important;
22 | margin: 0px !important;
23 | margin-bottom: 20px !important;
24 | padding: 0px !important;
25 | font-weight: bold;
26 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/pages/Account/Account.css:
--------------------------------------------------------------------------------
1 | .account{
2 | position: relative;
3 | z-index: 100;
4 | margin-top: 55px;
5 | }
6 |
7 | .account .col.s8.offset-s3{
8 | margin-top: 50px;
9 | }
10 |
11 | .account .sidenav.sidenav-fixed{
12 | top: 64px;
13 | }
14 |
15 | .account .center-align{
16 | justify-content: center;
17 | }
18 |
19 | .account .sidenav span.account-link{
20 | color: rgba(0,0,0,0.87);
21 | display: block;
22 | font-size: 14px;
23 | font-weight: 500;
24 | height: 48px;
25 | line-height: 48px;
26 | padding: 0 32px;
27 | }
28 |
29 | .booking td, .booking th{
30 | vertical-align: top;
31 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/pages/Account/SETUP.md:
--------------------------------------------------------------------------------
1 | SET UP:
2 | Path to /account in App.js
3 | Add a link to the path in the navbar with
4 | Setup a class based component called Account
5 | 1. Put it in it's own folder with Account.css
6 | 2. give it access to redux, specifically state.auth
7 | 3. Include axios, moment, and { Route }
8 | 4. initialize 2 pieces of state:
9 | - pastBookings: []
10 | - upcomingBookings: []
11 | 5. initialize componentDidMount and render sanity check
12 |
13 | Setup these functional components in the Account folder
14 | with a sanity check for each, and import them into Account
15 | - Bookings
16 | - AccountSideBar
17 | - ChangePassword
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/pages/CityVenues/CityVenues.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone-hooks/src/pages/CityVenues/CityVenues.css
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/pages/Home/Home.css:
--------------------------------------------------------------------------------
1 | .home{
2 | padding: 0px !important;
3 | }
4 |
5 | .home .upper-fold{
6 | height: 100vh !important;
7 | background-image: url('https://a0.muscache.com/4ea/air/r:w775-h518-sfit,e:fjpg-c80/pictures/0ffd8594-f123-43f0-85bb-7ef88c6f0624.jpg');
8 | background-size: cover;
9 | }
10 |
11 | .lower-fold{
12 | padding-left: 80px;
13 | padding-right: 80px;
14 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/pages/Search/Search.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone-hooks/src/pages/Search/Search.css
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/pages/SingleFullVenue/Point.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Point(props){
4 |
5 | const descObj = props.pointDesc.find((point)=> point.pointTitle === props.point)
6 |
7 | return(
8 |
9 |
{props.point}
10 |
{descObj.text}
11 |
12 | )
13 | }
14 |
15 | export default Point;
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/pages/logout/Logout.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone-hooks/src/pages/logout/Logout.css
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/pages/logout/Logout.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './Logout.css';
3 | class Logout extends Component{
4 |
5 | render(){
6 | return(
7 | Logout
8 | )
9 | }
10 |
11 | }
12 |
13 | export default Logout;
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/reducers/authReducer.js:
--------------------------------------------------------------------------------
1 | const initState = {};
2 | export default(state = initState, action)=>{
3 | if(action.type==="REGISTER_ACTION"){
4 | return action.payload;
5 | }else if(action.type==="LOGOUT"){
6 | return initState;
7 | }else{
8 | return state;
9 | }
10 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import authReducer from './authReducer';
3 | import siteModal from './siteModal';
4 |
5 | const rootReducer = combineReducers({
6 | auth: authReducer,
7 | siteModal: siteModal,
8 | })
9 |
10 | export default rootReducer;
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/reducers/siteModal.js:
--------------------------------------------------------------------------------
1 | const initState = {openClose: "closed",content: ""}
2 |
3 | export default(state = initState, action)=>{
4 | if(action.type === "OPEN_MODAL"){
5 | return action.payload;
6 | }
7 | return state
8 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/utility/Activity/Activities.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Activity.css';
3 | import Activity from './Activity';
4 |
5 | class Activities extends Component{
6 |
7 | render(){
8 | // console.log(this.props.activities);
9 | const activities = this.props.activities.map((activity,i)=>{
10 | return(
11 |
14 | )
15 | })
16 | return(
17 |
18 |
{this.props.header}
19 | {activities}
20 |
21 | )
22 | }
23 | }
24 |
25 | export default Activities;
26 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/utility/Activity/Activity.css:
--------------------------------------------------------------------------------
1 | .activities{
2 | margin-top:20px;
3 | }
4 |
5 | .activities .activity a{
6 | color: #000;
7 | }
8 |
9 | .activities .activity img{
10 | max-width: 100%;
11 | border-radius: 8px;
12 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/utility/City/Cities.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import City from './City';
3 | import SlickSlider from '../Slider/Slider';
4 |
5 | function Cities(props){
6 | const cities = props.cities.map((city, i)=>{
7 | return(
8 |
9 |
10 |
11 | )
12 | })
13 | return(
14 |
15 |
{props.header}
16 |
17 |
18 | )
19 | }
20 |
21 | export default Cities;
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/utility/City/City.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './City.css';
3 | import { Link } from 'react-router-dom';
4 |
5 | class City extends Component{
6 |
7 | render(){
8 | // console.log(this.props.city);
9 | const { cityName, image, price, id } = this.props.city;
10 | return(
11 |
12 |
13 |
14 |

15 |
16 |
{cityName}
17 |
${price}/night average
18 |
19 |
20 | )
21 | }
22 | }
23 |
24 | export default City;
25 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/utility/NavBar/NavBar.css:
--------------------------------------------------------------------------------
1 | .nav{
2 | position: absolute;
3 | width: 100%;
4 | top: 0;
5 | left: 0;
6 | }
7 |
8 | .nav nav{
9 | box-shadow: none;
10 | }
11 |
12 | .nav ul li{
13 | color: white;
14 | cursor: pointer;
15 | }
16 |
17 | .nav ul li.login-signup{
18 | margin-right: 15px;
19 | }
20 |
21 | .nav .nav-non-link{
22 | padding: 0 15px;
23 | }
24 |
25 | .nav-non-link:hover{
26 | border-bottom: 2px solid white;
27 | background-color: initial;
28 | }
29 |
30 | .nav ul li:hover{
31 | border-bottom: 2px solid white;
32 | background-color: initial;
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/utility/Slider/Slider.css:
--------------------------------------------------------------------------------
1 | .slick .slick-prev:before, .slick .slick-next:before{
2 | font-size: 30px;
3 | }
4 |
5 | .slick .slick-arrow{
6 | z-index: 100;
7 | }
8 |
9 | .slick .slick-arrow.slick-prev{
10 | left: 15px;
11 | }
12 |
13 | .slick .slick-arrow.slick-next{
14 | right: 25px;
15 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/utility/Slider/Slider.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import "slick-carousel/slick/slick.css";
3 | import "slick-carousel/slick/slick-theme.css";
4 | import './Slider.css';
5 | import SlickSlider from 'react-slick';
6 |
7 | class Slider extends Component{
8 |
9 | render(){
10 | const settings = {
11 | dots: false,
12 | infinite: true,
13 | speed: 500,
14 | arrows: true,
15 | slidesToShow: 4,
16 | slidesToScroll: 1,
17 | }
18 | return(
19 |
20 |
21 | {this.props.elements}
22 |
23 |
24 | )
25 | }
26 | }
27 |
28 | export default Slider;
29 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/utility/Spinner/Spinner.css:
--------------------------------------------------------------------------------
1 | .spinner-wrapper{
2 | position: absolute;
3 | left: 50%;
4 | transform: translateX(-50%);
5 | top: 40%;
6 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/utility/Spinner/Spinner.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Spinner.css';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { faSpinner } from '@fortawesome/free-solid-svg-icons';
5 | import { library } from '@fortawesome/fontawesome-svg-core'
6 | library.add(faSpinner);
7 |
8 | class Spinner extends Component{
9 |
10 | render(){
11 | return(
12 |
13 |
14 |
15 | )
16 | }
17 | }
18 |
19 | export default Spinner;
20 |
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/utility/Venue/Venue.css:
--------------------------------------------------------------------------------
1 | .venues{
2 | margin-top:20px;
3 | }
4 |
5 | .venues .venue{
6 | margin-bottom: 30px;
7 | }
8 |
9 | .venues .venue a{
10 | color: #000;
11 | }
12 |
13 | .venues .venue img{
14 | max-width: 100%;
15 | border-radius: 8px;
16 | }
17 |
18 | .venues .venue .location{
19 | color: rgb(113, 113, 113) !important;
20 | }
21 |
22 | .venue .material-icons{
23 | color: #f00;
24 | }
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/utility/Venue/Venues.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Venue from './Venue';
3 | import './Venue.css'
4 |
5 | function Venues(props){
6 | console.log(props)
7 | const venues = props.venues.map((venue, i)=>{
8 | console.log(venue)
9 | return(
10 |
11 |
12 |
13 | )
14 | })
15 | return(
16 |
17 |
{props.header}
18 | {venues}
19 |
20 | )
21 | }
22 |
23 | export default Venues;
--------------------------------------------------------------------------------
/airbnb-clone-hooks/src/utiltityFunctions/loadScript.js:
--------------------------------------------------------------------------------
1 |
2 | export default (scriptUrl)=>{
3 | return new Promise((resolve, reject)=>{
4 | const script = document.createElement('script');
5 | script.type = 'text/javascript';
6 | script.src = scriptUrl;
7 | script.onload = ()=>{
8 | console.log("The script has loaded!")
9 | resolve();
10 | }
11 | document.getElementsByTagName('head')[0].appendChild(script);
12 | console.log("The script has been added to the head!")
13 | })
14 | }
15 |
--------------------------------------------------------------------------------
/airbnb-clone/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/airbnb-clone/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone/public/favicon.ico
--------------------------------------------------------------------------------
/airbnb-clone/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone/public/logo192.png
--------------------------------------------------------------------------------
/airbnb-clone/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone/public/logo512.png
--------------------------------------------------------------------------------
/airbnb-clone/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/airbnb-clone/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 |
--------------------------------------------------------------------------------
/airbnb-clone/src/App.css:
--------------------------------------------------------------------------------
1 | .text-link{
2 | cursor: pointer;
3 | color: blue;
4 | }
5 |
--------------------------------------------------------------------------------
/airbnb-clone/src/actions/logoutAction.js:
--------------------------------------------------------------------------------
1 | export default()=>{
2 | return{
3 | type: "LOGOUT",
4 | }
5 | }
--------------------------------------------------------------------------------
/airbnb-clone/src/actions/openModal.js:
--------------------------------------------------------------------------------
1 | export default (openClose,content)=>{
2 | return{
3 | type: "OPEN_MODAL",
4 | payload: {
5 | openClose,
6 | content,
7 | }
8 | }
9 | }
--------------------------------------------------------------------------------
/airbnb-clone/src/actions/regAction.js:
--------------------------------------------------------------------------------
1 | export default(regObj)=>{
2 | return{
3 | type: "REGISTER_ACTION",
4 | payload: regObj,
5 | }
6 | }
--------------------------------------------------------------------------------
/airbnb-clone/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
15 | .main-header-text{
16 | font-size: 30px !important;
17 | line-height: 36px !important;
18 | letter-spacing: normal !important;
19 | color: #484848 !important;
20 | padding-top: 6px !important;
21 | padding-bottom: 6px !important;
22 | margin: 0px !important;
23 | margin-bottom: 20px !important;
24 | padding: 0px !important;
25 | font-weight: bold;
26 | }
--------------------------------------------------------------------------------
/airbnb-clone/src/pages/Account/Account.css:
--------------------------------------------------------------------------------
1 | .account{
2 | position: relative;
3 | z-index: 100;
4 | margin-top: 55px;
5 | }
6 |
7 | .account .col.s8.offset-s3{
8 | margin-top: 50px;
9 | }
10 |
11 | .account .sidenav.sidenav-fixed{
12 | top: 64px;
13 | }
14 |
15 | .account .center-align{
16 | justify-content: center;
17 | }
18 |
19 | .account .sidenav span.account-link{
20 | color: rgba(0,0,0,0.87);
21 | display: block;
22 | font-size: 14px;
23 | font-weight: 500;
24 | height: 48px;
25 | line-height: 48px;
26 | padding: 0 32px;
27 | }
28 |
29 | .booking td, .booking th{
30 | vertical-align: top;
31 | }
--------------------------------------------------------------------------------
/airbnb-clone/src/pages/Account/SETUP.md:
--------------------------------------------------------------------------------
1 | SET UP:
2 | Path to /account in App.js
3 | Add a link to the path in the navbar with
4 | Setup a class based component called Account
5 | 1. Put it in it's own folder with Account.css
6 | 2. give it access to redux, specifically state.auth
7 | 3. Include axios, moment, and { Route }
8 | 4. initialize 2 pieces of state:
9 | - pastBookings: []
10 | - upcomingBookings: []
11 | 5. initialize componentDidMount and render sanity check
12 |
13 | Setup these functional components in the Account folder
14 | with a sanity check for each, and import them into Account
15 | - Bookings
16 | - AccountSideBar
17 | - ChangePassword
--------------------------------------------------------------------------------
/airbnb-clone/src/pages/CityVenues/CityVenues.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone/src/pages/CityVenues/CityVenues.css
--------------------------------------------------------------------------------
/airbnb-clone/src/pages/Home/Home.css:
--------------------------------------------------------------------------------
1 | .home{
2 | padding: 0px !important;
3 | }
4 |
5 | .home .upper-fold{
6 | height: 100vh !important;
7 | background-image: url('https://a0.muscache.com/4ea/air/r:w775-h518-sfit,e:fjpg-c80/pictures/0ffd8594-f123-43f0-85bb-7ef88c6f0624.jpg');
8 | background-size: cover;
9 | }
10 |
11 | .lower-fold{
12 | padding-left: 80px;
13 | padding-right: 80px;
14 | }
--------------------------------------------------------------------------------
/airbnb-clone/src/pages/Search/Search.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone/src/pages/Search/Search.css
--------------------------------------------------------------------------------
/airbnb-clone/src/pages/SingleFullVenue/Point.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Point(props){
4 |
5 | const descObj = props.pointDesc.find((point)=> point.pointTitle === props.point)
6 |
7 | return(
8 |
9 |
{props.point}
10 |
{descObj.text}
11 |
12 | )
13 | }
14 |
15 | export default Point;
--------------------------------------------------------------------------------
/airbnb-clone/src/pages/logout/Logout.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-clone/src/pages/logout/Logout.css
--------------------------------------------------------------------------------
/airbnb-clone/src/pages/logout/Logout.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './Logout.css';
3 | class Logout extends Component{
4 |
5 | render(){
6 | return(
7 | Logout
8 | )
9 | }
10 |
11 | }
12 |
13 | export default Logout;
--------------------------------------------------------------------------------
/airbnb-clone/src/reducers/authReducer.js:
--------------------------------------------------------------------------------
1 | const initState = {};
2 | export default(state = initState, action)=>{
3 | if(action.type==="REGISTER_ACTION"){
4 | return action.payload;
5 | }else if(action.type==="LOGOUT"){
6 | return initState;
7 | }else{
8 | return state;
9 | }
10 | }
--------------------------------------------------------------------------------
/airbnb-clone/src/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import authReducer from './authReducer';
3 | import siteModal from './siteModal';
4 |
5 | const rootReducer = combineReducers({
6 | auth: authReducer,
7 | siteModal: siteModal,
8 | })
9 |
10 | export default rootReducer;
--------------------------------------------------------------------------------
/airbnb-clone/src/reducers/siteModal.js:
--------------------------------------------------------------------------------
1 | const initState = {openClose: "closed",content: ""}
2 |
3 | export default(state = initState, action)=>{
4 | if(action.type === "OPEN_MODAL"){
5 | return action.payload;
6 | }
7 | return state
8 | }
--------------------------------------------------------------------------------
/airbnb-clone/src/utility/Activity/Activities.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Activity.css';
3 | import Activity from './Activity';
4 |
5 | class Activities extends Component{
6 |
7 | render(){
8 | // console.log(this.props.activities);
9 | const activities = this.props.activities.map((activity,i)=>{
10 | return(
11 |
14 | )
15 | })
16 | return(
17 |
18 |
{this.props.header}
19 | {activities}
20 |
21 | )
22 | }
23 | }
24 |
25 | export default Activities;
26 |
--------------------------------------------------------------------------------
/airbnb-clone/src/utility/Activity/Activity.css:
--------------------------------------------------------------------------------
1 | .activities{
2 | margin-top:20px;
3 | }
4 |
5 | .activities .activity a{
6 | color: #000;
7 | }
8 |
9 | .activities .activity img{
10 | max-width: 100%;
11 | border-radius: 8px;
12 | }
--------------------------------------------------------------------------------
/airbnb-clone/src/utility/City/Cities.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import City from './City';
3 | import SlickSlider from '../Slider/Slider';
4 |
5 | function Cities(props){
6 | const cities = props.cities.map((city, i)=>{
7 | return(
8 |
9 |
10 |
11 | )
12 | })
13 | return(
14 |
15 |
{props.header}
16 |
17 |
18 | )
19 | }
20 |
21 | export default Cities;
--------------------------------------------------------------------------------
/airbnb-clone/src/utility/City/City.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './City.css';
3 | import { Link } from 'react-router-dom';
4 |
5 | class City extends Component{
6 |
7 | render(){
8 | // console.log(this.props.city);
9 | const { cityName, image, price, id } = this.props.city;
10 | return(
11 |
12 |
13 |
14 |

15 |
16 |
{cityName}
17 |
${price}/night average
18 |
19 |
20 | )
21 | }
22 | }
23 |
24 | export default City;
25 |
--------------------------------------------------------------------------------
/airbnb-clone/src/utility/NavBar/NavBar.css:
--------------------------------------------------------------------------------
1 | .nav{
2 | position: absolute;
3 | width: 100%;
4 | top: 0;
5 | left: 0;
6 | }
7 |
8 | .nav nav{
9 | box-shadow: none;
10 | }
11 |
12 | .nav ul li{
13 | color: white;
14 | cursor: pointer;
15 | }
16 |
17 | .nav ul li.login-signup{
18 | margin-right: 15px;
19 | }
20 |
21 | .nav .nav-non-link{
22 | padding: 0 15px;
23 | }
24 |
25 | .nav-non-link:hover{
26 | border-bottom: 2px solid white;
27 | background-color: initial;
28 | }
29 |
30 | .nav ul li:hover{
31 | border-bottom: 2px solid white;
32 | background-color: initial;
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/airbnb-clone/src/utility/Slider/Slider.css:
--------------------------------------------------------------------------------
1 | .slick .slick-prev:before, .slick .slick-next:before{
2 | font-size: 30px;
3 | }
4 |
5 | .slick .slick-arrow{
6 | z-index: 100;
7 | }
8 |
9 | .slick .slick-arrow.slick-prev{
10 | left: 15px;
11 | }
12 |
13 | .slick .slick-arrow.slick-next{
14 | right: 25px;
15 | }
--------------------------------------------------------------------------------
/airbnb-clone/src/utility/Slider/Slider.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import "slick-carousel/slick/slick.css";
3 | import "slick-carousel/slick/slick-theme.css";
4 | import './Slider.css';
5 | import SlickSlider from 'react-slick';
6 |
7 | class Slider extends Component{
8 |
9 | render(){
10 | const settings = {
11 | dots: false,
12 | infinite: true,
13 | speed: 500,
14 | arrows: true,
15 | slidesToShow: 4,
16 | slidesToScroll: 1,
17 | }
18 | return(
19 |
20 |
21 | {this.props.elements}
22 |
23 |
24 | )
25 | }
26 | }
27 |
28 | export default Slider;
29 |
--------------------------------------------------------------------------------
/airbnb-clone/src/utility/Spinner/Spinner.css:
--------------------------------------------------------------------------------
1 | .spinner-wrapper{
2 | position: absolute;
3 | left: 50%;
4 | transform: translateX(-50%);
5 | top: 40%;
6 | }
--------------------------------------------------------------------------------
/airbnb-clone/src/utility/Spinner/Spinner.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Spinner.css';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { faSpinner } from '@fortawesome/free-solid-svg-icons';
5 | import { library } from '@fortawesome/fontawesome-svg-core'
6 | library.add(faSpinner);
7 |
8 | class Spinner extends Component{
9 |
10 | render(){
11 | return(
12 |
13 |
14 |
15 | )
16 | }
17 | }
18 |
19 | export default Spinner;
20 |
--------------------------------------------------------------------------------
/airbnb-clone/src/utility/Venue/Venue.css:
--------------------------------------------------------------------------------
1 | .venues{
2 | margin-top:20px;
3 | }
4 |
5 | .venues .venue{
6 | margin-bottom: 30px;
7 | }
8 |
9 | .venues .venue a{
10 | color: #000;
11 | }
12 |
13 | .venues .venue img{
14 | max-width: 100%;
15 | border-radius: 8px;
16 | }
17 |
18 | .venues .venue .location{
19 | color: rgb(113, 113, 113) !important;
20 | }
21 |
22 | .venue .material-icons{
23 | color: #f00;
24 | }
--------------------------------------------------------------------------------
/airbnb-clone/src/utility/Venue/Venues.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Venue from './Venue';
3 | import './Venue.css'
4 |
5 | function Venues(props){
6 | console.log(props)
7 | const venues = props.venues.map((venue, i)=>{
8 | console.log(venue)
9 | return(
10 |
11 |
12 |
13 | )
14 | })
15 | return(
16 |
17 |
{props.header}
18 | {venues}
19 |
20 | )
21 | }
22 |
23 | export default Venues;
--------------------------------------------------------------------------------
/airbnb-clone/src/utiltityFunctions/loadScript.js:
--------------------------------------------------------------------------------
1 | export default (scriptUrl)=>{
2 | return new Promise((resolve, reject)=>{
3 | const script = document.createElement('script');
4 | script.type = 'text/javascript';
5 | script.src = scriptUrl;
6 | script.onload = ()=>{
7 | console.log("The script has loaded!")
8 | resolve();
9 | }
10 | document.getElementsByTagName('head')[0].appendChild(script);
11 | console.log("The script has been added to the head!")
12 | })
13 | }
14 |
--------------------------------------------------------------------------------
/airbnb-stages/src-beginning/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | }
8 |
9 | .App-header {
10 | background-color: #282c34;
11 | min-height: 100vh;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | justify-content: center;
16 | font-size: calc(10px + 2vmin);
17 | color: white;
18 | }
19 |
20 | .App-link {
21 | color: #09d3ac;
22 | }
23 |
--------------------------------------------------------------------------------
/airbnb-stages/src-beginning/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { BrowserRouter as Router, Route } from 'react-router-dom';
3 | // import './App.css';
4 | import Home from './pages/Home/Home';
5 | import NavBar from './utility/NavBar/NavBar';
6 | // Routes:
7 | // /cities/recommended
8 | // /cities/:feature
9 | // /city/:cityName
10 | // /venues/recommended
11 | // /venues/superHost
12 | // /seach/:searchTerm
13 | // /venue/:venueId
14 | // /payment/stripe
15 |
16 | class App extends Component{
17 |
18 | render(){
19 | return(
20 |
21 |
22 |
23 |
24 | )
25 | }
26 |
27 | }
28 |
29 | export default App;
30 |
--------------------------------------------------------------------------------
/airbnb-stages/src-beginning/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/airbnb-stages/src-beginning/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | import { Provider } from 'react-redux';
7 | import { createStore, applyMiddleware } from 'redux';
8 | import rootReducer from './reducers/rootReducer';
9 | import reduxPromise from 'redux-promise';
10 |
11 | const theStore = applyMiddleware(reduxPromise)(createStore)(rootReducer);
12 |
13 | ReactDOM.render(
14 |
15 |
16 | ,
17 | document.getElementById('root')
18 | );
19 |
20 |
21 |
--------------------------------------------------------------------------------
/airbnb-stages/src-beginning/pages/Home/Home.css:
--------------------------------------------------------------------------------
1 | .home{
2 | padding: 0px !important;
3 | }
4 |
5 | .home .upper-fold{
6 | height: 100vh !important;
7 | background-image: url('https://a0.muscache.com/4ea/air/r:w775-h518-sfit,e:fjpg-c80/pictures/0ffd8594-f123-43f0-85bb-7ef88c6f0624.jpg');
8 | background-size: cover;
9 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-beginning/pages/Home/Home.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Home.css';
3 |
4 | class Home extends Component{
5 |
6 | render(){
7 | return(<>
8 | Home Page
9 | >
10 | )
11 | }
12 | }
13 |
14 | export default Home;
15 |
--------------------------------------------------------------------------------
/airbnb-stages/src-beginning/reducers/authReducer.js:
--------------------------------------------------------------------------------
1 | export default(state = {}, action)=>{
2 | return state;
3 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-beginning/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import authReducer from './authReducer';
3 |
4 | const rootReducer = combineReducers({
5 | auth: authReducer,
6 | })
7 |
8 | export default rootReducer;
--------------------------------------------------------------------------------
/airbnb-stages/src-beginning/utility/City/City.css:
--------------------------------------------------------------------------------
1 | .city{
2 | position: relative;
3 | overflow-wrap: break-word;
4 | font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif !important;
5 | font-size: 18px;
6 | font-weight: 800;
7 | line-height: 1.44444em;
8 | color: rgb(255, 255, 255);
9 | text-align: center;
10 | margin: 0px;
11 | text-transform: capitalize;
12 | }
13 |
14 | .city img{
15 | max-width: 100%;
16 | }
17 |
18 | .city .city-name, .city .price{
19 | position: absolute;
20 | bottom: 25px;
21 | left: 0px;
22 | right: 0px;
23 | padding-bottom: 32px;
24 | padding-left: 24px;
25 | padding-right: 24px;
26 | }
27 |
28 | .city .price{
29 | bottom: 0px;
30 | font-weight: normal;
31 | }
32 |
--------------------------------------------------------------------------------
/airbnb-stages/src-beginning/utility/NavBar/NavBar.css:
--------------------------------------------------------------------------------
1 | .nav{
2 | position: absolute;
3 | width: 100%;
4 | top: 0;
5 | left: 0;
6 | }
7 |
8 | .nav nav{
9 | box-shadow: none;
10 | }
11 |
12 | .nav ul li{
13 | color: white;
14 | cursor: pointer;
15 | }
16 |
17 |
18 | .nav .nav-non-link{
19 | padding: 0 15px;
20 | }
21 |
22 | .nav-non-link:hover{
23 | border-bottom: 2px solid white;
24 | background-color: initial;
25 | }
26 |
27 | .nav ul li:hover{
28 | border-bottom: 2px solid white;
29 | background-color: initial;
30 | }
31 |
32 |
--------------------------------------------------------------------------------
/airbnb-stages/src-beginning/utility/NavBar/NavBar.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './NavBar.css';
3 |
4 | class NavBar extends Component{
5 |
6 | render(){
7 | return(<>
8 | NavBar Page
9 | >
10 | )
11 | }
12 | }
13 |
14 | export default NavBar;
15 |
--------------------------------------------------------------------------------
/airbnb-stages/src-beginning/utility/Slider/Slider.css:
--------------------------------------------------------------------------------
1 |
2 | .slick .slick-prev:before, .slick .slick-next:before{
3 | font-size: 30px;
4 | }
5 |
6 | .slick .slick-arrow{
7 | z-index: 100;
8 | }
9 |
10 | .slick .slick-arrow.slick-prev{
11 | left: 15px;
12 | }
13 |
14 | .slick .slick-arrow.slick-next{
15 | right: 25px;
16 | }
17 |
--------------------------------------------------------------------------------
/airbnb-stages/src-beginning/utility/Spinner/Spinner.css:
--------------------------------------------------------------------------------
1 | .spinner-wrapper{
2 | position: absolute;
3 | left: 50%;
4 | transform: translateX(-50%);
5 | top: 40%
6 | }
7 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | }
8 |
9 | .App-header {
10 | background-color: #282c34;
11 | min-height: 100vh;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | justify-content: center;
16 | font-size: calc(10px + 2vmin);
17 | color: white;
18 | }
19 |
20 | .App-link {
21 | color: #09d3ac;
22 | }
23 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { BrowserRouter as Router, Route } from 'react-router-dom';
3 | // import './App.css';
4 | import Home from './pages/Home/Home';
5 | import NavBar from './utility/NavBar/NavBar';
6 | import SingleFullVenue from './pages/SingleFullVenue/SingleFullVenue';
7 |
8 | class App extends Component{
9 |
10 | render(){
11 | return(
12 |
13 |
14 |
15 |
16 |
17 | )
18 | }
19 |
20 | }
21 |
22 | export default App;
23 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | import { Provider } from 'react-redux';
7 | import { createStore, applyMiddleware } from 'redux';
8 | import rootReducer from './reducers/rootReducer';
9 | import reduxPromise from 'redux-promise';
10 |
11 | const theStore = applyMiddleware(reduxPromise)(createStore)(rootReducer);
12 |
13 | ReactDOM.render(
14 |
15 |
16 | ,
17 | document.getElementById('root')
18 | );
19 |
20 |
21 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/pages/Home/Home.css:
--------------------------------------------------------------------------------
1 | .home{
2 | padding: 0px !important;
3 | }
4 |
5 | .home .upper-fold{
6 | height: 100vh !important;
7 | background-image: url('https://a0.muscache.com/4ea/air/r:w775-h518-sfit,e:fjpg-c80/pictures/0ffd8594-f123-43f0-85bb-7ef88c6f0624.jpg');
8 | background-size: cover;
9 | }
10 |
11 | .lower-fold{
12 | padding-left: 80px;
13 | padding-right: 80px;
14 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/pages/SingleFullVenue/Point.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Point(props){
4 |
5 | const descObj = props.pointDesc.find((point)=> point.pointTitle === props.point)
6 |
7 | return(
8 |
9 |
{props.point}
10 |
{descObj.text}
11 |
12 | )
13 | }
14 |
15 | export default Point;
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/reducers/authReducer.js:
--------------------------------------------------------------------------------
1 | export default(state = {}, action)=>{
2 | return state;
3 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import authReducer from './authReducer';
3 |
4 | const rootReducer = combineReducers({
5 | auth: authReducer,
6 | })
7 |
8 | export default rootReducer;
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/utility/Activity/Activity.css:
--------------------------------------------------------------------------------
1 | .activities{
2 | margin-top:20px;
3 | }
4 |
5 | .activities .activity a{
6 | color: #000;
7 | }
8 |
9 | .activities .activity img{
10 | max-width: 100%;
11 | border-radius: 8px;
12 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/utility/City/Cities.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import City from './City';
3 | import SlickSlider from '../Slider/Slider';
4 |
5 | function Cities(props){
6 | const cities = props.cities.map((city, i)=>{
7 | return(
8 |
9 |
10 |
11 | )
12 | })
13 | return(
14 |
15 |
{props.header}
16 |
17 |
18 | )
19 | }
20 |
21 | export default Cities;
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/utility/City/City.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './City.css';
3 | import { Link } from 'react-router-dom';
4 |
5 | class City extends Component{
6 |
7 | render(){
8 | // console.log(this.props.city);
9 | const { cityName, image, price, id } = this.props.city;
10 | return(
11 |
12 |
13 |
14 |

15 |
16 |
{cityName}
17 |
${price}/night average
18 |
19 |
20 | )
21 | }
22 | }
23 |
24 | export default City;
25 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/utility/NavBar/NavBar.css:
--------------------------------------------------------------------------------
1 | .nav{
2 | position: absolute;
3 | width: 100%;
4 | top: 0;
5 | left: 0;
6 | }
7 |
8 | .nav nav{
9 | box-shadow: none;
10 | }
11 |
12 | .nav ul li{
13 | color: white;
14 | cursor: pointer;
15 | }
16 |
17 |
18 | .nav .nav-non-link{
19 | padding: 0 15px;
20 | }
21 |
22 | .nav-non-link:hover{
23 | border-bottom: 2px solid white;
24 | background-color: initial;
25 | }
26 |
27 | .nav ul li:hover{
28 | border-bottom: 2px solid white;
29 | background-color: initial;
30 | }
31 |
32 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/utility/Slider/Slider.css:
--------------------------------------------------------------------------------
1 | .slick .slick-prev:before, .slick .slick-next:before{
2 | font-size: 30px;
3 | }
4 |
5 | .slick .slick-arrow{
6 | z-index: 100;
7 | }
8 |
9 | .slick .slick-arrow.slick-prev{
10 | left: 15px;
11 | }
12 |
13 | .slick .slick-arrow.slick-next{
14 | right: 25px;
15 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/utility/Slider/Slider.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import "slick-carousel/slick/slick.css";
3 | import "slick-carousel/slick/slick-theme.css";
4 | import './Slider.css';
5 | import SlickSlider from 'react-slick';
6 |
7 | class Slider extends Component{
8 |
9 | render(){
10 | const settings = {
11 | dots: false,
12 | infinite: true,
13 | speed: 500,
14 | arrows: true,
15 | slidesToShow: 4,
16 | slidesToScroll: 1,
17 | }
18 | return(
19 |
20 |
21 | {this.props.elements}
22 |
23 |
24 | )
25 | }
26 | }
27 |
28 | export default Slider;
29 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/utility/Spinner/Spinner.css:
--------------------------------------------------------------------------------
1 | .spinner-wrapper{
2 | position: absolute;
3 | left: 50%;
4 | transform: translateX(-50%);
5 | top: 40%;
6 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/utility/Spinner/Spinner.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Spinner.css';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { faSpinner } from '@fortawesome/free-solid-svg-icons';
5 | import { library } from '@fortawesome/fontawesome-svg-core'
6 | library.add(faSpinner);
7 |
8 | class Spinner extends Component{
9 |
10 | render(){
11 | return(
12 |
13 |
14 |
15 | )
16 | }
17 | }
18 |
19 | export default Spinner;
20 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/utility/Venue/Venue.css:
--------------------------------------------------------------------------------
1 | .venues{
2 | margin-top:20px;
3 | }
4 |
5 | .venues .venue{
6 | margin-bottom: 30px;
7 | }
8 |
9 | .venues .venue a{
10 | color: #000;
11 | }
12 |
13 | .venues .venue img{
14 | max-width: 100%;
15 | border-radius: 8px;
16 | }
17 |
18 | .venues .venue .location{
19 | color: rgb(113, 113, 113) !important;
20 | }
21 |
22 | .venue .material-icons{
23 | color: #f00;
24 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-modal/utility/Venue/Venues.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Venue from './Venue';
3 | import './Venue.css'
4 |
5 | function Venues(props){
6 | console.log(props)
7 | const venues = props.venues.map((venue, i)=>{
8 | console.log(venue)
9 | return(
10 |
11 |
12 |
13 | )
14 | })
15 | return(
16 |
17 |
{props.header}
18 | {venues}
19 |
20 | )
21 | }
22 |
23 | export default Venues;
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | }
8 |
9 | .App-header {
10 | background-color: #282c34;
11 | min-height: 100vh;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | justify-content: center;
16 | font-size: calc(10px + 2vmin);
17 | color: white;
18 | }
19 |
20 | .App-link {
21 | color: #09d3ac;
22 | }
23 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { BrowserRouter as Router, Route } from 'react-router-dom';
3 | // import './App.css';
4 | import Home from './pages/Home/Home';
5 | import NavBar from './utility/NavBar/NavBar';
6 |
7 | class App extends Component{
8 |
9 | render(){
10 | return(
11 |
12 |
13 |
14 |
15 | )
16 | }
17 |
18 | }
19 |
20 | export default App;
21 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | import { Provider } from 'react-redux';
7 | import { createStore, applyMiddleware } from 'redux';
8 | import rootReducer from './reducers/rootReducer';
9 | import reduxPromise from 'redux-promise';
10 |
11 | const theStore = applyMiddleware(reduxPromise)(createStore)(rootReducer);
12 |
13 | ReactDOM.render(
14 |
15 |
16 | ,
17 | document.getElementById('root')
18 | );
19 |
20 |
21 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/pages/Home/Home.css:
--------------------------------------------------------------------------------
1 | .home{
2 | padding: 0px !important;
3 | }
4 |
5 | .home .upper-fold{
6 | height: 100vh !important;
7 | background-image: url('https://a0.muscache.com/4ea/air/r:w775-h518-sfit,e:fjpg-c80/pictures/0ffd8594-f123-43f0-85bb-7ef88c6f0624.jpg');
8 | background-size: cover;
9 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/reducers/authReducer.js:
--------------------------------------------------------------------------------
1 | export default(state = {}, action)=>{
2 | return state;
3 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import authReducer from './authReducer';
3 |
4 | const rootReducer = combineReducers({
5 | auth: authReducer,
6 | })
7 |
8 | export default rootReducer;
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/utility/Activity/Activity.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-stages/src-make-the-spinner-lecture103/utility/Activity/Activity.css
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/utility/Activity/Activity.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Activity.css';
3 |
4 | class Activity extends Component{
5 |
6 | render(){
7 | return(
8 |
9 |
Activity
10 |
11 | )
12 | }
13 | }
14 |
15 | export default Activity;
16 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/utility/City/Cities.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import City from './City';
3 | import SlickSlider from '../Slider/Slider';
4 |
5 | function Cities(props){
6 | const cities = props.cities.map((city, i)=>{
7 | return(
8 |
9 |
10 |
11 | )
12 | })
13 | return(
14 |
15 | )
16 | }
17 |
18 | export default Cities;
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/utility/City/City.css:
--------------------------------------------------------------------------------
1 | .city{
2 | position: relative;
3 | overflow-wrap: break-word;
4 | font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif !important;
5 | font-size: 18px;
6 | font-weight: 800;
7 | line-height: 1.44444em;
8 | color: rgb(255, 255, 255);
9 | text-align: center;
10 | margin: 0px;
11 | text-transform: capitalize;
12 | }
13 |
14 | .city img{
15 | max-width: 100%;
16 | }
17 |
18 | .city .city-name, .city .price{
19 | position: absolute;
20 | bottom: 25px;
21 | left: 0px;
22 | right: 0px;
23 | padding-bottom: 32px;
24 | padding-left: 24px;
25 | padding-right: 24px;
26 | }
27 |
28 | .city .price{
29 | bottom: 0px;
30 | font-weight: normal;
31 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/utility/City/City.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './City.css';
3 |
4 | class City extends Component{
5 |
6 | render(){
7 | console.log(this.props.city);
8 | const { cityName, image, price } = this.props.city;
9 | return(
10 |
11 |
12 |

13 |
14 |
{cityName}
15 |
${price}/night average
16 |
17 | )
18 | }
19 | }
20 |
21 | export default City;
22 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/utility/NavBar/NavBar.css:
--------------------------------------------------------------------------------
1 | .nav{
2 | position: absolute;
3 | width: 100%;
4 | top: 0;
5 | left: 0;
6 | }
7 |
8 | .nav nav{
9 | box-shadow: none;
10 | }
11 |
12 | .nav ul li{
13 | color: white;
14 | cursor: pointer;
15 | }
16 |
17 |
18 | .nav .nav-non-link{
19 | padding: 0 15px;
20 | }
21 |
22 | .nav-non-link:hover{
23 | border-bottom: 2px solid white;
24 | background-color: initial;
25 | }
26 |
27 | .nav ul li:hover{
28 | border-bottom: 2px solid white;
29 | background-color: initial;
30 | }
31 |
32 |
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/utility/Slider/Slider.css:
--------------------------------------------------------------------------------
1 | .slick .slick-prev:before, .slick .slick-next:before{
2 | font-size: 30px;
3 | }
4 |
5 | .slick .slick-arrow{
6 | z-index: 100;
7 | }
8 |
9 | .slick .slick-arrow.slick-prev{
10 | left: 15px;
11 | }
12 |
13 | .slick .slick-arrow.slick-next{
14 | right: 25px;
15 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/utility/Spinner/Spinner.css:
--------------------------------------------------------------------------------
1 | .spinner-wrapper{
2 | position: absolute;
3 | left: 50%;
4 | transform: translateX(-50%);
5 | top: 40%;
6 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-make-the-spinner-lecture103/utility/Spinner/Spinner.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Spinner.css';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { faSpinner } from '@fortawesome/free-solid-svg-icons';
5 | import { library } from '@fortawesome/fontawesome-svg-core'
6 | library.add(faSpinner);
7 |
8 | class Spinner extends Component{
9 |
10 | render(){
11 | return(
12 |
13 |
14 |
15 | )
16 | }
17 | }
18 |
19 | export default Spinner;
20 |
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | }
8 |
9 | .App-header {
10 | background-color: #282c34;
11 | min-height: 100vh;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | justify-content: center;
16 | font-size: calc(10px + 2vmin);
17 | color: white;
18 | }
19 |
20 | .App-link {
21 | color: #09d3ac;
22 | }
23 |
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { BrowserRouter as Router, Route } from 'react-router-dom';
3 | // import './App.css';
4 | import Home from './pages/Home/Home';
5 | import NavBar from './utility/NavBar/NavBar';
6 |
7 | class App extends Component{
8 |
9 | render(){
10 | return(
11 |
12 |
13 |
14 |
15 | )
16 | }
17 |
18 | }
19 |
20 | export default App;
21 |
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | import { Provider } from 'react-redux';
7 | import { createStore, applyMiddleware } from 'redux';
8 | import rootReducer from './reducers/rootReducer';
9 | import reduxPromise from 'redux-promise';
10 |
11 | const theStore = applyMiddleware(reduxPromise)(createStore)(rootReducer);
12 |
13 | ReactDOM.render(
14 |
15 |
16 | ,
17 | document.getElementById('root')
18 | );
19 |
20 |
21 |
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/pages/Home/Home.css:
--------------------------------------------------------------------------------
1 | .home{
2 | padding: 0px !important;
3 | }
4 |
5 | .home .upper-fold{
6 | height: 100vh !important;
7 | background-image: url('https://a0.muscache.com/4ea/air/r:w775-h518-sfit,e:fjpg-c80/pictures/0ffd8594-f123-43f0-85bb-7ef88c6f0624.jpg');
8 | background-size: cover;
9 | }
10 |
11 | .lower-fold{
12 | padding-left: 80px;
13 | padding-right: 80px;
14 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/reducers/authReducer.js:
--------------------------------------------------------------------------------
1 | export default(state = {}, action)=>{
2 | return state;
3 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import authReducer from './authReducer';
3 |
4 | const rootReducer = combineReducers({
5 | auth: authReducer,
6 | })
7 |
8 | export default rootReducer;
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/utility/Activity/Activity.css:
--------------------------------------------------------------------------------
1 | .activities{
2 | margin-top:20px;
3 | }
4 |
5 | .activities .activity a{
6 | color: #000;
7 | }
8 |
9 | .activities .activity img{
10 | max-width: 100%;
11 | border-radius: 8px;
12 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/utility/City/Cities.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import City from './City';
3 | import SlickSlider from '../Slider/Slider';
4 |
5 | function Cities(props){
6 | const cities = props.cities.map((city, i)=>{
7 | return(
8 |
9 |
10 |
11 | )
12 | })
13 | return(
14 |
15 |
{props.header}
16 |
17 |
18 | )
19 | }
20 |
21 | export default Cities;
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/utility/City/City.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './City.css';
3 | import { Link } from 'react-router-dom';
4 |
5 | class City extends Component{
6 |
7 | render(){
8 | // console.log(this.props.city);
9 | const { cityName, image, price, id } = this.props.city;
10 | return(
11 |
12 |
13 |
14 |

15 |
16 |
{cityName}
17 |
${price}/night average
18 |
19 |
20 | )
21 | }
22 | }
23 |
24 | export default City;
25 |
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/utility/NavBar/NavBar.css:
--------------------------------------------------------------------------------
1 | .nav{
2 | position: absolute;
3 | width: 100%;
4 | top: 0;
5 | left: 0;
6 | }
7 |
8 | .nav nav{
9 | box-shadow: none;
10 | }
11 |
12 | .nav ul li{
13 | color: white;
14 | cursor: pointer;
15 | }
16 |
17 |
18 | .nav .nav-non-link{
19 | padding: 0 15px;
20 | }
21 |
22 | .nav-non-link:hover{
23 | border-bottom: 2px solid white;
24 | background-color: initial;
25 | }
26 |
27 | .nav ul li:hover{
28 | border-bottom: 2px solid white;
29 | background-color: initial;
30 | }
31 |
32 |
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/utility/Slider/Slider.css:
--------------------------------------------------------------------------------
1 | .slick .slick-prev:before, .slick .slick-next:before{
2 | font-size: 30px;
3 | }
4 |
5 | .slick .slick-arrow{
6 | z-index: 100;
7 | }
8 |
9 | .slick .slick-arrow.slick-prev{
10 | left: 15px;
11 | }
12 |
13 | .slick .slick-arrow.slick-next{
14 | right: 25px;
15 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/utility/Spinner/Spinner.css:
--------------------------------------------------------------------------------
1 | .spinner-wrapper{
2 | position: absolute;
3 | left: 50%;
4 | transform: translateX(-50%);
5 | top: 40%;
6 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/utility/Spinner/Spinner.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Spinner.css';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { faSpinner } from '@fortawesome/free-solid-svg-icons';
5 | import { library } from '@fortawesome/fontawesome-svg-core'
6 | library.add(faSpinner);
7 |
8 | class Spinner extends Component{
9 |
10 | render(){
11 | return(
12 |
13 |
14 |
15 | )
16 | }
17 | }
18 |
19 | export default Spinner;
20 |
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/utility/Venue/Venue.css:
--------------------------------------------------------------------------------
1 | .venues{
2 | margin-top:20px;
3 | }
4 |
5 | .venues .venue{
6 | margin-bottom: 30px;
7 | }
8 |
9 | .venues .venue a{
10 | color: #000;
11 | }
12 |
13 | .venues .venue img{
14 | max-width: 100%;
15 | border-radius: 8px;
16 | }
17 |
18 | .venues .venue .location{
19 | color: rgb(113, 113, 113) !important;
20 | }
21 |
22 | .venue .material-icons{
23 | color: #f00;
24 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-post-venue/utility/Venue/Venues.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Venue from './Venue';
3 | import './Venue.css'
4 |
5 | function Venues(props){
6 | console.log(props)
7 | const venues = props.venues.map((venue, i)=>{
8 | console.log(venue)
9 | return(
10 |
11 |
12 |
13 | )
14 | })
15 | return(
16 |
17 |
{props.header}
18 | {venues}
19 |
20 | )
21 | }
22 |
23 | export default Venues;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | }
8 |
9 | .App-header {
10 | background-color: #282c34;
11 | min-height: 100vh;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | justify-content: center;
16 | font-size: calc(10px + 2vmin);
17 | color: white;
18 | }
19 |
20 | .App-link {
21 | color: #09d3ac;
22 | }
23 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { BrowserRouter as Router, Route } from 'react-router-dom';
3 | // import './App.css';
4 | import Home from './pages/Home/Home';
5 | import NavBar from './utility/NavBar/NavBar';
6 |
7 | class App extends Component{
8 |
9 | render(){
10 | return(
11 |
12 |
13 |
14 |
15 | )
16 | }
17 |
18 | }
19 |
20 | export default App;
21 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | import { Provider } from 'react-redux';
7 | import { createStore, applyMiddleware } from 'redux';
8 | import rootReducer from './reducers/rootReducer';
9 | import reduxPromise from 'redux-promise';
10 |
11 | const theStore = applyMiddleware(reduxPromise)(createStore)(rootReducer);
12 |
13 | ReactDOM.render(
14 |
15 |
16 | ,
17 | document.getElementById('root')
18 | );
19 |
20 |
21 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/pages/Home/Home.css:
--------------------------------------------------------------------------------
1 | .home{
2 | padding: 0px !important;
3 | }
4 |
5 | .home .upper-fold{
6 | height: 100vh !important;
7 | background-image: url('https://a0.muscache.com/4ea/air/r:w775-h518-sfit,e:fjpg-c80/pictures/0ffd8594-f123-43f0-85bb-7ef88c6f0624.jpg');
8 | background-size: cover;
9 | }
10 |
11 | .lower-fold{
12 | padding-left: 80px;
13 | padding-right: 80px;
14 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/reducers/authReducer.js:
--------------------------------------------------------------------------------
1 | export default(state = {}, action)=>{
2 | return state;
3 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import authReducer from './authReducer';
3 |
4 | const rootReducer = combineReducers({
5 | auth: authReducer,
6 | })
7 |
8 | export default rootReducer;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/utility/Activity/Activities.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Activity.css';
3 | import Activity from './Activity';
4 |
5 | class Activities extends Component{
6 |
7 | render(){
8 | console.log(this.props.activities);
9 | const activities = this.props.activities.map((activity,i)=>{
10 | return(
11 |
14 | )
15 | })
16 | return(
17 |
18 |
{this.props.header}
19 | {activities}
20 |
21 | )
22 | }
23 | }
24 |
25 | export default Activities;
26 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/utility/Activity/Activity.css:
--------------------------------------------------------------------------------
1 | .activities{
2 | margin-top:20px;
3 | }
4 |
5 | .activities .activity a{
6 | color: #000;
7 | }
8 |
9 | .activities .activity img{
10 | max-width: 100%;
11 | border-radius: 8px;
12 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/utility/City/Cities.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import City from './City';
3 | import SlickSlider from '../Slider/Slider';
4 |
5 | function Cities(props){
6 | const cities = props.cities.map((city, i)=>{
7 | return(
8 |
9 |
10 |
11 | )
12 | })
13 | return(
14 |
15 |
{props.header}
16 |
17 |
18 | )
19 | }
20 |
21 | export default Cities;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/utility/City/City.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './City.css';
3 | import { Link } from 'react-router-dom';
4 |
5 | class City extends Component{
6 |
7 | render(){
8 | // console.log(this.props.city);
9 | const { cityName, image, price, id } = this.props.city;
10 | return(
11 |
12 |
13 |
14 |

15 |
16 |
{cityName}
17 |
${price}/night average
18 |
19 |
20 | )
21 | }
22 | }
23 |
24 | export default City;
25 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/utility/NavBar/NavBar.css:
--------------------------------------------------------------------------------
1 | .nav{
2 | position: absolute;
3 | width: 100%;
4 | top: 0;
5 | left: 0;
6 | }
7 |
8 | .nav nav{
9 | box-shadow: none;
10 | }
11 |
12 | .nav ul li{
13 | color: white;
14 | cursor: pointer;
15 | }
16 |
17 |
18 | .nav .nav-non-link{
19 | padding: 0 15px;
20 | }
21 |
22 | .nav-non-link:hover{
23 | border-bottom: 2px solid white;
24 | background-color: initial;
25 | }
26 |
27 | .nav ul li:hover{
28 | border-bottom: 2px solid white;
29 | background-color: initial;
30 | }
31 |
32 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/utility/Slider/Slider.css:
--------------------------------------------------------------------------------
1 | .slick .slick-prev:before, .slick .slick-next:before{
2 | font-size: 30px;
3 | }
4 |
5 | .slick .slick-arrow{
6 | z-index: 100;
7 | }
8 |
9 | .slick .slick-arrow.slick-prev{
10 | left: 15px;
11 | }
12 |
13 | .slick .slick-arrow.slick-next{
14 | right: 25px;
15 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/utility/Slider/Slider.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import "slick-carousel/slick/slick.css";
3 | import "slick-carousel/slick/slick-theme.css";
4 | import './Slider.css';
5 | import SlickSlider from 'react-slick';
6 |
7 | class Slider extends Component{
8 |
9 | render(){
10 | const settings = {
11 | dots: false,
12 | infinite: true,
13 | speed: 500,
14 | arrows: true,
15 | slidesToShow: 4,
16 | slidesToScroll: 1,
17 | }
18 | return(
19 |
20 |
21 | {this.props.elements}
22 |
23 |
24 | )
25 | }
26 | }
27 |
28 | export default Slider;
29 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/utility/Spinner/Spinner.css:
--------------------------------------------------------------------------------
1 | .spinner-wrapper{
2 | position: absolute;
3 | left: 50%;
4 | transform: translateX(-50%);
5 | top: 40%;
6 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-Venue/utility/Spinner/Spinner.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Spinner.css';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { faSpinner } from '@fortawesome/free-solid-svg-icons';
5 | import { library } from '@fortawesome/fontawesome-svg-core'
6 | library.add(faSpinner);
7 |
8 | class Spinner extends Component{
9 |
10 | render(){
11 | return(
12 |
13 |
14 |
15 | )
16 | }
17 | }
18 |
19 | export default Spinner;
20 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/App.css:
--------------------------------------------------------------------------------
1 | .text-link{
2 | cursor: pointer;
3 | color: blue;
4 | }
5 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/actions/logoutAction.js:
--------------------------------------------------------------------------------
1 | export default()=>{
2 | return{
3 | type: "LOGOUT",
4 | }
5 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/actions/openModal.js:
--------------------------------------------------------------------------------
1 | export default (openClose,content)=>{
2 | return{
3 | type: "OPEN_MODAL",
4 | payload: {
5 | openClose,
6 | content,
7 | }
8 | }
9 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/actions/regAction.js:
--------------------------------------------------------------------------------
1 | export default(regObj)=>{
2 | return{
3 | type: "REGISTER_ACTION",
4 | payload: regObj,
5 | }
6 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/pages/Account/Account.css:
--------------------------------------------------------------------------------
1 | .account{
2 | position: relative;
3 | z-index: 100;
4 | margin-top: 55px;
5 | }
6 |
7 | .account .col.s8.offset-s3{
8 | margin-top: 50px;
9 | }
10 |
11 | .account .sidenav.sidenav-fixed{
12 | top: 64px;
13 | }
14 |
15 | .account .center-align{
16 | justify-content: center;
17 | }
18 |
19 | .account .sidenav span.account-link{
20 | color: rgba(0,0,0,0.87);
21 | display: block;
22 | font-size: 14px;
23 | font-weight: 500;
24 | height: 48px;
25 | line-height: 48px;
26 | padding: 0 32px;
27 | }
28 |
29 | .booking td, .booking th{
30 | vertical-align: top;
31 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/pages/Account/Bookings.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import moment from 'moment';
3 | import swal from 'sweetalert';
4 | import axios from 'axios';
5 |
6 | function Bookings(props){
7 | return(
8 | Bookings
9 | )
10 | }
11 |
12 | export default Bookings
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/pages/Account/ChangePassword.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function ChangePass(props){
4 | return(
5 |
6 |
ChangePass
7 |
8 |
9 | )
10 | }
11 |
12 | export default ChangePass
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/pages/Account/SETUP.md:
--------------------------------------------------------------------------------
1 | SET UP:
2 | Path to /account in App.js
3 | Add a link to the path in the navbar with
4 | Setup a class based component called Account
5 | 1. Put it in it's own folder with Account.css
6 | 2. give it access to redux, specifically state.auth
7 | 3. Include axios, moment, and { Route }
8 | 4. initialize 2 pieces of state:
9 | - pastBookings: []
10 | - upcomingBookings: []
11 | 5. initialize componentDidMount and render sanity check
12 |
13 | Setup these functional components in the Account folder
14 | with a sanity check for each, and import them into Account
15 | - Bookings
16 | - AccountSideBar
17 | - ChangePassword
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/pages/CityVenues/CityVenues.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-stages/src-pre-account/pages/CityVenues/CityVenues.css
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/pages/Home/Home.css:
--------------------------------------------------------------------------------
1 | .home{
2 | padding: 0px !important;
3 | }
4 |
5 | .home .upper-fold{
6 | height: 100vh !important;
7 | background-image: url('https://a0.muscache.com/4ea/air/r:w775-h518-sfit,e:fjpg-c80/pictures/0ffd8594-f123-43f0-85bb-7ef88c6f0624.jpg');
8 | background-size: cover;
9 | }
10 |
11 | .lower-fold{
12 | padding-left: 80px;
13 | padding-right: 80px;
14 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/pages/SingleFullVenue/Point.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Point(props){
4 |
5 | const descObj = props.pointDesc.find((point)=> point.pointTitle === props.point)
6 |
7 | return(
8 |
9 |
{props.point}
10 |
{descObj.text}
11 |
12 | )
13 | }
14 |
15 | export default Point;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/pages/logout/Logout.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-stages/src-pre-account/pages/logout/Logout.css
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/pages/logout/Logout.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './Logout.css';
3 | class Logout extends Component{
4 |
5 | render(){
6 | return(
7 | Logout
8 | )
9 | }
10 |
11 | }
12 |
13 | export default Logout;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/reducers/authReducer.js:
--------------------------------------------------------------------------------
1 | const initState = {};
2 | export default(state = initState, action)=>{
3 | if(action.type==="REGISTER_ACTION"){
4 | return action.payload;
5 | }else if(action.type==="LOGOUT"){
6 | return initState;
7 | }else{
8 | return state;
9 | }
10 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import authReducer from './authReducer';
3 | import siteModal from './siteModal';
4 |
5 | const rootReducer = combineReducers({
6 | auth: authReducer,
7 | siteModal: siteModal,
8 | })
9 |
10 | export default rootReducer;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/reducers/siteModal.js:
--------------------------------------------------------------------------------
1 | const initState = {openClose: "closed",content: ""}
2 |
3 | export default(state = initState, action)=>{
4 | if(action.type === "OPEN_MODAL"){
5 | return action.payload;
6 | }
7 | return state
8 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/utility/Activity/Activity.css:
--------------------------------------------------------------------------------
1 | .activities{
2 | margin-top:20px;
3 | }
4 |
5 | .activities .activity a{
6 | color: #000;
7 | }
8 |
9 | .activities .activity img{
10 | max-width: 100%;
11 | border-radius: 8px;
12 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/utility/City/Cities.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import City from './City';
3 | import SlickSlider from '../Slider/Slider';
4 |
5 | function Cities(props){
6 | const cities = props.cities.map((city, i)=>{
7 | return(
8 |
9 |
10 |
11 | )
12 | })
13 | return(
14 |
15 |
{props.header}
16 |
17 |
18 | )
19 | }
20 |
21 | export default Cities;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/utility/NavBar/NavBar.css:
--------------------------------------------------------------------------------
1 | .nav{
2 | position: absolute;
3 | width: 100%;
4 | top: 0;
5 | left: 0;
6 | }
7 |
8 | .nav nav{
9 | box-shadow: none;
10 | }
11 |
12 | .nav ul li{
13 | color: white;
14 | cursor: pointer;
15 | }
16 |
17 | .nav ul li.login-signup{
18 | margin-right: 15px;
19 | }
20 |
21 | .nav .nav-non-link{
22 | padding: 0 15px;
23 | }
24 |
25 | .nav-non-link:hover{
26 | border-bottom: 2px solid white;
27 | background-color: initial;
28 | }
29 |
30 | .nav ul li:hover{
31 | border-bottom: 2px solid white;
32 | background-color: initial;
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/utility/Slider/Slider.css:
--------------------------------------------------------------------------------
1 | .slick .slick-prev:before, .slick .slick-next:before{
2 | font-size: 30px;
3 | }
4 |
5 | .slick .slick-arrow{
6 | z-index: 100;
7 | }
8 |
9 | .slick .slick-arrow.slick-prev{
10 | left: 15px;
11 | }
12 |
13 | .slick .slick-arrow.slick-next{
14 | right: 25px;
15 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/utility/Spinner/Spinner.css:
--------------------------------------------------------------------------------
1 | .spinner-wrapper{
2 | position: absolute;
3 | left: 50%;
4 | transform: translateX(-50%);
5 | top: 40%;
6 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/utility/Spinner/Spinner.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Spinner.css';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { faSpinner } from '@fortawesome/free-solid-svg-icons';
5 | import { library } from '@fortawesome/fontawesome-svg-core'
6 | library.add(faSpinner);
7 |
8 | class Spinner extends Component{
9 |
10 | render(){
11 | return(
12 |
13 |
14 |
15 | )
16 | }
17 | }
18 |
19 | export default Spinner;
20 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/utility/Venue/Venue.css:
--------------------------------------------------------------------------------
1 | .venues{
2 | margin-top:20px;
3 | }
4 |
5 | .venues .venue{
6 | margin-bottom: 30px;
7 | }
8 |
9 | .venues .venue a{
10 | color: #000;
11 | }
12 |
13 | .venues .venue img{
14 | max-width: 100%;
15 | border-radius: 8px;
16 | }
17 |
18 | .venues .venue .location{
19 | color: rgb(113, 113, 113) !important;
20 | }
21 |
22 | .venue .material-icons{
23 | color: #f00;
24 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/utility/Venue/Venues.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Venue from './Venue';
3 | import './Venue.css'
4 |
5 | function Venues(props){
6 | console.log(props)
7 | const venues = props.venues.map((venue, i)=>{
8 | console.log(venue)
9 | return(
10 |
11 |
12 |
13 | )
14 | })
15 | return(
16 |
17 |
{props.header}
18 | {venues}
19 |
20 | )
21 | }
22 |
23 | export default Venues;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-account/utiltityFunctions/loadScript.js:
--------------------------------------------------------------------------------
1 | export default (scriptUrl)=>{
2 | return new Promise((resolve, reject)=>{
3 | const script = document.createElement('script');
4 | script.type = 'text/javascript';
5 | script.src = scriptUrl;
6 | script.onload = ()=>{
7 | console.log("The script has loaded!")
8 | resolve();
9 | }
10 | document.getElementsByTagName('head')[0].appendChild(script);
11 | console.log("The script has been added to the head!")
12 | })
13 | }
14 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | }
8 |
9 | .App-header {
10 | background-color: #282c34;
11 | min-height: 100vh;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | justify-content: center;
16 | font-size: calc(10px + 2vmin);
17 | color: white;
18 | }
19 |
20 | .App-link {
21 | color: #09d3ac;
22 | }
23 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { BrowserRouter as Router, Route } from 'react-router-dom';
3 | // import './App.css';
4 | import Home from './pages/Home/Home';
5 | import NavBar from './utility/NavBar/NavBar';
6 | import SingleFullVenue from './pages/SingleFullVenue/SingleFullVenue';
7 | import Modal from './utility/Modal/Modal';
8 |
9 | class App extends Component{
10 |
11 | render(){
12 | return(
13 |
14 |
15 |
16 |
17 |
18 |
19 | )
20 | }
21 |
22 | }
23 |
24 | export default App;
25 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/actions/openModal.js:
--------------------------------------------------------------------------------
1 | export default (openClose,content)=>{
2 | return{
3 | type: "OPEN_MODAL",
4 | payload: {
5 | openClose,
6 | content,
7 | }
8 | }
9 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/actions/regAction.js:
--------------------------------------------------------------------------------
1 | export default(regObj)=>{
2 | return{
3 | type: "REGISTER_ACTION",
4 | payload: regObj,
5 | }
6 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | import { Provider } from 'react-redux';
7 | import { createStore, applyMiddleware } from 'redux';
8 | import rootReducer from './reducers/rootReducer';
9 | import reduxPromise from 'redux-promise';
10 |
11 | const theStore = applyMiddleware(reduxPromise)(createStore)(rootReducer);
12 |
13 | ReactDOM.render(
14 |
15 |
16 | ,
17 | document.getElementById('root')
18 | );
19 |
20 |
21 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/pages/Home/Home.css:
--------------------------------------------------------------------------------
1 | .home{
2 | padding: 0px !important;
3 | }
4 |
5 | .home .upper-fold{
6 | height: 100vh !important;
7 | background-image: url('https://a0.muscache.com/4ea/air/r:w775-h518-sfit,e:fjpg-c80/pictures/0ffd8594-f123-43f0-85bb-7ef88c6f0624.jpg');
8 | background-size: cover;
9 | }
10 |
11 | .lower-fold{
12 | padding-left: 80px;
13 | padding-right: 80px;
14 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/pages/SingleFullVenue/Point.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Point(props){
4 |
5 | const descObj = props.pointDesc.find((point)=> point.pointTitle === props.point)
6 |
7 | return(
8 |
9 |
{props.point}
10 |
{descObj.text}
11 |
12 | )
13 | }
14 |
15 | export default Point;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/pages/logout/Logout.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-stages/src-pre-redux-persist/pages/logout/Logout.css
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/pages/logout/Logout.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './Logout.css';
3 | class Logout extends Component{
4 |
5 | render(){
6 | return(
7 | Logout
8 | )
9 | }
10 |
11 | }
12 |
13 | export default Logout;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/reducers/authReducer.js:
--------------------------------------------------------------------------------
1 | export default(state = {}, action)=>{
2 | if(action.type==="REGISTER_ACTION"){
3 | return action.payload;
4 | }else{
5 | return state;
6 | }
7 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import authReducer from './authReducer';
3 | import siteModal from './siteModal';
4 |
5 | const rootReducer = combineReducers({
6 | auth: authReducer,
7 | siteModal: siteModal,
8 | })
9 |
10 | export default rootReducer;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/reducers/siteModal.js:
--------------------------------------------------------------------------------
1 | const initState = {openClose: "closed",content: ""}
2 |
3 | export default(state = initState, action)=>{
4 | if(action.type === "OPEN_MODAL"){
5 | return action.payload;
6 | }
7 | return state
8 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/utility/Activity/Activity.css:
--------------------------------------------------------------------------------
1 | .activities{
2 | margin-top:20px;
3 | }
4 |
5 | .activities .activity a{
6 | color: #000;
7 | }
8 |
9 | .activities .activity img{
10 | max-width: 100%;
11 | border-radius: 8px;
12 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/utility/City/Cities.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import City from './City';
3 | import SlickSlider from '../Slider/Slider';
4 |
5 | function Cities(props){
6 | const cities = props.cities.map((city, i)=>{
7 | return(
8 |
9 |
10 |
11 | )
12 | })
13 | return(
14 |
15 |
{props.header}
16 |
17 |
18 | )
19 | }
20 |
21 | export default Cities;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/utility/NavBar/NavBar.css:
--------------------------------------------------------------------------------
1 | .nav{
2 | position: absolute;
3 | width: 100%;
4 | top: 0;
5 | left: 0;
6 | }
7 |
8 | .nav nav{
9 | box-shadow: none;
10 | }
11 |
12 | .nav ul li{
13 | color: white;
14 | cursor: pointer;
15 | }
16 |
17 | .nav ul li.login-signup{
18 | margin-right: 15px;
19 | }
20 |
21 | .nav .nav-non-link{
22 | padding: 0 15px;
23 | }
24 |
25 | .nav-non-link:hover{
26 | border-bottom: 2px solid white;
27 | background-color: initial;
28 | }
29 |
30 | .nav ul li:hover{
31 | border-bottom: 2px solid white;
32 | background-color: initial;
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/utility/Slider/Slider.css:
--------------------------------------------------------------------------------
1 | .slick .slick-prev:before, .slick .slick-next:before{
2 | font-size: 30px;
3 | }
4 |
5 | .slick .slick-arrow{
6 | z-index: 100;
7 | }
8 |
9 | .slick .slick-arrow.slick-prev{
10 | left: 15px;
11 | }
12 |
13 | .slick .slick-arrow.slick-next{
14 | right: 25px;
15 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/utility/Spinner/Spinner.css:
--------------------------------------------------------------------------------
1 | .spinner-wrapper{
2 | position: absolute;
3 | left: 50%;
4 | transform: translateX(-50%);
5 | top: 40%;
6 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/utility/Spinner/Spinner.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Spinner.css';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { faSpinner } from '@fortawesome/free-solid-svg-icons';
5 | import { library } from '@fortawesome/fontawesome-svg-core'
6 | library.add(faSpinner);
7 |
8 | class Spinner extends Component{
9 |
10 | render(){
11 | return(
12 |
13 |
14 |
15 | )
16 | }
17 | }
18 |
19 | export default Spinner;
20 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/utility/Venue/Venue.css:
--------------------------------------------------------------------------------
1 | .venues{
2 | margin-top:20px;
3 | }
4 |
5 | .venues .venue{
6 | margin-bottom: 30px;
7 | }
8 |
9 | .venues .venue a{
10 | color: #000;
11 | }
12 |
13 | .venues .venue img{
14 | max-width: 100%;
15 | border-radius: 8px;
16 | }
17 |
18 | .venues .venue .location{
19 | color: rgb(113, 113, 113) !important;
20 | }
21 |
22 | .venue .material-icons{
23 | color: #f00;
24 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-redux-persist/utility/Venue/Venues.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Venue from './Venue';
3 | import './Venue.css'
4 |
5 | function Venues(props){
6 | console.log(props)
7 | const venues = props.venues.map((venue, i)=>{
8 | console.log(venue)
9 | return(
10 |
11 |
12 |
13 | )
14 | })
15 | return(
16 |
17 |
{props.header}
18 | {venues}
19 |
20 | )
21 | }
22 |
23 | export default Venues;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/App.css:
--------------------------------------------------------------------------------
1 | .text-link{
2 | cursor: pointer;
3 | color: blue;
4 | }
5 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/actions/openModal.js:
--------------------------------------------------------------------------------
1 | export default (openClose,content)=>{
2 | return{
3 | type: "OPEN_MODAL",
4 | payload: {
5 | openClose,
6 | content,
7 | }
8 | }
9 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/actions/regAction.js:
--------------------------------------------------------------------------------
1 | export default(regObj)=>{
2 | return{
3 | type: "REGISTER_ACTION",
4 | payload: regObj,
5 | }
6 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/pages/CityVenues/CityVenues.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-stages/src-pre-stripe/pages/CityVenues/CityVenues.css
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/pages/Home/Home.css:
--------------------------------------------------------------------------------
1 | .home{
2 | padding: 0px !important;
3 | }
4 |
5 | .home .upper-fold{
6 | height: 100vh !important;
7 | background-image: url('https://a0.muscache.com/4ea/air/r:w775-h518-sfit,e:fjpg-c80/pictures/0ffd8594-f123-43f0-85bb-7ef88c6f0624.jpg');
8 | background-size: cover;
9 | }
10 |
11 | .lower-fold{
12 | padding-left: 80px;
13 | padding-right: 80px;
14 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/pages/SingleFullVenue/Point.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Point(props){
4 |
5 | const descObj = props.pointDesc.find((point)=> point.pointTitle === props.point)
6 |
7 | return(
8 |
9 |
{props.point}
10 |
{descObj.text}
11 |
12 | )
13 | }
14 |
15 | export default Point;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/pages/logout/Logout.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/airbnb-stages/src-pre-stripe/pages/logout/Logout.css
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/pages/logout/Logout.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './Logout.css';
3 | class Logout extends Component{
4 |
5 | render(){
6 | return(
7 | Logout
8 | )
9 | }
10 |
11 | }
12 |
13 | export default Logout;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/reducers/authReducer.js:
--------------------------------------------------------------------------------
1 | export default(state = {}, action)=>{
2 | if(action.type==="REGISTER_ACTION"){
3 | return action.payload;
4 | }else{
5 | return state;
6 | }
7 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import authReducer from './authReducer';
3 | import siteModal from './siteModal';
4 |
5 | const rootReducer = combineReducers({
6 | auth: authReducer,
7 | siteModal: siteModal,
8 | })
9 |
10 | export default rootReducer;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/reducers/siteModal.js:
--------------------------------------------------------------------------------
1 | const initState = {openClose: "closed",content: ""}
2 |
3 | export default(state = initState, action)=>{
4 | if(action.type === "OPEN_MODAL"){
5 | return action.payload;
6 | }
7 | return state
8 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/utility/Activity/Activity.css:
--------------------------------------------------------------------------------
1 | .activities{
2 | margin-top:20px;
3 | }
4 |
5 | .activities .activity a{
6 | color: #000;
7 | }
8 |
9 | .activities .activity img{
10 | max-width: 100%;
11 | border-radius: 8px;
12 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/utility/City/Cities.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import City from './City';
3 | import SlickSlider from '../Slider/Slider';
4 |
5 | function Cities(props){
6 | const cities = props.cities.map((city, i)=>{
7 | return(
8 |
9 |
10 |
11 | )
12 | })
13 | return(
14 |
15 |
{props.header}
16 |
17 |
18 | )
19 | }
20 |
21 | export default Cities;
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/utility/NavBar/NavBar.css:
--------------------------------------------------------------------------------
1 | .nav{
2 | position: absolute;
3 | width: 100%;
4 | top: 0;
5 | left: 0;
6 | }
7 |
8 | .nav nav{
9 | box-shadow: none;
10 | }
11 |
12 | .nav ul li{
13 | color: white;
14 | cursor: pointer;
15 | }
16 |
17 | .nav ul li.login-signup{
18 | margin-right: 15px;
19 | }
20 |
21 | .nav .nav-non-link{
22 | padding: 0 15px;
23 | }
24 |
25 | .nav-non-link:hover{
26 | border-bottom: 2px solid white;
27 | background-color: initial;
28 | }
29 |
30 | .nav ul li:hover{
31 | border-bottom: 2px solid white;
32 | background-color: initial;
33 | }
34 |
35 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/utility/Slider/Slider.css:
--------------------------------------------------------------------------------
1 | .slick .slick-prev:before, .slick .slick-next:before{
2 | font-size: 30px;
3 | }
4 |
5 | .slick .slick-arrow{
6 | z-index: 100;
7 | }
8 |
9 | .slick .slick-arrow.slick-prev{
10 | left: 15px;
11 | }
12 |
13 | .slick .slick-arrow.slick-next{
14 | right: 25px;
15 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/utility/Spinner/Spinner.css:
--------------------------------------------------------------------------------
1 | .spinner-wrapper{
2 | position: absolute;
3 | left: 50%;
4 | transform: translateX(-50%);
5 | top: 40%;
6 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/utility/Spinner/Spinner.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Spinner.css';
3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4 | import { faSpinner } from '@fortawesome/free-solid-svg-icons';
5 | import { library } from '@fortawesome/fontawesome-svg-core'
6 | library.add(faSpinner);
7 |
8 | class Spinner extends Component{
9 |
10 | render(){
11 | return(
12 |
13 |
14 |
15 | )
16 | }
17 | }
18 |
19 | export default Spinner;
20 |
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/utility/Venue/Venue.css:
--------------------------------------------------------------------------------
1 | .venues{
2 | margin-top:20px;
3 | }
4 |
5 | .venues .venue{
6 | margin-bottom: 30px;
7 | }
8 |
9 | .venues .venue a{
10 | color: #000;
11 | }
12 |
13 | .venues .venue img{
14 | max-width: 100%;
15 | border-radius: 8px;
16 | }
17 |
18 | .venues .venue .location{
19 | color: rgb(113, 113, 113) !important;
20 | }
21 |
22 | .venue .material-icons{
23 | color: #f00;
24 | }
--------------------------------------------------------------------------------
/airbnb-stages/src-pre-stripe/utility/Venue/Venues.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Venue from './Venue';
3 | import './Venue.css'
4 |
5 | function Venues(props){
6 | console.log(props)
7 | const venues = props.venues.map((venue, i)=>{
8 | console.log(venue)
9 | return(
10 |
11 |
12 |
13 | )
14 | })
15 | return(
16 |
17 |
{props.header}
18 | {venues}
19 |
20 | )
21 | }
22 |
23 | export default Venues;
--------------------------------------------------------------------------------
/assets/section2/lightswitch.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
--------------------------------------------------------------------------------
/aws_flash_cards/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/aws_flash_cards/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/aws_flash_cards/public/favicon.ico
--------------------------------------------------------------------------------
/aws_flash_cards/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/aws_flash_cards/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/aws_flash_cards/src/components/QuizType.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 | import { faDumbbell, faFont, faFileAlt, faDice } from '@fortawesome/free-solid-svg-icons';
4 | import { library } from '@fortawesome/fontawesome-svg-core'
5 | library.add(faDumbbell);
6 | library.add(faFont);
7 | library.add(faFileAlt);
8 | library.add(faDice);
9 |
10 | function QuizType(props){
11 | return(
12 |
13 | {props.userChoice(props.quizType)}}>
14 |
15 | {props.quizType}
16 |
17 |
18 | )
19 | }
20 |
21 | export default QuizType;
--------------------------------------------------------------------------------
/aws_flash_cards/src/components/RandomWeighted.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function RandomWeighted(props){
4 |
5 | const question = props.questionData;
6 | return(
7 | <>
8 |
9 |
{question.service}
10 |
{question.common}
11 |
12 |
15 | >
16 | )
17 | }
18 |
19 | export default RandomWeighted;
--------------------------------------------------------------------------------
/aws_flash_cards/src/components/RegularCard.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function RegularCard(props){
4 | console.log(props.questionData);
5 | const question = props.questionData;
6 | return(
7 | <>
8 |
9 | {question.service}
10 |
11 |
12 |
{question.desc}
13 |
{question.cat}
14 |
15 |
16 | >
17 | )
18 | }
19 |
20 | export default RegularCard;
--------------------------------------------------------------------------------
/aws_flash_cards/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/aws_flash_cards/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | ReactDOM.render(, document.getElementById('root'));
7 |
--------------------------------------------------------------------------------
/context-101/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/context-101/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/context-101/public/favicon.ico
--------------------------------------------------------------------------------
/context-101/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/context-101/public/logo192.png
--------------------------------------------------------------------------------
/context-101/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/context-101/public/logo512.png
--------------------------------------------------------------------------------
/context-101/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/context-101/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/context-101/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/context-101/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useContext } from 'react';
2 | import ThemeContext from './contexts/themeContext';
3 | import MainContainer from './MainContainer'
4 |
5 | function App() {
6 |
7 | const [ theme, setTheme ] = useState("Blue")
8 | console.log(ThemeContext)
9 |
10 | return (
11 |
12 | App component
13 |
16 |
17 |
18 | );
19 | }
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/context-101/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
6 | const { getByText } = render();
7 | const linkElement = getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
10 |
--------------------------------------------------------------------------------
/context-101/src/InnerContainer.js:
--------------------------------------------------------------------------------
1 | import React, {useContext, useCallback} from 'react';
2 | import ThemedButton from './ThemedButton';
3 | import ThemeContext from './contexts/themeContext';
4 |
5 | function InnerContainer(props){
6 |
7 | // const setTheme = useContext(ThemeContext).setTheme;
8 | // const theme = useContext(ThemeContext).theme;
9 | const { theme, setTheme} = useContext(ThemeContext);
10 |
11 | return(
12 |
13 |
16 |
17 |
18 | )
19 | }
20 |
21 | export default InnerContainer;
22 |
--------------------------------------------------------------------------------
/context-101/src/MainContainer.js:
--------------------------------------------------------------------------------
1 | import React, {useContext} from 'react';
2 | import InnerContainer from './InnerContainer';
3 | import ThemeContext from './contexts/themeContext'
4 |
5 | class MainContainer extends React.Component{
6 |
7 | static contextType = ThemeContext;
8 |
9 | render(){
10 | return (
11 |
12 | {this.context.theme} is the current theme. I can see it from Main Container.
13 |
14 |
15 | )
16 | }
17 |
18 | }
19 |
20 | // MainContainer.contextType = ThemeContext;
21 |
22 | export default MainContainer;
23 |
--------------------------------------------------------------------------------
/context-101/src/ThemedButton.js:
--------------------------------------------------------------------------------
1 | import React, {useContext} from 'react';
2 | import ThemeContext from './contexts/themeContext'
3 |
4 | function ThemedButton(props){
5 | // const theme = useContext(ThemeContext);
6 | // return {theme}
7 |
8 | return(
9 |
10 | {(themeContext)=>{themeContext.theme}
}
11 |
12 | )
13 |
14 | }
15 |
16 | export default ThemedButton;
17 |
--------------------------------------------------------------------------------
/context-101/src/contexts/themeContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | const ThemeContext = createContext('This is the default value!!!!');
4 |
5 | export default ThemeContext;
6 |
--------------------------------------------------------------------------------
/context-101/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/context-101/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | ReactDOM.render(
6 | ,document.getElementById('root')
7 | );
8 |
9 |
10 |
--------------------------------------------------------------------------------
/context-101/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------
/hooks101/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/hooks101/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/hooks101/public/favicon.ico
--------------------------------------------------------------------------------
/hooks101/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/hooks101/public/logo192.png
--------------------------------------------------------------------------------
/hooks101/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/hooks101/public/logo512.png
--------------------------------------------------------------------------------
/hooks101/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/hooks101/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/hooks101/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/hooks101/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
6 | const { getByText } = render();
7 | const linkElement = getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
10 |
--------------------------------------------------------------------------------
/hooks101/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/hooks101/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | // import WeatherApp from './WeatherApp';
5 | import WeatherAppHooks from './WeatherAppHooks';
6 |
7 | // ReactDOM.render(, document.getElementById('root'));
8 | // ReactDOM.render(, document.getElementById('root'));
9 | ReactDOM.render(, document.getElementById('root'));
10 |
--------------------------------------------------------------------------------
/hooks101/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------
/hooks101/weatherSrcBeforeHooks/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | pointer-events: none;
8 | }
9 |
10 | @media (prefers-reduced-motion: no-preference) {
11 | .App-logo {
12 | animation: App-logo-spin infinite 20s linear;
13 | }
14 | }
15 |
16 | .App-header {
17 | background-color: #282c34;
18 | min-height: 100vh;
19 | display: flex;
20 | flex-direction: column;
21 | align-items: center;
22 | justify-content: center;
23 | font-size: calc(10px + 2vmin);
24 | color: white;
25 | }
26 |
27 | .App-link {
28 | color: #61dafb;
29 | }
30 |
31 | @keyframes App-logo-spin {
32 | from {
33 | transform: rotate(0deg);
34 | }
35 | to {
36 | transform: rotate(360deg);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/hooks101/weatherSrcBeforeHooks/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
6 | const { getByText } = render();
7 | const linkElement = getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
10 |
--------------------------------------------------------------------------------
/hooks101/weatherSrcBeforeHooks/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/hooks101/weatherSrcBeforeHooks/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import WeatherApp from './WeatherApp';
5 |
6 | // ReactDOM.render(, document.getElementById('root'));
7 | ReactDOM.render(, document.getElementById('root'));
8 |
--------------------------------------------------------------------------------
/hooks101/weatherSrcBeforeHooks/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 |
--------------------------------------------------------------------------------
/movie-router/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | config.js
4 |
5 | # dependencies
6 | /node_modules
7 | /.pnp
8 | .pnp.js
9 |
10 | # testing
11 | /coverage
12 |
13 | # production
14 | /build
15 |
16 | # misc
17 | .DS_Store
18 | .env.local
19 | .env.development.local
20 | .env.test.local
21 | .env.production.local
22 |
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 |
--------------------------------------------------------------------------------
/movie-router/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/movie-router/public/favicon.ico
--------------------------------------------------------------------------------
/movie-router/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/movie-router/src/About.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function About(props){
4 | console.log(props);
5 | return(
6 | About page!
7 | )
8 | }
9 |
10 | export default About;
--------------------------------------------------------------------------------
/movie-router/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 40vmin;
8 | pointer-events: none;
9 | }
10 |
11 | .App-header {
12 | background-color: #282c34;
13 | min-height: 100vh;
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | justify-content: center;
18 | font-size: calc(10px + 2vmin);
19 | color: white;
20 | }
21 |
22 | .App-link {
23 | color: #61dafb;
24 | }
25 |
26 | @keyframes App-logo-spin {
27 | from {
28 | transform: rotate(0deg);
29 | }
30 | to {
31 | transform: rotate(360deg);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/movie-router/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './App.css';
3 | import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
4 | import Home from './Home';
5 | import Movie from './Movie';
6 |
7 | function App() {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 |
18 | export default App;
19 |
--------------------------------------------------------------------------------
/movie-router/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/movie-router/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/movie-router/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |
7 | ReactDOM.render(, document.getElementById('root'));
8 |
9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
11 | // Learn more about service workers: https://bit.ly/CRA-PWA
12 | serviceWorker.unregister();
13 |
--------------------------------------------------------------------------------
/redux-middleware-final/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/redux-middleware-final/README.md:
--------------------------------------------------------------------------------
1 | This project is a starter for demonstrating how Redux Middleware works. It is initialized with redux, redux-react, and axios. Redux has a weather reducer that expects a weather object. fetchWeather is an action creator that will need to make an async request and return the action to the reducer. Trouble!!! ...without redux middleware :)
2 |
3 |
--------------------------------------------------------------------------------
/redux-middleware-final/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/redux-middleware-final/public/favicon.ico
--------------------------------------------------------------------------------
/redux-middleware-final/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/redux-middleware-final/public/logo192.png
--------------------------------------------------------------------------------
/redux-middleware-final/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/redux-middleware-final/public/logo512.png
--------------------------------------------------------------------------------
/redux-middleware-final/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/redux-middleware-final/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 |
--------------------------------------------------------------------------------
/redux-middleware-final/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | }
8 |
9 | .App-header {
10 | background-color: #282c34;
11 | min-height: 100vh;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | justify-content: center;
16 | font-size: calc(10px + 2vmin);
17 | color: white;
18 | }
19 |
20 | .App-link {
21 | color: #09d3ac;
22 | }
23 |
--------------------------------------------------------------------------------
/redux-middleware-final/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Weather from './Weather';
3 | import WarmOrNot from './WarmOrNot';
4 | import './App.css';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
15 | export default App;
16 |
--------------------------------------------------------------------------------
/redux-middleware-final/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/redux-middleware-final/src/actions/testThunk.js:
--------------------------------------------------------------------------------
1 | export default()=>{
2 | return (dispatch, getState)=>{
3 | setTimeout(()=>{
4 | console.log("I waited for 2 seconds")
5 | dispatch({
6 | type: "testThunk"
7 | })
8 | },2000)
9 | }
10 | }
--------------------------------------------------------------------------------
/redux-middleware-final/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/redux-middleware-final/src/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import weatherReducer from './weatherReducer';
3 |
4 | const rootReducer = combineReducers({
5 | weather: weatherReducer
6 | })
7 |
8 | export default rootReducer;
9 |
--------------------------------------------------------------------------------
/redux-middleware-final/src/reducers/weatherReducer.js:
--------------------------------------------------------------------------------
1 | export default (state = {},action)=>{
2 | console.log(action.type);
3 | if(action.type === "cityUpdate"){
4 | console.log(action.payload)
5 | return action.payload
6 | }else{
7 | return state;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/redux-middleware-starter/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/redux-middleware-starter/README.md:
--------------------------------------------------------------------------------
1 | This project is a starter for demonstrating how Redux Middleware works. It is initialized with redux, redux-react, and axios. Redux has a weather reducer that expects a weather object. fetchWeather is an action creator that will need to make an async request and return the action to the reducer. Trouble!!! ...without redux middleware :)
2 |
3 |
--------------------------------------------------------------------------------
/redux-middleware-starter/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/redux-middleware-starter/public/favicon.ico
--------------------------------------------------------------------------------
/redux-middleware-starter/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/redux-middleware-starter/public/logo192.png
--------------------------------------------------------------------------------
/redux-middleware-starter/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/redux-middleware-starter/public/logo512.png
--------------------------------------------------------------------------------
/redux-middleware-starter/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/redux-middleware-starter/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 |
--------------------------------------------------------------------------------
/redux-middleware-starter/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | height: 40vmin;
7 | }
8 |
9 | .App-header {
10 | background-color: #282c34;
11 | min-height: 100vh;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | justify-content: center;
16 | font-size: calc(10px + 2vmin);
17 | color: white;
18 | }
19 |
20 | .App-link {
21 | color: #09d3ac;
22 | }
23 |
--------------------------------------------------------------------------------
/redux-middleware-starter/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Weather from './Weather';
3 | import WarmOrNot from './WarmOrNot';
4 | import './App.css';
5 |
6 | function App() {
7 | return (
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
15 | export default App;
16 |
--------------------------------------------------------------------------------
/redux-middleware-starter/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/redux-middleware-starter/src/actions/fetchWeather.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | const weatherApi = 'http://api.openweathermap.org/data/2.5/weather';
3 | const weatherAPIKey = '6f3f23c0f1a2fcb7edee25d08cb9cf62';
4 | const scale = "imperial" //metric
5 |
6 | export default(city)=>{
7 | const weatherUrl = `${weatherApi}?q=${city}&units=${scale}&appid=${weatherAPIKey}`;
8 | console.log(city)
9 | return {
10 | type: "cityUpdate",
11 | payload: {}
12 | }
13 | }
--------------------------------------------------------------------------------
/redux-middleware-starter/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/redux-middleware-starter/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | import { Provider } from 'react-redux';
7 | import { createStore } from 'redux';
8 | import rootReducer from './reducers/rootReducer';
9 |
10 | const theStore = createStore(rootReducer);
11 |
12 | ReactDOM.render(
13 |
14 |
15 | ,
16 | document.getElementById('root')
17 | );
18 |
19 |
--------------------------------------------------------------------------------
/redux-middleware-starter/src/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import weatherReducer from './weatherReducer';
3 |
4 | const rootReducer = combineReducers({
5 | weather: weatherReducer
6 | })
7 |
8 | export default rootReducer;
9 |
--------------------------------------------------------------------------------
/redux-middleware-starter/src/reducers/weatherReducer.js:
--------------------------------------------------------------------------------
1 | export default (state = {},action)=>{
2 | if(action.type === "cityUpdate"){
3 | console.log(action.payload)
4 | return action.payload
5 | }else{
6 | return state;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/redux101-end-of-lecture79/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/redux101-end-of-lecture79/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/redux101-end-of-lecture79/public/favicon.ico
--------------------------------------------------------------------------------
/redux101-end-of-lecture79/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/redux101-end-of-lecture79/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 40vmin;
8 | pointer-events: none;
9 | }
10 |
11 | .App-header {
12 | background-color: #282c34;
13 | min-height: 100vh;
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | justify-content: center;
18 | font-size: calc(10px + 2vmin);
19 | color: white;
20 | }
21 |
22 | .App-link {
23 | color: #61dafb;
24 | }
25 |
26 | @keyframes App-logo-spin {
27 | from {
28 | transform: rotate(0deg);
29 | }
30 | to {
31 | transform: rotate(360deg);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/redux101-end-of-lecture79/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './App.css';
3 | import FrozenDept from './components/FrozenDept';
4 |
5 | function App() {
6 | return (
7 |
8 |
9 |
10 | );
11 | }
12 |
13 | export default App;
14 |
--------------------------------------------------------------------------------
/redux101-end-of-lecture79/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/redux101-end-of-lecture79/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/redux101-end-of-lecture79/src/reducers/frozen.js:
--------------------------------------------------------------------------------
1 | // All reducers have 2 params:
2 | // 1. Current State, usually provide a default state
3 | // 2. Info that came from any action
4 |
5 | const seedData = [
6 | "TV dinners",
7 | "Frozen Veggies",
8 | "Frozen Pizzas"
9 | ]
10 |
11 | export default (state = seedData, action)=>{
12 | return state;
13 | }
14 |
15 |
16 | // function frozen(state = [],action){
17 | // return state;
18 | // }
19 | // export default frozen;
--------------------------------------------------------------------------------
/redux101-end-of-lecture79/src/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | // this is the root reducer! It is the store manager for all the reducers
2 | // to make a rootreducer:
3 | // 1. Get a method from redux, called combineReducers
4 | import { combineReducers } from 'redux';
5 | // 2. get each individual reducer
6 | import frozenReducer from './frozen';
7 | // 3. call combinereducers and hand it an object
8 | // each key in combineReducers will be a piece of state in the redux store
9 | // each value, will be the value of that piece of state in the redux store
10 | const rootreducer = combineReducers({
11 | frozen: frozenReducer
12 | })
13 |
14 | export default rootreducer;
--------------------------------------------------------------------------------
/redux101-end-of-lecture82/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/redux101-end-of-lecture82/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/redux101-end-of-lecture82/public/favicon.ico
--------------------------------------------------------------------------------
/redux101-end-of-lecture82/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/redux101-end-of-lecture82/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 40vmin;
8 | pointer-events: none;
9 | }
10 |
11 | .App-header {
12 | background-color: #282c34;
13 | min-height: 100vh;
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | justify-content: center;
18 | font-size: calc(10px + 2vmin);
19 | color: white;
20 | }
21 |
22 | .App-link {
23 | color: #61dafb;
24 | }
25 |
26 | @keyframes App-logo-spin {
27 | from {
28 | transform: rotate(0deg);
29 | }
30 | to {
31 | transform: rotate(360deg);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/redux101-end-of-lecture82/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './App.css';
3 | import FrozenDept from './components/FrozenDept';
4 | import MeatDept from './components/MeatDept';
5 | import ProduceDept from './components/ProduceDept';
6 |
7 | function App() {
8 | return (
9 |
14 | );
15 | }
16 |
17 | export default App;
18 |
--------------------------------------------------------------------------------
/redux101-end-of-lecture82/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/redux101-end-of-lecture82/src/actions/frozenInvUpdate.js:
--------------------------------------------------------------------------------
1 | // this file is an action creator!
2 | // action creators return actions
3 | // action is an object that has at LEAST a property of type
4 | // this action creator is going to be handed to the dispatch
5 |
6 | export default (operation, index)=>{
7 | console.log(operation, index);
8 | return {
9 | type: 'updateFrozen',
10 | payload: {
11 | operation,
12 | index
13 | }
14 | }
15 | }
--------------------------------------------------------------------------------
/redux101-end-of-lecture82/src/actions/meatInvUpdate.js:
--------------------------------------------------------------------------------
1 | export default (qChanage, index)=>{
2 | return {
3 | type: 'updateMeat',
4 | payload: {
5 | qChanage,
6 | index
7 | }
8 | }
9 | }
--------------------------------------------------------------------------------
/redux101-end-of-lecture82/src/actions/produceInvUpdate.js:
--------------------------------------------------------------------------------
1 | export default (qChange,index)=>{
2 | console.log("Updating produce inventory!!!")
3 | return {
4 | type: 'updateProduce',
5 | payload: {
6 | qChange,
7 | index
8 | }
9 | }
10 | }
--------------------------------------------------------------------------------
/redux101-end-of-lecture82/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/redux101-end-of-lecture82/src/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | // this is the root reducer! It is the store manager for all the reducers
2 | // to make a rootreducer:
3 | // 1. Get a method from redux, called combineReducers
4 | import { combineReducers } from 'redux';
5 | // 2. get each individual reducer
6 | import frozenReducer from './frozenReducer';
7 | import produceReducer from './produceReducer';
8 | import meatReducer from './meatReducer';
9 |
10 | // 3. call combinereducers and hand it an object
11 | // each key in combineReducers will be a piece of state in the redux store
12 | // each value, will be the value of that piece of state in the redux store
13 | const rootreducer = combineReducers({
14 | frozen: frozenReducer,
15 | produce: produceReducer,
16 | meat: meatReducer
17 | })
18 |
19 | export default rootreducer;
--------------------------------------------------------------------------------
/redux101/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/redux101/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/redux101/public/favicon.ico
--------------------------------------------------------------------------------
/redux101/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/redux101/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 |
--------------------------------------------------------------------------------
/redux101/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/redux101/src/actions/clearInventory.js:
--------------------------------------------------------------------------------
1 | export default ()=>{
2 | console.log("Clear Inventory")
3 | return {
4 | type: 'clearInventory',
5 | }
6 | }
--------------------------------------------------------------------------------
/redux101/src/actions/frozenInvUpdate.js:
--------------------------------------------------------------------------------
1 | // this file is an action creator!
2 | // action creators return actions
3 | // action is an object that has at LEAST a property of type
4 | // this action creator is going to be handed to the dispatch
5 |
6 | export default (operation, index)=>{
7 | console.log(operation, index);
8 | return {
9 | type: 'updateFrozen',
10 | payload: {
11 | operation,
12 | index
13 | }
14 | }
15 | }
--------------------------------------------------------------------------------
/redux101/src/actions/meatInvUpdate.js:
--------------------------------------------------------------------------------
1 | export default (qChanage, index)=>{
2 | return {
3 | type: 'updateMeat',
4 | payload: {
5 | qChanage,
6 | index
7 | }
8 | }
9 | }
--------------------------------------------------------------------------------
/redux101/src/actions/produceInvUpdate.js:
--------------------------------------------------------------------------------
1 | export default (qChange,index)=>{
2 | console.log("Updating produce inventory!!!")
3 | return {
4 | type: 'updateProduce',
5 | payload: {
6 | qChange,
7 | index
8 | }
9 | }
10 | }
--------------------------------------------------------------------------------
/redux101/src/components/NavBar.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react'
2 | import { Link } from 'react-router-dom';
3 |
4 | class NavBar extends Component{
5 |
6 | render(){
7 | return(
8 |
9 |
10 | - Entire Store
11 | - Produce Department
12 | - Meat Department
13 | - Frozen Department
14 |
15 |
16 | )
17 | }
18 | }
19 |
20 | export default NavBar;
--------------------------------------------------------------------------------
/redux101/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/redux101/src/reducers/rootReducer.js:
--------------------------------------------------------------------------------
1 | // this is the root reducer! It is the store manager for all the reducers
2 | // to make a rootreducer:
3 | // 1. Get a method from redux, called combineReducers
4 | import { combineReducers } from 'redux';
5 | // 2. get each individual reducer
6 | import frozenReducer from './frozenReducer';
7 | import produceReducer from './produceReducer';
8 | import meatReducer from './meatReducer';
9 |
10 | // 3. call combinereducers and hand it an object
11 | // each key in combineReducers will be a piece of state in the redux store
12 | // each value, will be the value of that piece of state in the redux store
13 | const rootreducer = combineReducers({
14 | frozen: frozenReducer,
15 | produce: produceReducer,
16 | meat: meatReducer
17 | })
18 |
19 | export default rootreducer;
--------------------------------------------------------------------------------
/router-101/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/router-101/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "router-101",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "^16.8.6",
7 | "react-dom": "^16.8.6",
8 | "react-router-dom": "^5.0.1",
9 | "react-scripts": "3.0.1"
10 | },
11 | "scripts": {
12 | "start": "react-scripts start",
13 | "build": "react-scripts build",
14 | "test": "react-scripts test",
15 | "eject": "react-scripts eject"
16 | },
17 | "eslintConfig": {
18 | "extends": "react-app"
19 | },
20 | "browserslist": {
21 | "production": [
22 | ">0.2%",
23 | "not dead",
24 | "not op_mini all"
25 | ],
26 | "development": [
27 | "last 1 chrome version",
28 | "last 1 firefox version",
29 | "last 1 safari version"
30 | ]
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/router-101/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/router-101/public/favicon.ico
--------------------------------------------------------------------------------
/router-101/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/router-101/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 40vmin;
8 | pointer-events: none;
9 | }
10 |
11 | .App-header {
12 | background-color: #282c34;
13 | min-height: 100vh;
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | justify-content: center;
18 | font-size: calc(10px + 2vmin);
19 | color: white;
20 | }
21 |
22 | .App-link {
23 | color: #61dafb;
24 | }
25 |
26 | @keyframes App-logo-spin {
27 | from {
28 | transform: rotate(0deg);
29 | }
30 | to {
31 | transform: rotate(360deg);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/router-101/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/router-101/src/Help.js:
--------------------------------------------------------------------------------
1 | // const Help = ()=>Help
2 | import React from 'react';
3 | import { Route, Link } from 'react-router-dom';
4 |
5 | const HelpCustomer = ()=>Help Customer
6 | const HelpHost = ()=>Help Host
7 |
8 | function Help(props){
9 | console.log(props.match);
10 | return(
11 |
12 |
13 | I am a customer |
14 | I am a host
15 |
16 |
An image goes here
17 |
18 |
19 |
Footer for Help
20 |
21 | )
22 | }
23 |
24 | export default Help;
--------------------------------------------------------------------------------
/router-101/src/Home.js:
--------------------------------------------------------------------------------
1 |
2 | // const Home = ()=>Home
3 |
4 | import React from 'react';
5 |
6 | function Home(props){
7 | console.log(props);
8 | props.history.block("are you sure you want to leave?");
9 | // setTimeout(()=>{
10 | // props.history.push("/help")
11 | // props.history.goBack();
12 | // },2000)
13 | return(
14 | {props.title}
15 | )
16 | }
17 | export default Home;
--------------------------------------------------------------------------------
/router-101/src/NavBar/NavBar.css:
--------------------------------------------------------------------------------
1 | nav .active{
2 | text-decoration: underline;
3 | }
--------------------------------------------------------------------------------
/router-101/src/RouterBasics.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import logo from './logo.svg';
3 | import './App.css';
4 | import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
5 |
6 | const Home = ()=> Home
7 | const About = ()=> About
8 |
9 | function App() {
10 | return (
11 |
12 | Header
13 |
14 | {/* we dont use a tags. that's so 2014 */}
15 | Home
16 | About
17 |
18 |
19 |
20 | Footer
21 |
22 | );
23 | }
24 |
25 | export default App;
26 |
--------------------------------------------------------------------------------
/router-101/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/router-101/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | ReactDOM.render(, document.getElementById('root'));
7 |
--------------------------------------------------------------------------------
/section1/lecture11-jsxAndBabel/markUp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |

6 |
7 |
8 |
React From the Beginning
9 |
Robert Bunch
10 |
11 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/section1/lecture13-components/Card.js:
--------------------------------------------------------------------------------
1 | function Card(){
2 | return(
3 |
4 |
5 |
6 |
7 |

8 |
9 |
10 |
React From the Beginning
11 |
Robert Bunch
12 |
13 |
16 |
17 |
18 |
19 | )
20 | }
--------------------------------------------------------------------------------
/section1/lecture14-props/Card.js:
--------------------------------------------------------------------------------
1 | function Card(props){
2 | console.log(props);
3 | return(
4 |
5 |
6 |
7 |

8 |
9 |
10 |
{props.title}
11 |
{props.name}
12 |
13 |
16 |
17 |
18 | )
19 | }
--------------------------------------------------------------------------------
/section1/lecture14-props/data.js:
--------------------------------------------------------------------------------
1 | const data = [
2 | {
3 | course: "React From the Beginning",
4 | instructor: "Robert Bunch"
5 | },
6 | {
7 | course: "Apache Kafka Series",
8 | instructor: "Stephane Maarek"
9 | },
10 | {
11 | course: "Music Production in Logic Pro X",
12 | instructor: "Tomas George"
13 | },
14 | {
15 | course: "Unity Game Development",
16 | instructor: "Jonathan Weinberger"
17 | }
18 | ]
--------------------------------------------------------------------------------
/section1/lecture15-practiceProps/Card.js:
--------------------------------------------------------------------------------
1 | // Card component
2 |
--------------------------------------------------------------------------------
/section1/lecture15-practiceProps/CardSolution.js:
--------------------------------------------------------------------------------
1 | // Card component
2 | function Card(props){
3 | console.log(props);
4 | return(
5 |
6 |
7 |
8 |

9 |
10 |
11 |
{props.data.course}
12 |
{props.data.instructor}
13 |
14 |
17 |
18 |
19 | )
20 | }
--------------------------------------------------------------------------------
/section1/lecture15-practiceProps/app.js:
--------------------------------------------------------------------------------
1 | // ReactDOM.render here
2 |
--------------------------------------------------------------------------------
/section1/lecture15-practiceProps/appSolution.js:
--------------------------------------------------------------------------------
1 | // ReactDOM.render here
2 | ReactDOM.render(
3 |
4 |
5 |
6 |
7 |
8 |
9 | {/*
10 |
11 |
12 | */}
13 |
,
14 | document.getElementById('root')
15 | )
--------------------------------------------------------------------------------
/section1/lecture16-arrayOfComponents/Card.js:
--------------------------------------------------------------------------------
1 | // Card component
2 | function Card(props){
3 | console.log(props);
4 | return(
5 |
6 |
7 |
8 |

9 |
10 |
11 |
{props.data.course}
12 |
{props.data.instructor}
13 |
14 |
17 |
18 |
19 | )
20 | }
--------------------------------------------------------------------------------
/section1/lecture16-arrayOfComponents/app.js:
--------------------------------------------------------------------------------
1 | let cards = data.map((course,i)=>{
2 | return(
3 |
4 | )
5 | })
6 | console.log(cards)
7 |
8 | // ReactDOM.render here
9 | ReactDOM.render(
10 |
11 | {cards}
12 |
,
13 | document.getElementById('root')
14 | )
--------------------------------------------------------------------------------
/section1/lecture17-componentClasses/app.js:
--------------------------------------------------------------------------------
1 | let cards = data.map((course,i)=>{
2 | return(
3 |
4 | )
5 | })
6 | console.log(cards)
7 |
8 | // ReactDOM.render here
9 | ReactDOM.render(
10 |
11 | {cards}
12 |
,
13 | document.getElementById('root')
14 | )
--------------------------------------------------------------------------------
/section1/lecture17-componentClasses/data.js:
--------------------------------------------------------------------------------
1 | const data = [
2 | {
3 | course: "React From the Beginning",
4 | instructor: "Robert Bunch",
5 | image: "https://img-c.udemycdn.com/course/240x135/2195280_49b2_2.jpg"
6 | },
7 | {
8 | course: "Apache Kafka Series",
9 | instructor: "Stephane Maarek",
10 | image: "https://img-c.udemycdn.com/course/240x135/1075642_b6d2_9.jpg"
11 | },
12 | {
13 | course: "Music Production in Logic Pro X",
14 | instructor: "Tomas George",
15 | image: "https://img-c.udemycdn.com/course/240x135/897192_2cee_7.jpg"
16 |
17 | },
18 | {
19 | course: "Unity Game Development",
20 | instructor: "Jonathan Weinberger",
21 | image: "https://img-c.udemycdn.com/course/240x135/1328572_b05d_5.jpg"
22 | }
23 | ]
--------------------------------------------------------------------------------
/section1/lecture18-practiceClassArray/CatNav.js:
--------------------------------------------------------------------------------
1 | // change this Component to a class!
2 | function CatNav(props){
3 | // get data from props and use map to build an array of
4 | // ... code goes here
5 | return(
6 |
7 | {/* Your Code Here */}
8 |
9 | )
10 | }
11 |
12 |
--------------------------------------------------------------------------------
/section1/lecture18-practiceClassArray/catNav.css:
--------------------------------------------------------------------------------
1 | .cat-nav{
2 | display: flex;
3 | flex-wrap: wrap;
4 | justify-content: center;
5 | align-items: flex-start;
6 | background: #F7F8FA;
7 | border-bottom: 1px solid #DEDFE0;
8 | margin-top: 0;
9 | }
10 |
11 | .cat-link{
12 | padding: 12px 16px;
13 | }
14 |
15 | .cat-link:hover{
16 | cursor: pointer;
17 | background-color: #E8E9EB;
18 | }
19 |
20 | .cat-link i{
21 | margin-right: 3px;
22 | }
--------------------------------------------------------------------------------
/section1/lecture19-breakingDownComponents/CitiesContainer.css:
--------------------------------------------------------------------------------
1 | .cities{
2 | position: relative;
3 | }
4 |
5 | .city{
6 | position: relative;
7 | width: 20%;
8 | padding: 12px 16px;
9 | display: inline-block;
10 | max-height: 100%;
11 | max-width: 100%;
12 | overflow: hidden;
13 | font-family: 'Roboto', sans-serif;
14 | }
15 |
16 | .city-name,.city-price{
17 | position: absolute;
18 | color: white;
19 | font-size: 18px;
20 | left: 0;
21 | right: 0;
22 | margin: auto
23 | }
24 |
25 | .city-name{
26 | font-weight: 800;
27 | bottom: 18%;
28 | }
29 |
30 | .city-price{
31 | bottom: 10%;
32 | }
33 |
34 |
35 |
--------------------------------------------------------------------------------
/section1/lecture19-breakingDownComponents/CitiesContainer.js:
--------------------------------------------------------------------------------
1 | class CitiesContainer extends React.Component{
2 | render(){
3 | const cities = this.props.data.map((city,i)=>{
4 | const randomImage = `http://lorempixel.com/${400+i}/300/city/`
5 | return(
6 |
7 | )
8 | })
9 | return(
10 |
11 |
12 | {cities}
13 |
14 |
15 | )
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/section1/lecture19-breakingDownComponents/City.js:
--------------------------------------------------------------------------------
1 | class City extends React.Component{
2 | render(){
3 | return(
4 |
5 |

6 |
{this.props.city.name}
7 |
{this.props.city.price}
8 |
9 | )
10 | }
11 | }
12 |
13 |
14 |
--------------------------------------------------------------------------------
/section1/lecture20-Review-noCode/notes.txt:
--------------------------------------------------------------------------------
1 | What is React and why we need React
2 | - to modernize front-end web development
3 | - modularize
4 | - encapsulate
5 | - easier to maintain across teams & years
6 | - as JS/ES changes, React can quickly change
7 | Why an Express server?
8 | - We are using JSX so we need HTTP
9 | React in its simiplest form
10 | The pieces of React
11 | The basics of JSX & Babel
12 | The basics of ReactDOM.render and the virtual DOM
13 | Component basics
14 | Prop basics
15 | Components in an array
16 | Components as classes
17 | Breaking down components into small parts
--------------------------------------------------------------------------------
/section1/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "section1",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "server.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "start": "node server.js"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "dependencies": {
14 | "express": "^4.16.4"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/section1/palidrome.js:
--------------------------------------------------------------------------------
1 | function isPalidrome(str){
2 | const stringAsArray = str.split('');
3 | const reversedArray = stringAsArray.reverse();
4 | const reversedString = reversedArray.join('');
5 | if(reversedString === str){
6 | return `${str} is a palidrome`;
7 | }else{
8 | return `${str} is not a palidrome`;
9 | }
10 |
11 | }
12 |
13 | const answer = isPalidrome('racecar');
14 | console.log(answer)
15 |
--------------------------------------------------------------------------------
/section1/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const app = express();
3 | app.use(express.static(__dirname+'/'));
4 | app.listen(3000);
5 | console.log("Node/Express server is running on port 3000");
--------------------------------------------------------------------------------
/section2/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/section2/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "section2",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "react": "^16.8.6",
7 | "react-dom": "^16.8.6",
8 | "react-scripts": "2.1.8"
9 | },
10 | "scripts": {
11 | "start": "react-scripts start",
12 | "build": "react-scripts build",
13 | "test": "react-scripts test",
14 | "eject": "react-scripts eject"
15 | },
16 | "eslintConfig": {
17 | "extends": "react-app"
18 | },
19 | "browserslist": [
20 | ">0.2%",
21 | "not dead",
22 | "not ie <= 11",
23 | "not op_mini all"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
/section2/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/section2/public/favicon.ico
--------------------------------------------------------------------------------
/section2/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/section2/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 40vmin;
8 | pointer-events: none;
9 | }
10 |
11 | .App-header {
12 | background-color: #282c34;
13 | min-height: 100vh;
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | justify-content: center;
18 | font-size: calc(10px + 2vmin);
19 | color: white;
20 | }
21 |
22 | .App-link {
23 | color: #61dafb;
24 | }
25 |
26 | @keyframes App-logo-spin {
27 | from {
28 | transform: rotate(0deg);
29 | }
30 | to {
31 | transform: rotate(360deg);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/section2/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './App.css';
3 | // import StateInAction from './StateInAction';
4 | // import SimpleEvents from './SimpleEvents';
5 | // import EventAndState from './EventAndState'
6 | // import StatePractice from './StatePractice';
7 | import CardSet from './CardSet';
8 | import cards from './cards'
9 |
10 | console.log(cards)
11 |
12 | class App extends Component {
13 | render() {
14 | return (
15 |
20 | );
21 | }
22 | }
23 |
24 | export default App;
25 |
--------------------------------------------------------------------------------
/section2/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/section2/src/Card.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Card(props){
4 | return(
5 |
6 |
7 |

8 |
9 |
10 |
{props.card.course}
11 |
{props.card.instructor}
12 |
13 |
16 |
17 | )
18 | }
19 | export default Card;
--------------------------------------------------------------------------------
/section2/src/StateInAction.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class StateInAction extends Component{
4 | constructor(){
5 | super();
6 | this.state = {
7 | text: "State In Action"
8 | }
9 | setTimeout(()=>{
10 | // THIS IS BAD!!! DON'T DO THIS!
11 | // this.state.text = "State Changed!!";
12 | this.setState({
13 | text: "State Changed!!"
14 | })
15 | },2000)
16 | }
17 |
18 | render(){
19 | return(
20 | {this.state.text} - {this.props.name}
21 | )
22 | }
23 | }
24 |
25 | export default StateInAction;
--------------------------------------------------------------------------------
/section2/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | }
10 |
11 | code {
12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
13 | monospace;
14 | }
15 |
--------------------------------------------------------------------------------
/section2/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | ReactDOM.render(
7 | ,
8 | document.getElementById('root')
9 | );
10 |
--------------------------------------------------------------------------------
/section3/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/section3/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "section3",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "axios": "^0.18.0",
7 | "react": "^16.8.6",
8 | "react-dom": "^16.8.6",
9 | "react-scripts": "3.0.0"
10 | },
11 | "scripts": {
12 | "start": "react-scripts start",
13 | "build": "react-scripts build",
14 | "test": "react-scripts test",
15 | "eject": "react-scripts eject"
16 | },
17 | "eslintConfig": {
18 | "extends": "react-app"
19 | },
20 | "browserslist": {
21 | "production": [
22 | ">0.2%",
23 | "not dead",
24 | "not op_mini all"
25 | ],
26 | "development": [
27 | "last 1 chrome version",
28 | "last 1 firefox version",
29 | "last 1 safari version"
30 | ]
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/section3/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/section3/public/favicon.ico
--------------------------------------------------------------------------------
/section3/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/section3/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 40vmin;
8 | pointer-events: none;
9 | }
10 |
11 | .App-header {
12 | background-color: #282c34;
13 | min-height: 100vh;
14 | display: flex;
15 | flex-direction: column;
16 | align-items: center;
17 | justify-content: center;
18 | font-size: calc(10px + 2vmin);
19 | color: white;
20 | }
21 |
22 | .App-link {
23 | color: #61dafb;
24 | }
25 |
26 | @keyframes App-logo-spin {
27 | from {
28 | transform: rotate(0deg);
29 | }
30 | to {
31 | transform: rotate(360deg);
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/section3/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(, div);
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
10 |
--------------------------------------------------------------------------------
/section3/src/Headers.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function Headers(props){
4 | return(
5 |
6 |
{props.temp}
7 | {props.isRaining}
8 |
9 | )
10 | }
11 |
12 | export default Headers;
--------------------------------------------------------------------------------
/section3/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | }
10 |
11 | code {
12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
13 | monospace;
14 | }
15 |
--------------------------------------------------------------------------------
/section3/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 | import FormPractice from './FormPractice'
7 | import Calculator from './temperatureApp/Calculator';
8 |
9 | // ReactDOM.render(, document.getElementById('root'));
10 | // ReactDOM.render(, document.getElementById('root'));
11 | ReactDOM.render(, document.getElementById('root'));
12 |
13 |
14 | // If you want your app to work offline and load faster, you can change
15 | // unregister() to register() below. Note this comes with some pitfalls.
16 | // Learn more about service workers: https://bit.ly/CRA-PWA
17 | serviceWorker.unregister();
18 |
--------------------------------------------------------------------------------
/section3/src/temperatureApp/BoilingVerdict.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | function BoilingVerdict(props) {
4 | if (props.celsius >= 100) {
5 | return The water would boil.
;
6 | }
7 | return The water would not boil.
;
8 | }
9 |
10 | export default BoilingVerdict;
--------------------------------------------------------------------------------
/section3/src/temperatureApp/temperatureInput.css:
--------------------------------------------------------------------------------
1 | .temp-input .too-hot{
2 | color: red;
3 | background-color: yellow;
4 | font-size: 30px;
5 | }
--------------------------------------------------------------------------------
/starterFiles/airbnb-components/Account/AccountSideBar-markup.js:
--------------------------------------------------------------------------------
1 |
2 | -
3 |
4 |

5 |
6 |
7 | -
8 | Confirmed Reservations
9 |
10 | -
11 | Past Reservations
12 |
13 | -
14 | Change Password
15 |
16 |
17 |
--------------------------------------------------------------------------------
/starterFiles/airbnb-components/Account/App.css:
--------------------------------------------------------------------------------
1 | .account{
2 | position: relative;
3 | z-index: 100;
4 | margin-top: 55px;
5 | }
6 |
7 | .account .col.s8.offset-s3{
8 | margin-top: 50px;
9 | }
10 |
11 | .account .sidenav.sidenav-fixed{
12 | top: 64px;
13 | }
14 |
15 | .account .center-align{
16 | justify-content: center;
17 | }
18 |
19 | .account .sidenav span.account-link{
20 | color: rgba(0,0,0,0.87);
21 | display: block;
22 | font-size: 14px;
23 | font-weight: 500;
24 | height: 48px;
25 | line-height: 48px;
26 | padding: 0 32px;
27 | }
28 |
29 | .booking td, .booking th{
30 | vertical-align: top;
31 | }
--------------------------------------------------------------------------------
/starterFiles/airbnb-components/logout/Logout.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robertbunch/reactFromTheBeginning/b9dd8969fd46cb70b5bdba4450764bac8f5f5d4d/starterFiles/airbnb-components/logout/Logout.css
--------------------------------------------------------------------------------
/starterFiles/airbnb-components/logout/Logout.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import './Logout.css';
3 | class Logout extends Component{
4 |
5 | render(){
6 | return(
7 | Logout
8 | )
9 | }
10 |
11 | }
12 |
13 | export default Logout;
--------------------------------------------------------------------------------
/starterFiles/aws_flash_cards/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/starterFiles/card.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |

5 |
6 |
7 |
{card.course}
8 |
{card.instructor}
9 |
10 |
13 |
14 |
--------------------------------------------------------------------------------
/starterFiles/section2/lightswitch.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------