React Abbreviation: Single Page Application
A single-page application is an appliance that loads an HTML page. Also, all the mandatory assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or following pages do not need a trip to the server which implies the page is not reloaded.
Although you may create a single-page submission in React, it is not a need. So react can also be utilized for improving tiny parts of accessible websites with additional interactivity. The code written in React can coexist calmly with markup rendered on the server by something like PHP. Also, this is possible with other client-side libraries. In fact, this is precisely how React is being implemented on Facebook.
ES6, ES2015, ES2016, etc
All these acronyms refer to the main recent versions of the ECMAScript Language Specification standard In these JavaScript language is a part of ECMA Script. The ES6 version mostly known as ES2015 includes many additions. The earlier versions such as let and const statements, classes, template literals,and arrow functions.
Compilers
A JavaScript compiler takes JavaScript code, modifies it, and returns JavaScript code in a dissimilar format. So the most common use module is to take ES6 syntax and convert it into syntax that older browsers are competent in interpreting. Babel is the compiler most frequently used with React.
Bundlers
Bundlers take CSS code and JavaScript written as separate modules sometimes hundreds of them. Then merge them together into some files better optimized for the browsers. So some bundlers generally used in React applications include Browserify and Webpack.
Package Managers
Package managers are apparatus that permits you to handle dependency in your project. Yarn and NPM are two package managers mostly used in React applications. And both of them are customers for the same NPM package registry.
CDN
CDN means for Content Delivery Network. CDNs deliver cached, static information or data from a network of servers across the mighty globe.
JSX
JSX is a syntax addition to JavaScript. It is the as same as the template language. But, besides this, it t has the absolute power of JavaScript. JSX gets mixed to React. CreateElement() calls that return plain JavaScript objects known as “React elements”. To get a vital opening to JSX see the documents here and locate a more in-depth seminar on JSX here.
React DOM has camel Case property naming meeting instead of HTML attribute names. For example, tab index will become tab Index in JSX. The attribute class is also specified as className since class is a kept word in JavaScript:
const name = ‘Clementine’;
ReactDOM.render(
<h1 className=”hello”>My name is {name}!</h1>,
document.getElementById(‘root’)
);
[Courtesy-reactjs.org]
React elements are the constructing blocks of React applications. One could confuse elements with a more vastly known concept of “components”. An element explains what you want to notice on the screen. React elements are absolute.
const element = <h1>Hello, world</h1>;
[Courtesy-reactjs.org]
Generally, elements are not utilized directly, but get returned from components.
Components
React components are petite, reusable pieces of code. React element is returned to be rendered to the page. The simplest description of React component is a main JavaScript task that returns a React element:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
[Courtesy-reactjs.org]
Components could also be ES6 classes:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
[Courtesy-reactjs.org]
Props
Props are inputs to a React constituent. They are data agreed down from a parent component to a child component.
Remember that props are actually read-only. They should not be customized in any way:
// Wrong!
props.number = 42;
If you want to modify some value in reply to network response or a user input, use stateinstead.
Props.children
Props.children is accessible on every component. It includes the content among the opening and closing tags of a component. For example:
<Welcome>Hello world!</Welcome>
[Courtesy-reactjs.org]
The string Hello world! Will be accessible in props.children in the Welcome component:
function Welcome(props) {
return <p>{props.children}</p>;
}
[Courtesy-reactjs.org]
For components specified as classes, use this.props.children:
class Welcome extends React.Component {
render() {
return <p>{this.props.children}</p>;
}
}
[Courtesy-reactjs.org]
Lifecycle Methods
Lifecycle methods are norm functionality that gets executed while the various phases of a component. There are ways accessible when the component gets inserted and created into the DOM (mounting), when the module updates, and when the component gets uncounted or distant from the DOM.
Controlled vs. Uncontrolled Components
React has two various approaches to managing with form inputs.
An input form element of which value is controlled by React is called a controlled component. When a user enters data into a controlled constituent a change event handler is triggered and your code decides whether the input is suitable (by re-rendering with the rationalized value). If you will not re-render then the form element will be unchanged.
An uncontrolled component functions like form elements do outside of React. When a user gives data into a form field (a dropdown, input box, etc) the efficient data is shown without React wanting to do anything. Furthermore, this also implies that you can’t push the field to have a particular value.
In most cases you should make use of controlled components.
Keys
A “key” is a good string attribute you need to comprise when creating arrays of elements. Keys help React identify which matter has changed, are removed, or are added. Keys should be given to the elements inside an array to provide the elements a steady identity.
It only needs to be sole among sibling elements in a similar array. They don’t desire to be unique across the full application or even one component.
Do not pass something like Math.random() to keys. It is mandatory that keys have a “stable identity” across re-renders so that React can identify when items are removed, added, or re-ordered. Supremely, keys should communicate to stable and unique identifiers approaching from your data, for example, post.id.
Refs
React chains a special attribute that you can link to any component. The ref attribute can be an object created by React.createRef () function or a callback function, or a cord (in legacy API). When the ref trait is a callback occupation, the basic DOM issue or class case on the base of the category of the element as it’s disagreeing. This permits you to have straight access to the DOM element or constituent example.
Use refs cautiously. If you search yourself generally using refs to “make things happen” in your app, think getting more recognizable with the top-down data flow.
Events
Managing events with React elements have some of the differences:
- React event handlers are named by camelCase, fairly than lowercase.
- With JSX you pass a purpose as the event handler, fairly than a string.
Reconciliation
When a component’s state or props change, React decides whether an actual DOM update is important by comparing the recently returned element with the earlier rendered one. When they are not balanced, React will update the DOM. Now, this process is called “reconciliation”.