Introduction
If you read any article about web development or any front-end developer job description these days, you most likely get the impression, that everybody wants you to know JS library called React.js. Since I’ve read many articles about React and watch some online courses in the last couple of weeks, I decided to write a post about this popular library.
“Ok, so what’s this fancy thing that everybody is talking about?”
Put it simply, React.js is a JavaScript library developed by Facebook. It lets you divide your app into user interface (UI) components. However, this is nothing new since React is just one of the many libraries that let you build components with JS. You can use other JS frameworks such as Angular or Ember for this as well. However, in contrast to Angular, which is a full-fledged JS framework, React is only a view layer. This means that it doesn’t care about routing, data flow or deployments. You need to use other libraries to be able to use these functionalities in React (e.g. Redux, React-Router). React is thus a simple composable component library.
“Hmm, ok. But what’s so special about React? ”
One of its greatest benefits is its speed and responsiveness that is related to the way how it manipulates the DOM. It uses the virtual DOM that compares the current state of the DOM to the updated state and determines the most efficient way to update the DOM. In contrast, jQuery updates the whole DOM every time, the state is changed (e.g. the button is clicked). Furthermore, React enables you to easily nest components inside other components and to pass data from the parent component down the child components via the so-called props.
Syntax
React code be written in the pure JavaScript or in so-called JSX syntax. JSX is JavaScript syntax extension that looks like HTML. In other words it extends ECMAScript in a way that HTML-like text can co-exist with JavaScript code. You can simply write HTML and JS in one file. In JSX you can write tags just as you were writing them in a HTML file. However, if you are writing JS code in JSX file, you need to surround your code with curly braces {}.
JSX must be always transformed into JavaScript by a preprocessor (typically by Babel.js). Otherwise, the JS engine won’t be able to understand this code. If you are writing your React code in ES6 syntax, Babel will translate it into ES5 as well.
As I already mentioned, you can write your React code with JSX or with pure JS. However, JSX syntax is easier to write and read and is more popular as well.
Example of a React code in JSX syntax:
The same code transformed by Babel into pure JS syntax:
As you can see JSX is basically HTML syntax written in the JS code. In this way, the React differs from the Angular and Knockout frameworks, where you write JavaScript code into HTML which has some disadvantages. Primarily, it is difficult to debug it because, for example, if you make a typo in the mark-up, the app silently fails because HTML is not strictly parsed as JS is. On the other hand, React is written in JSX which is the JavaScript. This means that if you make a typo in JSX code, you will get an error referencing the particular line of code.
React. JS is :
“Ok, so what’s this fancy thing that everybody is talking about?”
Put it simply, React.js is a JavaScript library developed by Facebook. It lets you divide your app into user interface (UI) components. However, this is nothing new since React is just one of the many libraries that let you build components with JS. You can use other JS frameworks such as Angular or Ember for this as well. However, in contrast to Angular, which is a full-fledged JS framework, React is only a view layer. This means that it doesn’t care about routing, data flow or deployments. You need to use other libraries to be able to use these functionalities in React (e.g. Redux, React-Router). React is thus a simple composable component library.
“Hmm, ok. But what’s so special about React? ”
One of its greatest benefits is its speed and responsiveness that is related to the way how it manipulates the DOM. It uses the virtual DOM that compares the current state of the DOM to the updated state and determines the most efficient way to update the DOM. In contrast, jQuery updates the whole DOM every time, the state is changed (e.g. the button is clicked). Furthermore, React enables you to easily nest components inside other components and to pass data from the parent component down the child components via the so-called props.
Syntax
React code be written in the pure JavaScript or in so-called JSX syntax. JSX is JavaScript syntax extension that looks like HTML. In other words it extends ECMAScript in a way that HTML-like text can co-exist with JavaScript code. You can simply write HTML and JS in one file. In JSX you can write tags just as you were writing them in a HTML file. However, if you are writing JS code in JSX file, you need to surround your code with curly braces {}.
JSX must be always transformed into JavaScript by a preprocessor (typically by Babel.js). Otherwise, the JS engine won’t be able to understand this code. If you are writing your React code in ES6 syntax, Babel will translate it into ES5 as well.
As I already mentioned, you can write your React code with JSX or with pure JS. However, JSX syntax is easier to write and read and is more popular as well.
Example of a React code in JSX syntax:
1 | var greetings = <div>Hello World</div> |
The same code transformed by Babel into pure JS syntax:
1 2 3 4 5 | var greetings = React.createElement( "div", null, "Hello World" ); |
As you can see JSX is basically HTML syntax written in the JS code. In this way, the React differs from the Angular and Knockout frameworks, where you write JavaScript code into HTML which has some disadvantages. Primarily, it is difficult to debug it because, for example, if you make a typo in the mark-up, the app silently fails because HTML is not strictly parsed as JS is. On the other hand, React is written in JSX which is the JavaScript. This means that if you make a typo in JSX code, you will get an error referencing the particular line of code.
React. JS is :
- a simple composable component library
- fast and responsive
- easy to debug
See you in the next post…
If you like this post, or if you have any suggestions or critique, feel free to write a comment below. I will much appreciated that it.
No comments:
Post a Comment