What we can do in order to make our components more readable and less complex coded?

• Add a readme file with data for each component. it'll help organize stuff for us, and will help another developers that will use our components later

Link to the first part of tutorial
https://medium.com/quick-code/lets-learn-react-chapter-1-setting-up-environment-e9505b6644

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

• install raven package, install underscore package

#1

Download this template and convert it into react application
https://codyhouse.co/demo/schedule-template/index.html

https://github.com/atherdon/meal.next/blob/master/mobile/app/AddMeal.js

• install our package by npm install @groceristar/groceristar-fetch

We cannot move forward, while we didn't have static data, related to recipes in our module

https://medium.com/quick-code/lets-learn-react-chapter-1-setting-up-environment-e9505b6644

after reading each chapter you need to push your code updates here and also give me a short resume about what exactly did you. it'll needed for better understanding your progress

#47

Compiled with warnings.

./src/component/WorkSchedule/DayModel.js
  Line 4:   'ListGroup' is defined but never used                                  no-unused-vars
  Line 48:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 49:  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 56:  Expected '===' and instead saw '=='                                    eqeqeq

./src/App.js
  Line 6:  'ColumnRender' is defined but never used  no-unused-vars

./src/component/WorkSchedule/WorkSched.js
  Line 6:  'weekdayName' is defined but never used  no-unused-vars

What do you think if we'll move a Meal Card into a separated component?

Can we use arrays from data folder?

Description/Steps to reproduce

Please check this code repo. https://github.com/atherdon/ph-st
It's a UI Kit, that was created by my friends, and they shared with me a free sample to try.
basic idea is to convert that HTML code into react page.
You should provide your step-by-step plan, where you'll explain

• how you'll do it.
• What do you need from me
• What will be a problem and what questions do you have to me, before you'll start.

for fast start we can use a template from build folder
But also check their src structure and tell me - will you be able to setup a local version of development version where we'll be able to alter scss?

prev code located here: https://github.com/atherdon/ph-st
compiled HTML are here: https://github.com/atherdon/ph-st/tree/master/build

checklist
as it's a big task, please tell me your step by step plan.
it'll be cool to go from basic stuff first, like:

• implement header and footer and container -->
• then go to each block -->
• and show me the progress each time when you finish the item

So I can review it, and make some corrections.

in order to be able to see the result online - we must push repository code on https://www.netlify.com/
when you create an account here and try to move this repo - you'll need to get a grant access from me.
Do it - I'll receive a notification and I'll approve it.

Expected result

Additional information

Can stuff, stored at Meal plan Form be a set with separated components, that contain related state events?
Will this reduce size of this file, right?

• Name field should be a text only with validation or mask(any option is fine with me)
• URl Form field -> don't have a link validation. I can put anything at that field right now. It can became a HTML5 field -> i'm with that option
• TextArea should be not empty.
• Prevent form submission without any data at form

https://medium.com/quick-code/lets-learn-react-chapter-4-functional-x-class-based-component-227f89ea2192
#1

https://medium.com/quick-code/how-to-learn-react-9-the-one-thing-you-need-to-know-about-props-and-state-a3f20b16da00

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

• Google and learn about constructor and super() function. Tell me what you've learned about it.
• With our extended form, I think this test wouldn't be a hard thing for you. So, create an array(at the separated file) with data, for a few meals. at least 3-4.
  Then we'll create some sort of meals editing.
  display meals at the list. and each meal should have an edit button(pass meal id there).
  when a user clicks on edit button - you should display a form(it should be hidden before).
  And by using knowledge of this chapter - fill form fields with values your meals array.
  So you'll have one form, and each time, by picking an id - you'll grab one element from meals array - and display that data.

#1

move that data into separated array too

https://medium.com/quick-code/lets-learn-react-chapter-6-updating-component-state-80fcc7c01d24

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

• extend meal component. we need to have image for each meal, also add this elements, like description(textarea), like steps(textarea). upload image is not necessary, we can use a free images from web, so we need to have input where we'll put open urls like: https://flic.kr/p/25zkvjU, https://flic.kr/p/25q8ngt, https://flic.kr/p/26MfbWD, https://flic.kr/p/8b21KZ

#1

https://medium.com/quick-code/lets-learn-react-chapter-7-component-life-cycle-6aaa815747db

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

• by using componentWillMount add few recipes/meals. each item should have recipe_url, image, ingredient list(sub-array), directions(sub-array), description(string)
  #1

I didn't like long lines like that, please update the format(just split it into few lines)

Btw, what do you think about adding a separated component for Calendar Header?

I think it should be rewritten. Tell me how do you think it can be done by your opinion

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor

Link to the first part of a tutorial on the next line
https://medium.com/quick-code/lets-learn-react-chapter-2-what-the-hell-is-jsx-and-where-can-i-buy-it-5303a7db5117

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

• at this tutorials we have a days array. i want to add a month's arrays(at least 3 months with dates) and I want to have a method that will render calendar like a template. more details upon request with specific questions

#1

• first

if(item%50 === 0) {
                if(topToDown[index+1] === buffer[i].start) {
                    return (
                            <ListGroupItem style={fillerBlockHeight} key={item}></ListGroupItem>
                    );
                }
                return (
                        <ListGroupItem style={defaultBlockHeight} key={item}></ListGroupItem>
                );
            }

as you can see - we have a similar return, just a different an attribute.
i think we can improve it and return this Tag only once, but in different conditions

• second

{this.rendererFunc(data[this.props.index])}
does we're really need to pass that data in render()?

• third

for(var traverse = 0; traverse <= 900; traverse +=25) {
            topToDown.push(traverse);
            if(buffer[i].start === traverse ) {
                traverse += buffer[i].height - 25;
                if(i < buffer.length - 1){
                  i++;
                }
            }
        }

Use underscore for simplifying code here

This methods looks a bit similar, tell me how do you think we can improve it

Check how this calendar adapt to a different screen sizes and tell what do you think we should do.

will put information about it later

• add to readme like links for a pages with different data inside. like workout plan, diet plan, meal plan.

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-router

• Separate your page into 2 pages
  Use router for this
  Index page will be for our code from chapters(forms, our calendar, etc)
  page with URL /calendar - will display our designed calendar

https://www.npmjs.com/package/moment

I'm not familiar how it works, but i know that all calendar plugins use it.
https://momentjs.com/
https://momentjs.com/docs/#/parsing/

Check the Testing section of this article: https://medium.com/groceristar/things-that-should-read-and-use-javascript-intern-at-groceristar-april-18-collection-bd6541e9ae28

https://medium.com/quick-code/lets-learn-react-chapter-5-component-state-f9eccc8df2cf
https://reactjs.org/docs/state-and-lifecycle.html

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.

as this chapter is more about understanding details - there no a coding test section

Question

what do you think, after reading this chapter - is state will replicate
partially a work of jquery things? i mean will state reduce amount of
jquery work?

Can we use array from data folder?

maybe move it into separated file?

Put them also in one folder.
like Modal/Abs/Abs.js

https://github.com/atherdon/bebe-grocery/tree/master/src
and tell me the difference and how we can improve our project structure.

You can also read section Structure of this article: https://medium.com/groceristar/things-that-should-read-learn-use-js-intern-at-groceristar-may-18-collection-48dc4e8f9c33

https://react-dnd.github.io/react-dnd/docs-tutorial.html
https://github.com/react-dnd/react-dnd

https://github.com/atlassian/react-beautiful-dnd

https://medium.freecodecamp.org/reactjs-implement-drag-and-drop-feature-without-using-external-libraries-ad8994429f1a

i think if you create a variable in the beginning - related to this.state.month - it'll be more beautiful

http://netlify.com

https://medium.com/quick-code/lets-learn-react-chapter-8-react-forms-f3137a5c07c7

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

• right now form looks very simple.
  And usually Meal form have more fields. So let's add them.

By using this database schema: https://github.com/ChickenKyiv/recipe-api-only/blob/master/Recipe-ChickenKyiv-Release%231%20Schema%20%20%20SqlDBM.png
We'll advance this form. I'm pretty sure that when you'll add all fields in this form, you'll realize that it's better to create a sub-components for each form field.
So, Meal is a similar Model to Recipe.
so we'll add all important things to that form.

• Each recipe has attributes: diets, allergies, etc. - text field for each one
• Each recipe has a weekday field(like today i have chicken, tomorrow i'll eat soup) - i assume it'll be checkbox.
• Nutritions is a sub-array with a few fields() - text fields
• Ingredients is a sub-array with a few ingredients inside(like chichen brests, salt, pepper, etc.) Let's have 4 ingredients per meal.

And, make it works :) this is when a real ES6 is coming into the scene.
and don't forget that each field will also have an id field(later it can be useful, when you'll grab data from database)

#1

https://app.codacy.com/project/ChickenKyiv/react-only-intern-23/dashboard

Maybe we should move it into a separated file?

<ListGroupItem>9:00</ListGroupItem>
                        <ListGroupItem>10:00</ListGroupItem>
                        <ListGroupItem>11:00</ListGroupItem>
                        <ListGroupItem>12:00</ListGroupItem>
                        <ListGroupItem>13:00</ListGroupItem>
                        <ListGroupItem>14:00</ListGroupItem>
                        <ListGroupItem>15:00</ListGroupItem>
                        <ListGroupItem>16:00</ListGroupItem>
                        <ListGroupItem>17:00</ListGroupItem>
                        <ListGroupItem>18:00</ListGroupItem>

2 things: 1 please update it
and keep in mind.
let's assume we have 2 options, 24h time && 12h time - make it work for both cases

https://flow.org/en/docs/getting-started/
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow

advanced stuff

https://medium.com/flow-type/even-better-support-for-react-in-flow-25b0a3485627
https://medium.com/@linmic/its-time-to-remove-proptypes-and-just-use-flow-for-react-4a3de615aac5

https://bitsrc.io/groceristar/recipe-search-form (we'll create another scope for Meal Calendar)
https://docs.bitsrc.io/tutorial/react-tutorial.html

https://github.com/GroceriStar/static-data

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
  #1