Welcome to another interesting topic and this will help you
to master the art of ReactJS and be ready for the future web-development
.Companies like Facebook & Instagram are already using ReactJS to build
dynamic user interfaces for better user experience. This blogpost will cover
from basic to advance including Flux.
React JS is a JavaScript library or framework for creating UI
(user interfaces) by Facebook & Instagram. We can think of react as view in
Model View Controller. React gives you a template language and some function
hooks to essentially render HT.
What is
React JS?
Before we start, I want to share a very important tip, “This
blogpost along with the course is designed for those who prefer to do and learn
by self-exploring “.So what is ReactJS?
React is a declarative, flexible &efficient library for
building user interfaces. It gives you to compose complex UIs from small code when
we call components.
Why we
should be using React?
User Interface code is readable and maintainable
Code Reusability
React can be rendered on both client & server-side.
React uses the concept called virtual DOM that selectively
renders subtrees of nodes upon state changes.
Downloading & Installing:
React Virtual DOM
Step 1: React runs a defining algorithm which identifies what exactly has changed
Step 2: Reconciliation where it updates the documents object model with the results of
difference.
Features
of ReactJS
·
JSX
·
Virtual
DOM
·
Event
Handling
·
Performance
·
React
Native
·
One Way
Data Binding
JSX
JSX is markup syntax just like
.HTML, it is basically a combination of JavaScript +XML. It makes writing React
components, the building blocks easier. This is a great choice for many web developers.
It is used with React to describe what the user interface should look like.
JSX helps in making the code is
easier to understand and debug as it avoids usage of JS DOM structures which
are rather complex.
Virtual DOM
A virtual DOM object is a representation
of a DOM object, it will create a copy of the original DOM.
DOM (Document Object Model) treats an XML or HTML document as a tree structure in which each node is an object representing a part of the document.
Event
Handling
All browser's native events are
wrapped by the instances of the synthetic events. React has its own event system
which is fully compatible with the W3C model. Virtual DOM is the exact copy of real
DOM.
Performance
React was one-way data binding
with application architecture called controls. ReactJS can help update the view for the user, Flux can
control the application workflow.
React Native
React Native is a custom render
to React. React Nature uses native components instead of web components .If
you already know about React. You still need to learn components specific to
React Native.
One Way Data Binding
In React everything is component.
Since component logic is written in JavaScript instead of template. React one-way data binding keeps everything fast. When designing an app you often nest
child components within parent components.
Extensions
React has many extensions for
complete application support. It provides server-side rendering. It can be
extended with Flux and Redux.
What is the flux?
Flux is the application architecture
that Facebook uses for building web applications
Flux implement unidirectional flow makes it easier to deduce what’s going on.
Dispatcher when
an action triggers the dispatcher will get notified.
Store Dispatcher is dealing in
action the store is listening to it.
View gets updated when
the store changes its state.
Components states and props
In react everything component, since component logic is written in JavaScript instead of templates. Components are the building blocks of any react application. In this, a single application consists of multiple components.
Components
are like a function that returns HTML elements.
For e.g.
[code]
import React from “react”;
class
Simple extends React.Components{
state={};
render(){
return(
<div>
<h1>Hello</h1>
</div>
);
}
}
[/code]
In the
above example, a component is implemented as a javascript class having a render
method.
State
It is
the data that we want the component to render.
Props : These are properties that allow us to pass arguments or data to components.
For e.g.
[code]
App.js
import React from ‘react’;
Class App extends
React.Component{
render(){
return{
<div>
<h1>{this.props.Mobprop}</h1>
<h2>{this.props.scooterprop}<h2>
[code]
Main.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App.jsx’;
ReactDOM.render(<App
computerProp=”icore5” scooterprop =”100cc”;
Document.getElementById(‘app’));
Export default App;
What are the Prerequisites needed to start with React?
One should be familiar with
programming concepts like objects, functions, classes and basic knowledge of
Javascript and a little bit of HTML.
Want to explore more visit our website
http://skillbakery.com/courses/master-react-js.html
No comments:
Post a Comment