This challenge allows you to practice the concepts and techniques learned over the past Sprint and apply them in a concrete project. This Sprint explored Intermediate React, React Tooling, The React Life-cycle, React Composition Patterns and CSS-in-JS. In this Sprint Challenge, you will demonstrate proficiency by creating an application that uses to build a fully-functioning replicate of the LA-Times website.
Remember, this is a way for you to analyze your understanding of the concepts presented this week. Feel free to reference old code, but please refrain from copy/pasting, even rewriting old code can teach you something new! Take your time, and have fun!
Read these instructions carefully. Understand exactly what is expected before starting this Sprint Challenge.
This is an individual assessment. All work must be your own. Your challenge score is a measure of your ability to work independently using the material covered through this sprint. You need to demonstrate proficiency in the concepts and objectives introduced and practiced in preceding days.
You are not allowed to collaborate during the Sprint Challenge. However, you are encouraged to follow the twenty-minute rule and seek support from your PM and Instructor in your cohort help channel on Slack. Your work reflects your proficiency Intermediate React and your command of the concepts and techniques in the React Tooling, The React Life-cycle, React Composition Patterns and CSS-in-JS modules.
You have three hours to complete this challenge. Plan your time accordingly.
Commit your code regularly and meaningfully. This helps both you (in case you ever need to return to old code for any number of reasons and your project manager).
For the Lambda Times challenge you will create a React application that replicates theLA Times Website. Throughout this challenge you will take a Vanilla JavaScript app, and convert it to a React app. Much of the initial work has been done, but there are some missing pieces you will need to complete to get the app working properly.
Your base React app has already been created, and includes some components. Included as well is a CSS file that you may reference when writing your own code.
Look through the application code. If you have the old Lambda Times (Applied JavaScript) sprint challenge handy, you may compare how the structure of this app differs from that, noting how React gives us very easy to use concise components.
- What are PropTypes used for? Please describe why it's important to type check our data in JavaScript.
- PropTypes are used to check the type of a value one a react components props object. Unintended types can lead to wonky behavior think
1 + '1' vs 1 + 1
- PropTypes are used to check the type of a value one a react components props object. Unintended types can lead to wonky behavior think
- Describe a life-cycle event in React?
- each component has certain phases it goes through from being created, mounted, updated, removed. React allows you to hook into these events to give you een more control of your react components
- Explain the details of a Higher Order Component?
- a Higher order Component is a function that takes 1 or more components as an argument and returns a component
- What are three different ways to style components in React? Explain some of the benefits of each.
- vanilla CSS - hard to keep track of sometimes but thats ol'faithful
- styled components - lets you style components in JS giving you a ton of power and allows you to easily tell whats gonna be styled
- import pre styled components - you know what they look like and how they act, just plug and play
Follow these steps to set up your project:
- Create a forked copy of this project.
- Add your project manager as collaborator on Github.
- Clone your OWN version of the repository (Not Lambda's by mistake!).
- Create a new branch: git checkout -b
<firstName-lastName>
. - Implement the project on your newly created
<firstName-lastName>
branch, committing changes regularly. - Push commits: git push origin
<firstName-lastName>
. - From within the
lambdatimes
folder runyarn
and thenyarn start
. This will open your locally hosted application in your browser. Once you are ready move onto the next steps. - Inside the
Content
folder you will find all 5 components that make up the content of the application. The flow goes like this:Content > Tabs > Tab
andContent > Cards > Card
. Follow the directions in theContent
component to get your data ready.
Follow these steps for completing your project.
- Submit a Pull-Request to merge Branch into master (student's Repository). Please don't merge your own pull request
- Add your project manager as a reviewer on the pull-request
- Your project manager will count the project as complete by merging the branch back into master.
- Go through the
Tabs
,Tab
,Cards
, andCard
components following the instructions, and passing data and props to get the tabs and cards to appear on the screen. - Once the Tabs and Cards are rendering to the screen complete the
changeSelected
andfilterCards
functions in theContent
component. - You should now be able to filter cards using your tabs!
- Make sure all of your props being passed are validated using PropTypes.
- Find the
TopBar
andHeader
components. Convert these two components to Styled Components. You should not have anyclassName
props when you are finished.
There are multiple stretch challenges available to you, you may attempt these in any order. Remember, stretch challenges are only to give you extra time to work on these concepts, if you do not get to these challenges, that is fine! Continue working on your main objectives.
-
Re-factor the app, so that it uses ALL styled components. There should be no
className
props on any component. To truly test this, delete the CSS file. -
You will find a
Carousel
component in your Content folder. Complete this component, rendering a functional carousel. Add this component between yourTabs
andCards
components within theContent
component. Added challenge: make it so that there is infinite scroll to the right and the left. -
Add a login and an HOC. Make it so that when a user clicks on the login button at the top, a login modal is shown (Use React-strap). Have a user login, validating the login credentials on the
localStorage
. Add a Higher Order Component that wraps theContent
component, only allowing it to render once a user has logged in. For more instructions see this README: React-Insta-Clone: Day III