Top 10 Basic Fundamental React.js

today I expend basic fundamental of React.js. React is a JavaScript “library”. It is not exactly a “framework”. Frameworks are not flexible, although some claim to be. A framework usually wants you to code everything a certain way. If you try to deviate from that way, the framework usually ends up fighting you about it. Frameworks are also usually large and full of features. React was created by jordan walke a software engineer working for Facebook, React was first deployed Facebooks news feed in 2011 and on Instagram in 2012.

  • What is React ?
    react is an open-source frontend JavaScript library which is used for building user interfaces especially for single page applications for handing view layer for web and mobile apps .
  • What is a DOM?
    DOM is “Document Object Model”. It’s the browsers’ programming interface for HTML (and XML) documents that treats them as tree structures. The DOM API can be used to change a document structure, style, and content.
  • What major features of react ?
    1. it user Virtual DOM instead real DOM considering that real DOM manipulations are expensive.
    2. supports server-side rendering
    3. follows unidirectional data flow or data binding.
    4. uses reusable composable UI components to develop the view
  • What is JSX ?
    JSX is a XML-like syntex extension to ECMAScript . in the example below text inside <h2> tag return as JavaScript function to the render function.

How to create components in React?

  • There are two possible way to create a components .
    1. Function components : this is the simplest way to create a component.
    those are pure JavaScript functions that accept props object as first parameter and return react elements .

2. Class components : you can also use ES6 class to define a component . the above function component can be written as :

  • Why is React named “React” anyway?
    When the state of a React component (which is part of its input) changes, the UI it represents (its output) changes as well. This change in the description of the UI has to be reflected in the device we are working with. In a browser, we need to update the DOM tree. In a React application we don’t do that manually. React will simply react to the state changes and automatically (and efficiently) update the DOM when needed.
  • The term “component” is used by many other frameworks and libraries. We can even write web components natively using HTML5 features like custom elements and HTML imports.

Front end developer. React.js lover.