React — Introduction & Basics
What is React ?
React is a free and open-source front-end JavaScript library which is used for building an interactive and dynamic user interfaces by combining different component in a single page. More popularly React is used in the development of single-page(Where real-time data reflects & that does not require page reloading during use ) or mobile applications. React focuses on the user interface portion of a web application only.
Why React is popular ?
React is easy to learn as it requires basic knowledge of CSS, HTML and JavaScript. React has gained popularity because not only it is easy to learn, but it helps to build user interfaces with lightweight, SEO-friendly, and fast-loading single-page applications. In React extensive code reusability is supported. It follows component-based architecture that makes react very much easy to maintain. We can use one component many times in an application if needed.
For example, code for Navbar can be written once and can be used in every page of our application.
Get Chetna Porwal’s stories in your inbox
Join Medium for free to get updates from this writer.
In React everything is component, the complete page is divided into small parts which merged together to complete the view. React basically deals with View part of MVC(Model-View-Controller) Architecture
React vs Angular
- React is a JavaScript library & Angular is a completely developed front-end framework.
- React can be used as a UI(User Interface) library to render elements, without enforcing a specific project structure, and that’s why it’s not strictly a framework but Angular projects are structured into Modules, Components, and Services.
- React is developed and maintained by Facebook, and it’s used internally in many of their projects & Angular is developed by Google.
- Angular uses two-way (bi-directional) data binding while React uses one-way (unidirectional) data binding computations. For AngularJS, this means that changing a UI element will also change the corresponding model’s state as well. Conversely, if you change the model state, then the UI element will respectively change. However, with React’s one-way data binding approach, the model state is initially updated, and finally, it renders the change in the UI element. But, here a change in the UI element will NOT change the model state.
- React code is tested using Jest & Angular is tested using a testing framework called Jasmine.
- React is easier to understand but has more dependencies on external integrations to reach its full potential & Angular can provide a decent comprehensive solution without any need of external integrations.
Online playgrounds for React
If you’re interested in playing around with React, you can use an online code playground. Do check Hello World template on CodePen, CodeSandbox, or Stackblitz.
Prerequisites
To start with react you need to have familiarity with HTML and JavaScript, but you should be able to follow along even if you’re coming from a different programming language. To understand basic JavaScript, I will be creating a JavaScript refresher guide after this to grab decent understanding on JS basic concepts.
Woooohhh………Let’s explore React together in this journey.
check out my next article here : features of React
