Week 2 assignment submission#16
Conversation
… done the css and the basic data rendering. I still need to figure out how to do if statemets in the response.
…. Cleaned up code.
…rdingly. Added proptypes, and mocked out testing. Attempted to get the bookmark to click and unclick, but didn't get it to work.
There was a problem hiding this comment.
Excellent job. You seem to be pretty comfortable with the components + styling. I gave a couple comments that should help with testing.
As far as making components that are "themable", designers and developers usually have to make their own patterns. One way you could theme a component is to give each DOM element a class, but then allow the component to be assigned a custom class. E.g.
const MyComponent = (props) => {
return <div className={props.themeName}>...</div>
}Then, import the corresponding stylesheet and voila.
|
|
||
| class bookmarkIcon extends Component { | ||
|
|
||
| // const bookmarkIcon = React.createClass({ |
There was a problem hiding this comment.
For context, React.createClass has been removed completely from the main React library. There may be some examples out there still that use this method though.
There was a problem hiding this comment.
Thanks! This was from my attempts to get the the Bookmark state to change, and at the time that was the only example I could find.
| <h1>In case you missed it</h1> | ||
| <section className="promos"> | ||
| {missedArticles.map((missedArticles, dex) => { | ||
| return <PromoBox key={dex} promoInfo={missedArticles} />; |
| const audioIcon = this.props.promoInfo.hasAudioAvailable; | ||
| const memberPreviewElem = this.props.promoInfo.memberPreview; | ||
| const backgroundMediaStyles = { | ||
| backgroundImage: 'url(' + image + ')', |
There was a problem hiding this comment.
Nice job implementing the background image styling 👍
|
|
||
| describe('PromoBox component', () => { | ||
| it('should render', () => { | ||
| const component = ReactTestRenderer.create(<PromoBox />); |
There was a problem hiding this comment.
Passing the needed props to <PromoBox /> should get this test up and working.
| render() { | ||
| const { | ||
| title, description, image, link, author, postedDate, minutesToRead, hasAudioAvailable, memberPreview | ||
| } = this.props.promoInfo; |
There was a problem hiding this comment.
Some of these variables are unused. You may want to remove the ones that aren't being used. For props like audioIcon, you can do something like this:
const { hasAudioAvailable } = this.props.promoInfo;or
const { hasAudioAvailable } = this.props.promoInfo;
const audioIcon = hasAudioAvailable;or
const { hasAudioAvailable: audioIcon } = this.props.promoInfo;As far as the right way... it's just personal preference.
…item in missed-articles.json.
2 participants
Week 1 HW Submission
Please fill out the information below in order to complete your assignment. Feel free to update this comment later if necessary.
Probably 3. Mostly because it took so long. But I feel pretty comfortable about most things. I need to review testing, and I was unable to get the bookmark's state to change when clicked. But other than that I think I got it all done. Although I used object deconstructing in PromoBox.js when I don't think I really need to, but I couldn't figure out how to write it without that. My biggest obstacle was the size of the assignment and the fact that I had a later start on it.
This is hardly the cleanest CSS I've ever written, but I was a little thrown by the differences in how React treats CSS. I'll want to look into how to optimize it in the future. I'm thinking that React might not be the best tool for theme-ing (creating a site template the user can apply different themes to).
95%? I need a refresher on testing.