updated 13 April 2018
Complete Modern React and Redux Course by Stephen Grider
As a developer that loves learning new technologies and never stay behind, I decided to leave Angular(with the exit of Angular 5) and move to a different world. Faster, stronger, better and more advanced – the React world, and I have never looked back.
Before we even start talking about React, I want to share my 2 cents. As a developer, I have never enjoyed writing code as much as I enjoy doing it with React.
What is React?
Many are comparing Angular to React, which is incorrect. React is a small view library, as, on the other hand, Angular is a full-blown MV* framework.
The founder of React, Jordan Walke, Facebook software engineer, wanted to create a better solution for everyday problems of a front end developer. He wanted to do a much better, smarter, faster way of creating web-application, and yes – he succeeded.
Today, React is being developed by Facebook themselves, although it is a somewhat new technology, React already has million of front end developers supporting and using it in their own projects. The most common ones still would be Facebook Feed and Instagram.
Why React is better?
Before you even continue reading, And if you are serious about learning React, I must recommend the Modern React Redux course by Stephan at Udemy. This that course, you could learn Modern React, Redux, ES6, and Webpack in under a week!
Hard to say that React is better than Angular(or Vue). It is a pretty different technology to compare. But, is it still better for web-application creation? I believe so.
React`s unidirectional data flow. As many knows, even if they did not work with Angular, the most talking topic regarding Angular was two-way binding, React’s doesn’t have it. Instead, React using a simple flow top-to-bottom, from father component to child and so on.
Maybe it seems to you as a disadvantage, but bear with me, I can find at least 2 advantages:
- It saves time – You will never update a value of state(property), without specifically deciding to update it. Forget about surprises happening.
- A full hold of your code – You will understand your code much better, you will know what is supposed to update, when, and why. You will have a much better grasp of the written code.
And don’t worry, it is very easy to update a value of the state if you decided it is needed.
Of course, you can’t talk about React without mention their groundbreaking Virtual Dom technology. If you know what is React, you probably already heard about the Virtual Dom.
React, as opposed to Angular, is not updating the DOM directly. jQuery and Angular, are first loading the full HTML(DOM) and then manipulating it. React’s power and speed comes from the Virtual Dom – An amazing explanation you can find here: team treehouse – react basic
What is React’s Virtual Dom?
The Virtual Dom in React, amazing invention.
Maybe in first, it sounds a little bit quirky, but as we grew as developers, we wanted to build a much more complicated web application, and manipulating the DOM, was no longer a good option. More manipulations came with a slow unresponsive code.
How did we work in jQuery? We received input from the user, did some magic and manipulated(updated) the DOM accordingly to what we wanted. It took much more time to write, and in a big application, it affected the user tremendously.
P.S. Virtual Dom it is not only the speed, as a huge feature as it is. Because the Virtual Dom is not connected to the web browser window, it gave Facebook the option to create React Native. What is React Native? the greatest thing that happened to web developers all other the world. React Native, gave us the option to develop a native application for the Android and iOS platforms, and yes, native. How freaking awesome is that?
Because React Native ease of use and speed, many Java and Swift developers are implementing React Native in their day to day work, and some, fully moving to React Native.
What is JSX?
Every time we want to create an HTML element we could use the function
React.createElement(element, props, children), like so:
React.createElement("ul", null, React.createElement("li", null, 'option 1'), React.createElement("li", null, 'option 2'), React.createElement("li", null, 'option 3'), React.createElement("li", null, 'option 4'), React.createElement("li", null, 'option 5') )
Here we create an Unordered list element with 5 list items inside, looks a little bit complicated, no?
Let’s rewrite this code with JSX:
<ul> <li>option 1</li> <li>option 2</li> <li>option 3</li> <li>option 4</li> <li>option 5</li> </ul>
Of course, that will be no way to code, if every time when we wanted to update our application, we would need to go and compile our code by hand. Fortunately, it is not the case.
Today we have automatic task runners, that can compile our code as we go, there is Grunt, Gulp, Webpack and more. I will not go too deep into task runners, but just know that most of the React’s projects you will start with, will have some kind of task runner and a code compiler.
Components in React
Every React application is build of one or more(probably more) components. Components are basically pieces of code, be it class or function.
Let’s say we want to create an unordinary list, so it will be a good practice to make 3 components: 1 is the UL, the second one is the iterator function of the LIST and the third one is the LI itself. Every child component is called from a father component, father from grandfather and so on until we arrive at the main component that started it all – the most commonly called, App components.
Why is the separation good?
- If you have a problem with one the components, it is very easy to find the one that is causing the error, and fix it. You don’t need to go through thousands of lines of code, you just open the specific component, be it 10 lines or 100 lines of code, and fix the error that is crashing your entire application.
- Components are reusable. You can use the same components of a list in thousands more other applications, and not only the one you build – there is a huge community of React’s developers that share components they created.
That was a very small intro to the React’s world, I hope you enjoy reading that.
There is much more to go through and much more understand before being a React developer, but it is a start.
The technologies in our field, are moving so fast, that it is literally impossible to learn them all. What is 3 years old, called already “Not new”, But I think and hope, that React is here to stay for a long time? Facebook love innovating, and I believe they will continue doing so with React. Especially with the upcoming release of React Fiber.
This post is also available in: עברית