React portals!

React 16 is here!
This new version is extremely interesting not just because it has some new cool features, but it's a complete rewrite from the start!
It's fascinating how well TDD (Test Driven Development) can work in real-lief, huge projects like React itself, since the aim was to create the new React while fixing all the tests that the "old" React had. And they did it! Step by step, day by day, with hard work, but they did it. And even new features! Kudos to the React team and especially Dan Abramov!
There are few new features like:

• fragments and string: basically don't have to return one single elemnt in render
• better error handling: the new <ErrorBoundary><MyComponenentWhichCouldError /></ErrorBoundary> component which "polyfills" the wrapped component with a new lifecycle method called componentDidCatch which works like a catch{..} in JS
• Portals: later in this article
• Better server side rendering: for me this is not a big change since I haven't really used SSR :P
• Support fro custom DOM attributes: unrecognized React HTML and SVG elements are passed through the DOM now
• Reduced file size
• MIT license
• New core architecture(Fiber): featuring async rendering which is basically a two step rendering mechanism with a commit and render phase. Here is a demo: https://build-mbfootjxoo.now.sh/ -- mind the square in the top right corner!

Let's talk a bit more about portals.

These are meant to solve out of the parent component communication, which could be done before but it was a bit hacky.

Now we can define a component which is going to refer to a DOM component which is not is not under the parent component (basically out of the current component's reach). This component is going to use a portal to refer to a DOM component.

Now we can use the component defined above in another React component without even knowing it's using porals! Neat!

Here is an example based on this pen. Mind that there is a component which is using a portal (Modal) and the other one (App) does not know Modal is using portals, and it is using it.

See the Pen React portals modal example ! by Adam Nagy (@nagyadam2092) on CodePen.

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!