Master React, Quick Code tutorial. Part 3

[atherdon]

https://medium.com/quick-code/lets-learn-react-chapter-3-components-components-components-3492f771d623

Expected result

• Read this tutorial chapter
• follow code steps
• move your code to this repository(at least one commit per day)
• explain to me, what did you learn from it in a few sentences(not less than 5)
• pass the test section
• after reviewing your progress and closing this issue - you can move to the next chapter.

Test

• similar component for day checker is month checker. Create it.
• btw, can you have a some sort of component between month and day - week, right?
  with ability(method) - to grab only work days, and other method for weekends?
• separate some of repeating functionality from that HTML code too...
• I want to have one array - that will contain days and month together. so when you'll need to render a 'calendar' table - you'll use 2 forEach methods.
• and i want to have all static data - like titles, image url, content - into one file, make it like array. sample: https://github.com/ChickenKyiv/recipe-search-react/tree/master/src/data
  First step. React from tutorial [Main task] #2

[smob123]

tutorial 3 is finished

[smob123]

Things I learned:

. importing and exporting javascript classes
. passing data through classes
. Improved in manipulating html using javascript
. using the Date() class to get current month, and day
. merging arrays

[atherdon]

Can you tell - how do you think, that system with month, week, days - can be improved?
I mean how we can combine them more tightly... Interested to hear your opinion.

---

Btw, as you learn about componentDidMount - did that chapter have a constructor part?
I mean i assume you can pass https://github.com/GroceriStar/onboarding-features/blob/master/Groceristar/my-app/src/App.js#L6 on it

[smob123]

Can you tell - how do you think, that system with month, week, days - can be improved?
I mean how we can combine them more tightly... Interested to hear your opinion.

. I thought about having two two different arrays, one to store months and the other to store days. This way we can iterate through months one at a time and just use the days array to link days to each month.
. Or we could have taken a more technical rout, and made a tree structure where the root is the year, its children would be months, and the grandchildren would be the days.

Btw, as you learn about componentDidMount - did that chapter have a constructor part?
I mean i assume you can pass https://github.com/GroceriStar/onboarding-features/blob/master/Groceristar/my-app/src/App.js#L6 on it

No actually, but I assumed that it would a better way to pass variables between classes, than to use render

[smob123]

@atherdon Can you explain to me what are the repeating functionalities in my html?

[atherdon]

Sure, this thing
https://github.com/GroceriStar/onboarding-features/blob/master/src/components/App%20template/Template.js#L18-L32

[smob123]

I just git stuck on the array part, is this how it is supposed to be?

[atherdon]

@smob123 yeah, i tried to make your live less easier :) but it's cool for growing skills. not sure about this function.

but if you want to manipulate arrays - i assume you should use underscore library. check it - it's cool. it's similar to lodash, but i start to work with first, so i didn't use the second one.

[smob123]

lol, and I was wondering about this requirement, you got me there.

My function merges the elements of the month and week arrays, and then adds them to the dates array. Then, I loop through them in another function to link each month with the seven days.

If you still recommend me to use underscore instead, then I should be able to do that as well.

[atherdon]

no if you merged two of this arrays - and it works well - using underscore is not necessary. this library is just a set of functions that doing the same things, but with more easy ways. so it's upon your choice.

[smob123]

it's been 18 years, but at last, the calendar layout has finally been fixed!

[smob123]

is there anything else I should improve in this tutorial?

[atherdon]

@smob123 does that thing with arrays works now?

[atherdon]

and i assume and i want to have all static data - like titles, image url, content - into one file, make it like array. not completed

[smob123]

just fixed the html, and put all files in the data folder

[atherdon]

hold on, you get me wrong. i'll make some changes on your repo right now

[atherdon]

I pushed some changes. please take a look. for sure - it broke the project. you'll need to update path of imported files

[smob123]

I changed the imports, it works now

[atherdon]

I want to have one array - that will contain days and month together. so when you'll need to render a 'calendar' table - you'll use 2 forEach methods.

is this completed?

---

separate some of repeating functionality from that HTML code too...

I saw that you created some components related to each slide, but not sure if this task completed too

[smob123]

I want to have one array - that will contain days and month together. so when you'll need to render a 'calendar' table - you'll use 2 forEach methods.

is this completed?

yes, the merging code is on the image I provided you here on Friday.

separate some of repeating functionality from that HTML code too...

I saw that you created some components related to each slide, but not sure if this task completed too

The code I wrote was supposed to take out the repeated parts of the html and put them in one component, so they would not have to be rewritten every time someone wants to implement a new feature.

If you have any suggestions on how I should implement them differently, please let me know.

[atherdon]

can you share with be exact codeline link for both of tasks

[atherdon]

ok, feature component good, but can you also move into component image too

onboarding-features/src/components/Template.js

Lines 30 to 43 in c6d163d

	<div className="cd-image-container">
	<div>
	<div className="cd-image-wrapper">
	<img style={{
	width:'200px',
	}}
	src={screen01}
	data-video="./video/video-1"
	alt="Screen Preview 1" />
	</div>
	</div>
	</div>

calendar good. thanks for the clarification.

[smob123]

onboarding-features/src/components/Features.js

Line 10 in 287968d

<img src={this.props.imageSrc} alt={this.props.imageAlt} style={{width: '200px'}}/>

onboarding-features/src/components/Template.js

Line 50 in 287968d

<Feature imageSrc={screen02} imageAlt="Screen Preview 2"/>

Done

[atherdon]

I think there some misunderstanding. I mean you can add an img to your component.
BUT, right now it wouldn't generate an exact HTML that we have before.
for example if in case you try to render image - you pass only params related to img, but empty tags related to

<h2>{this.props.name}</h2>
                <p>{this.props.description}</p>

will be generated. same when you pass only text - you'll get an empty generated img tag.
I assume it'll be easier - if you create a separated component just for image.

btw, i like how much changes with did with your code - good progress :)

[smob123]

I just uploaded the changes

[atherdon]

@smob123 ok so the last thing we need is to pass static data from feature+feature image into one array.
i want to have one place where we'll be able to change content - and it'll update at our page

[smob123]

onboarding-features/src/components/Template.js

Lines 10 to 27 in 2e86bfd

	getData(name, description, image, imageAlt) {
	let data = [];
	if(image === 'x') { //if x is passed as image
	data.push(<Feature name={name} description={description}/>); //add feature name, and description only
	return data;
	}
	else if (name === 'x' && description === 'x') { //if x is passed as name, and description
	data.push(<FeatureImage imageSrc={image} alt={imageAlt} />); //add feature image only
	return data;
	}
	//otherwise add everything together
	data.push(<Feature name={name} description={description}/>, <FeatureImage imageSrc={image} alt={imageAlt} />);
	return data;
	}

just created a new method that should solve this issue

[atherdon]

it's something strange.. i mean we don't need so complex method for this.
I mean - good to see that you make it that way.
can you show me an array, that should be stored at data folder - where you put all static copy for features?

[smob123]

https://github.com/GroceriStar/onboarding-features/blob/master/src/components/Feature.js

https://github.com/GroceriStar/onboarding-features/blob/master/src/components/FeatureImage.js

Do you mean these two files?

Besides I had to do it that way, because each image has a bunch of divs wrapping them, and each div has a unique className, like this piece of code:

onboarding-features/src/components/Template.js

Lines 52 to 58 in 2e86bfd

	<div className="cd-image-container">
	<div>
	<div className="cd-image-wrapper">
	<div>{this.getData('x', 'x', screen01, 'Screen Preview 1')}</div>
	</div>
	</div>
	</div>

[atherdon]

No, check it again

and i want to have all static data - like titles, image url, content - into one file, make it like array. sample: https://github.com/ChickenKyiv/recipe-search-react/tree/master/src/data

so, 'x', 'x', screen01, 'Screen Preview 1' will be stored at separated array

[smob123]

Do you mean that I should create a new component file to return images? Because I already have one.

or do you want me to create another component that returns images, and descriptions? Because in this case, I am not sure how I could add images separately inside their respective divs

[atherdon]

no you need to create a js array. at separated file. elements of this array will be text/link to images, etc. and when you'll run a loop for displaying list of features - you'll get data from that array - and put it into your components. like a = [ 'feature 1', 'awesome feature, try it', 'feature 2'.... ] _.each(array,()={ }) something like this... On 30-Apr-2018 at 10:25 PM, smob123 wrote: Do you mean that I should create a new component file to return images? Because I already have one. or do you want me to create another component that returns images, and descriptions? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABZrDnVVdrIqbAlbV4I-_qfvOupx-vo9ks5tt492gaJpZM4TiUdr> .

[smob123]

Okay, so how about something like this?

[atherdon]

yep, but array must be stored at different file.
i'll explain why - if i'll want to change something - i don't need to find a place where the static content is presented

[atherdon]

I pushed some changes, please take a look and make your logic works with it

[atherdon]

@smob123 i assume we can close this task? and you can move to the next chapters

[atherdon]

trying to find time and get acutally back to you. sorry for this waitng

[smob123]

No worries, take as much time as you need time

[atherdon]

@smob123 tell me about your progress here. I'm not sure that i remember where we are with you. Btw, I saw that you setup your website. Do you need my help?

[smob123]

For this part, I created a simple calendar template, but I used innerHTML to add repeated code rather than storing it in an array.

I just rechecked it, and I think the template isn't exactly as it should be at the moment, because every month starts on Monday, and ends on Wednesday, and all months have 31 days, so that should be optimized as well.

[atherdon]

@smob123 yeah, i think you should make it more flexible, so it can work fine for each month of the year. the easiest way to do it - it's just generate a whole 2018 calendar and see how it'll be displayed inside your component. and if it'll work wrong - update it