What you need to work to improve?

Hi all,

learn frontend, pass courses Hexlet,
made its first test task from Aviasales on React:

How can I assess my level? What you need to work, in what direction? Will do some more test jobs for git hub. The goal is to go on the job front ends om

I can say that at least we can do responsive, the units of measurement in CSS to translate relative
the logic of the filters to simplify (but need a clue how)

thanks in advance for the answers!
March 12th 20 at 08:39
6 answers
March 12th 20 at 08:41
  1. Commented out the code on github - not good. https://github.com/marinarodkin/aviasales-app/blob...
  2. At least logic in the render function of the component. All complex structures in transfer methods, but rather in the individual components (then it will be easier to control the redrawing of components using shouldComponentUpdate , so they don't redraw if data has not changed). You can right how to write a methods arrow functions:
    class Flight extends Component {
     getWeekDay = (date) => {
     // ....

  3. You in half of the cases use a semicolon, and half not. Use more frequently.
  4. Attribute for cannot be used in jsx (and class, as you know). Instead for write htmlFor
  5. See the console of the developer tools, there are errors.
  6. Learn shouldComponentUpdate, it allows you to control the redraw of the component when the status changes or props. When you change the number of transfers, repaint the entire list, even those that were already on the list. Many will say that it is too early to learn this, but I disagree. If you do not learn to control redrawing at the beginning of the study, it is possible to write a lot of soft brakes.
  7. You have a data ticket.hardcode loaded json from github, it's not good, because the file data is in the public folder, and if a potential employer wants to change something, he will not see the changes (because it is loaded with github).
  8. If you have data in the parameter departure_date is 11.10.2018 (as today), it will display it as "11 Oct 2018, vs," i.e., the day of the week wrong. But it is wrong because it is not October and November. Error in the method getDateFormat
    in the mining const = new Date (year, month, day );
    const monthName = ["Dec", "Jan", "Feb", "Mar", "APR", "may", "Jun", "Jul", "Aug", "St", "Oct", "Nov", "Dec"];
    const newMonth = monthName[in the mining.getMonth()];

    designer Date the second argument expects a month number, the numbering begins with zero. i.e. 0 is January, 1 is February, 11 - Dec. Judging by monthName you podozval that there was something wrong but make a mistake with the implementation. monthName should have a normal appearance, to begin with January and end with December because element zero of the array is just according to the logic of zero month. In the getDateFormatand in getWeekDay, subtract from month - 1
    in the mining const = new Date(year, month - 1, day)
  9. You have the same getDateFormat and getWeekDay in the constructor Date you at the end of the arguments, write a comma, so no need to do. It is not harmful and not helpful, just bad taste. There is, in any case it will be undefined, even with the comma even without it.
  10. Pictures also loaded with marinarodkin.github.io change.

  11. const getStopsNumber = (stop) =>{
     switch (stop) {
     case 3:
     return "3 transplant"
     case 2:
     return "2 changes"
     case 1:
     return "1 change"
     case 0:
     return "direct"
     return // don't need to do, write return. If you remove this (and the line above), then the result is the same - undefined

  12. If in the SideBar props stopsData was not an object but a string or number, the SideBar could be easily turned into PureComponent. Well it is, the way of optimization.
  13. I would stopsClick are not passed an event object e, which you then take id of the item via e.target.id (which is not Gud), and would make a pointer function (or bind) that passed id. So
    <input onClick={() => this.props.stopsClick("allStops")} />
    <input onClick={() => this.props.stopsClick("noStops")} />

    If it is read by experienced ReactJS developers, judge please. I agree that each component will create its own copy function, but at least don't need to interact with the DOM directly.
  14. It's not pretty
    if( this.state.stops.allStops === false && this.state.stops.noStops === true && this.state.stops.oneStop === true && this.state.stops.twoStop === true && this.state.stops.threeStop === true ){
     newStops = {...this.state.stops allStops: true}

    I think, further logic it does not matter, only creates a glitch when you choose all the checkboxes except "all", and if you click then on one of them, he's not press, and only turn on the checkbox "all".
  15. Try everywhere to reduce repetitive design. For instance, start with stopsClick Not saying that you will succeed, it comes with experience. But just try to think how it can be reduced.

Maybe I've sucked from the finger, but it will be useful for you. Learn, develop. Good luck with that :-)
thank you!!!
very detailed and very helpful! - imelda.Metz commented on March 12th 20 at 08:44
March 12th 20 at 08:43
Not a fan of react, so about him not going to say. But CSS criticize:
- Should tie some preprocessor poispolzovat containment (structure is better visible) and to make a human-readable constants all shall be made - colors, sizes, etc. There are enough repetitions.
- It is necessary to divide everything into separate component files.
- Is better to consider General splitting CSS into components. There are certainly different approaches, but the individual buttons, or multiple buttons, or checkboxes is a universal thing throughout the project. What is the point of them bind to some sidbury or calculator?
- About the adaptability you have written.
Styles for :focus no. Keyboard will not work to use it.
- I think that sidebar at the bottom of the indent should be (the design is not seen, but IMHO there is). And that cursor: pointer is the buttons should be.

PS.: There is still the idea that "all" was not needed. "All" should be shown with no filters. But without an analysis of the TSA will not approve, there may be to the people are used to.
thank you, plunged in js and React, already forgotten as there is a preprocessor, it is necessary to repeat everything,
but the logic of the filters I did like the authors of test tasks on the website. - imelda.Metz commented on March 12th 20 at 08:46
On account of css - styled try-components how to get my hands on - Jefferey.Herma commented on March 12th 20 at 08:49
@Edyth.Herma, tried, got a headache, not a spell. The idea is good, but in my opinion not everywhere it makes sense to use. If components a bit, and the project 1 or 2 frontenders, which may well agree, all of these approaches with a mix of CSS and JS only complicate things of the blue. It seems to me that collecting styles separately in such a situation - not a bad idea, though not fashionable. I believe that this is only my personal opinion, so did not answer anything about it to advise or argue. - Bette.Bayer79 commented on March 12th 20 at 08:52
March 12th 20 at 08:45
Well, that's purely a side view.

1. Learn how to make projects using markdown. Now this project description is hard to read, I mastered 5 words, a potential employer generally would not look.
2. Group project files by type and meaning. Now it is a mess and hard to understand to me how simple not montengero where is the logic, where is the framework.
3. As you write still the bad code, then accustom on complex sections of code to write comments which expresses the essence of the execution of the function.
4. Don't know how in the front now, but secendary don't like when you mix logic and templates.
5. Learn rastavlyaet braces, read how to execute code in js
componentDidMount() {
 } // And so everywhere

6. What's that?
newArr = [newArr..., ...arr0, arr1..., ...arr2, arr3...];

7. It's a bad practice. Code should be abstracted from the data. Need to replace the object and to check whether the object needs the data or return the default value.
const getStopsNumber = (stop) =>{
 switch (stop) {
 case 3:
 return "3 transplant"
 case 2:
 return "2 changes"
 case 1:
 return "1 change"
 case 0:
 return "direct"

As long as enough.
I would say 8 point often commit. Did some meaningful edit and commit. - Doug65 commented on March 12th 20 at 08:48
4. Don't know how in the front now, but secendary don't like when you mix logic and templates.

Ahahahaha, how much of my pain in your offer. In ReactJS and write... - Kelly_Dickens commented on March 12th 20 at 08:51
thanks for the detailed review
all understand
and 6-Oh PP - I filtered the original data depending on the number of transfers, and then the results are collected into a single array. Crooked? - imelda.Metz commented on March 12th 20 at 08:54
@imelda.Metz, better one array to use.

Here you have this array for example:

var stop = {
one: {
 title: '1 change',
 active: true

You just change the value to active and activate the filter. - Doug65 commented on March 12th 20 at 08:57
@Kelly_Dickens, but react is a view layer, the business logic there is quite real anymore. Or are you talking about human weakness? - Mandy_Labadie commented on March 12th 20 at 09:00
March 12th 20 at 08:47
Add. You are working with REAKTOR, but it was just postavljale templates that does not make sense, you can take any framework and without a framework to put templates and hang handlers. Tembulat need to break on the components that you prokidyvaya data through props, and you have a lot of repetitive html
Put the Linter, it will get you to help. With it, you will though gonococci, but beautiful
I have 2 components, one on side panel with filters, renders, another flight.
so you need inside the panel with the filters, each "item" to make the component? in flight - the components of "date", "airport"? or even "smaller" - logo, button, header?
thank you! - imelda.Metz commented on March 12th 20 at 08:50
One of the first zakupeny examples:
Button component with some props.
How much kibble is already at its discretion, some things don't require.
For example in your code sidebar_changing-block is obviously asking for the removal of a separate component. Because this is some spaghetti code at it.
Especially when using React devtools you can see more chetko a picture of what goes where, and which parameters it receives. - Una7 commented on March 12th 20 at 08:53
March 12th 20 at 08:49
Noticed that you have many functions defined in the methods render. This is not necessary, but rather necessary to avoid or to take on a class level, if you need this, or you can leave it there.
Even you go for image and json file to the link on github, and you can connect via import, because they are locally available to react application. If json is still controversial, the picture in the header just need the import-it
import - a very topical clue !
I generally stuck with images and a json file when you publish on Git Hub pages, relative links, they stubbornly didn't load, I end up with nothing better to do as direct links to insert
thank you! - imelda.Metz commented on March 12th 20 at 08:52
March 12th 20 at 08:51
It's all in js code than purely to react.
 case "eur":
 newCurrency = {...this.state.currencyData, rub: false, usd: false, eur: true };
 case "usd":
 newCurrency = {...this.state.currencyData, rub: false, usd: true, eur: false };
 newCurrency = {...this.state.currencyData, rub: true, usd: false, eur: false };

And if there is even the currency will be more properties to add? It is better to keep the currency property and to push him. Would the typescript b still have some line in there where you can assign. And in the state currency is already there, why currencyData I did not understand.

Same with all stop properties, many of them, it is difficult to understand what was happening. In General, look at it in the first place.
these blocks are what I hate most, but in another way not thought of. Especially transplant. in the case of a currency either-or, in the case of transplants can be any set of - "1 change + 3пересадки" for example... - imelda.Metz commented on March 12th 20 at 08:54
These things are best stored like this:
Source an array of acceptable values and, if multiple choice, array, user-selected values.
And the renderer has to calculate what is true and what falls and render. - Jefferey.Herma commented on March 12th 20 at 08:57

Find more questions by tags ReactFrontendCareer