● React JS is front end Javascript library developed by Facebook, Instagram and other developer communities.
● It helps to recreate usable components.
● React JS offers simple programming model and enhanced performance.
● React JS is fast then most of the Javascripts. Applications made in React can handle complex updates and still feel quick and responsive.
● React JS is modular in nature. Instead of writing large, dense files of code, it can be written in many smaller, reusable files. React's modularity can be a beautiful solution to JavaScript's maintainability problems.
● React JS is scalable. Large programs that display a lot of changing data are where React JS performs best.
● React JS is very flexible. It can be used for interesting projects that have nothing to do with making a web app. People are still figuring out React's potential. There's room to explore.
● It can render at server side using node.
Following are the key features:
● JSX(Javascript Syntax Extension)
● Components
● Unidirectional data flow
● Open source
● It uses virtual DOM which improves the performance of the applications as it is faster.
● It can be run on both client and server sides.
● Scalable, readable and maintainable.
JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML. Here syntax extension means that it is not usual or valid Javascript so system can't read it.
So in order to make it read the file which has JSX code has to be compiled first via JSX compiler before it reaches to web browser. This compiler will convert the JSX code to Javascript code which can be very well read by the browser.
A basic unit of JSX is called a JSX element. This JSX element looks exactly like HTML! The only noticeable difference is that you would find it in a JavaScript file, instead of in an HTML file. Example of simple JSX element is:
Hello testfry.com
JSX elements are treated as JavaScript expressions. They can go anywhere where JavaScript expressions can go. That means that a JSX element can be saved in a variable, passed to a function, stored in an object or array. Also JSX elements can have attributes, just like HTML elements.
Here is the code of several JSX elements:
const myArticle = { art1: test 1 , art2:test 2 , }
Following are the key reasons why JSX is being used:
● It is faster
● It is type-safe
● Easy to write templates.
Sample abc.jsx file:
import React from 'react'; class App extends React.Component { render() { return ( Hello); } } export default App;
import React from 'react'; class App extends React.Component { render() { return ( ); } } export default App;{7+10}
This is the example of expression. The output will be 17
These are the components that don't have any state i.e. where we are creating Header and Content separately and adding it inside JSX tree in App component.
These are the components where we are creating Header separately and instead of content tag we are creating table and tbody elements.
It is a place where data comes from. It should be simple and should have minimum number of stateful components.
The major difference is that props are immutable whereas state is not.
It updates the UI. You need to send the element to ReactDOM.render(). These elements are immutable.
Its used for selection of text, controlling focus and triggering animation. It helps in getting the reference of DOM elements.
It is one of the method of component API which is used to update the state of the component. That is it add changes to the original state of the component.
It is one of the method of component API which is used to update the component manually.
It is one of the method of component API which is used to manipulate DOM.
Following are the methods:
● componentWillMount
● componentDidMount
● componentWillReceiveProps
● shouldComponentUpdate
● componentWillUpdate
● componentDidUpdate
● componentWillUnmount
These are cross browser wrapper around native events. All the event handlers pass instance of SyntheticEvent.
It is container for application state and logic. It supports simple javascript objects.
Following are the key elements of flux:
● Actions
● Dispatcher
● Store
● View
It is the container for Javascript applications. It allows live code editing.
These are very important functions which prevents this bug.