├── .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 |
12 | 13 |
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 |
12 | 13 |
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 |
12 | 13 |
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 |
    13 |
    {question.cat}
    14 |
    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 |
    10 | 11 | 12 | 13 |
    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 |
    12 | $9.99 13 |
    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 |
    14 | $9.99 15 |
    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 |
    14 | $9.99 15 |
    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 |
    15 | $9.99 16 |
    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 |
    15 | $9.99 16 |
    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 |
    16 |
    17 | 18 |
    19 |
    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 |
    14 | $9.99 15 |
    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 |
    11 | $9.99 12 |
    13 |
    14 |
    -------------------------------------------------------------------------------- /starterFiles/section2/lightswitch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 |
    9 | 10 | 11 | --------------------------------------------------------------------------------