Want to be a React Developer? Know this basic.

What is React and why we call it a library, not a framework?

One crucial distinction between libraries like React and frameworks like Ember.js and AngularJS is that React is concerned only with rendering the UI and leaves many things up to each project to put together. This means you have the ability to implement your other favourites libraries like Redux, MobX for state management and Axios for fetching data from API and other tools for testing. React only cares about the user interface not the whole production. That is React is so popular today.

Time-Saving:

In the case of React, the app development companies can reuse the code components at distinct levels at any point of time. Besides, the components are isolated to each other and changes in one does not affect the other, which makes it easier to manage the updates.

Quick Development:

React allows the developers to reuse the existing code and apply hot reloading into the process. This approach not only improves app performance but also accelerates the development speed.

Faster Testing:

React extensively uses Redux which cut down the hassle of storing and managing component states in large-sized and complex applications with enormous dynamic elements.

Code Stability with One-directional data-binding:

ReactJS let the developers work directly with the components and employ downward data binding to ensure that the parent entities do not get affected by the changes of child entities. This approach makes the code stable and supports the idea of development in the future.

import React from 'react';
import ReactDOM from 'react-dom';

const myelement = React.createElement('h1', {}, 'I am not using JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

//Output: I am not using JSX.
import React from 'react';
import ReactDOM from 'react-dom';

const myelement = <h1> I am using JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));
//output: I am using JSX!

Presets in Babel:

Babel presets are config details to the babel-transpiler telling it to transpile it in the specified mode. We need to use presets that have the environment in which we want the code to be converted. For example, the es2015 preset will convert the code to es5. Preset with value env will also convert to es5. It also has additional features/options. In case you want the feature to be supported on recent versions of browsers, babel will convert the code only if there is no support of features on those browsers.

Virtual Dom and Real Dom
import PropTypes from 'prop-types';

class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}

Greeting.propTypes = {
name: PropTypes.string
};
class CustomButton extends React.Component {
// ...
}

CustomButton.defaultProps = {
color: 'blue'
};
render() {
return <CustomButton /> ; // props.color will be set to blue
}
render() {
return <CustomButton color={null} /> ; // props.color will remain null
}

Using the Production Build :

if you’re benchmarking or experiencing performance problems in your React apps, probably you are not using the minified production build.

npm run build
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

Brunch:

For the most efficient Brunch production build, we can install the terser-brunch plugin:

npm install --save-dev terser-brunch

Then, to create a production build, add the -p flag to the build command:

brunch build -p

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store