2017. szeptember 10., vasárnap

React beginner assignment

Sometimes I do computer science teaching and get stuck how to do it properly. I like to give a small theoretical sum of what a lesson is about but then immedately give an exercise where the candidate can try out the new concepts.
This time I was asked to give lessons on React and I thought the best way would be to give an assignment which will test whether the student understood the core concepts of it. So here is the assignment (and here is a solution: https://stackblitz.com/edit/react-assignment-nr-1-solution)
There is an App component which stands for the wrapper of the component and 4 other (child) components:
In summary:

  • App component: in it's state it has an appState which is initially 1 but it can be increased with a button.
  • CompOne component: waits for an appState prop, displays it, plus it has it's own state: compOneState which you could edit with a textinput (more info: https://facebook.github.io/react/docs/forms.html#controlled-components)
  • CompTwo: almost the same as CompOne: awaits for appState prop, displays it, and it also has it's own state: compTwoState which is initialized by 1 and it could be increased with a button.
  • CompFour: only props are required: appState, compOneState which it displays
  • CompThree: almost the same as CompFour - only props: appState and compTwoState, displays is.
This is how it should look like approximately:
Pseudo code:
<App>
    <CompOne>
        <CompFour />
        <CompFour />
    </CompOne>
    <CompTwo>
        <CompThree />
        <CompFour />
    </CompTwo>
</App>

  • App: red border
  • CompOne: blue border
  • CompTwo: green border
  • CompThree: black border
  • CompFour: grey border
 Have fun learning!

Nincsenek megjegyzések:

Megjegyzés küldése