Top Things Every React.Js Beginner Should Know
React.js is presently the most hyped front-end framework(view). In this article we are trying to list out things every React.js beginner should know. We have pointed out top five reasons why React.js can be confusing. So let us get started.
IT’S JUST A VIEW LIBRARY
Let us get the basics out of the way. React is not another MVC framework, or any other kind of framework. It is just a library for rendering your views. If you are coming from the MVC world, the developer need to realise that React is just the ‘V’, part of the equation, and they need to look elsewhere when it comes to defining their ‘M’ and ‘C’, otherwise the developer is going to end up with some really disgusting React code.
JSX IS NOT HTML OR XML
React is meant at being developer friendly. It uses an XML-like syntax called JSX. It will appear like normal HTML, but has few catches. Class is a reserved keyword so the developer has to use className, this means the developer cannot use their HTML code directly, they have to do a bunch of replacements.
## Normal HTML
<div class=”row” … >
## Syntax for React
<div className=”row” …>
There are other catches the developer need to remember, they cannot use independent HTML tags such as <br> and <input>, it is required to close them like <br/> and <input />
MULTIPLE SYNTAX OPTIONS
Javascript is developing very fast with the advent of these new front-end frameworks. The current syntax is called as ES6, which is a bit different than the older version. This can be very confusing if the developer does not know this. In your quest to find something you may find resources which can be following the older syntax or the newer one.
## Older Syntax
var aComponent = React.createClass({
function: render() { … }
});
## Newer ES6 Syntax class ComponentB extends React.Component
{ render() { … } }
STATES & PROPS
Dynamic apps must need to pass data around the system. In React, data movement happens mostly among components and external services that provide the original data (eg HTTP, localStorage).
Props are immutable and dumb which means they can only be passed from parent components down and it cannot be changed. This poses a challenge because, modern applications do not rely on having all of its states ready on page load. Ajax or Events could happen and when data returns, someone needs to be responsible for making updates. This is where React states comes in.
COMPONENT INTERACTION
What if we had a button (or more) in a child component that incremented and decremented an integer managed in a parent component. What do we do?
React component interaction comes in two forms i.e., flow of data from parent to child component and flow of data from child to parent.
To achieve child to parent data flow in react, we use handlers passed in to the child component through the parent component as props. The parent knows that such activity could occur in its child so it sets up a handler when the activity occurs.