React Core Concept For Beginners

React (also known as React.js or ReactJS) is an open source, front-end, JavaScript Library for building user interfaces or UI components

1. Create React App

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

npx create-react-app my-app

2. React is all about components

Components is the main key of react .it is the main power of react .we can use components in different pages in react site .we can use the same component in different pages .this is the most significant power of react i think

The first letter of a components should be written in uppercase and it wrap with a arrow function ..

Components are in two types, Class components and Function components

3. React Hooks

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. Hooks are backwards-compatible. This page provides an overview of Hooks for experienced React users.

Hooks solve exactly that problem. Hooks let you use React features (like state) from a function — by doing a single function call. React provides a few built-in Hooks exposing the “building blocks” of React: state, lifecycle, and context. Always use Hooks at the top level of your React function. By following this rule, you ensure that Hooks are called in the same order each time a component renders.

4. React Event Handler

When handling events inside React elements, there are two very important differences from the way we do so with the DOM API:

  • All React elements attributes (events included) are named using camelCase, rather than lowercase. It’s onClick, not onclick.
  • We pass an actual JavaScript function reference as the event handler, rather than a string. It’s onClick={handleClick}, not onClick="handleClick".

5. JSX Spread Attribute

The … operator (or spread operator) is already supported for arrays in ES6. We're also pushing to get the spread operator for object properties in ES7.

var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';

Merging two objects can be expressed as:

var ab = { ...a, ...b }; // merge(a, b)

6. Default Props

Default props can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but not for null props. For example:

class CustomButton extends React.Component {
// ...
}
CustomButton.defaultProps = {
color: 'blue'
};

If props.color is not provided, it will be set by default to 'blue':

render() {
return <CustomButton /> ; // props.color will be set to blue
}

If props.color is set to null, it will remain null:

render() {
return <CustomButton color={null} /> ; // props.color will remain null
}

7. Virtual Dom in React

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as React DOM. This process is called reconciliation. … They may also be considered a part of “virtual DOM” implementation in React.

Like the actual DOM, the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React’s render() method creates a node tree from React components and updates this tree in response to mutations in the data model, caused by actions.

8. Optimizing Performance in React Application

There are some paths to optimize the performance in react application .we should follow some instructions to full fill the increasing the performance

They are :

  • Use the Production Build means npm run build .if your app is created by npm create-react-app
  • Single-File Builds for offer production-ready versions of React and React DOM as single files
  • For the most efficient Brunch production build, install the terser-brunch plugin.
  • By using Webpack v4+,it will minify your code by default in production mode.

9. Prop-types

Runtime type checking for React props and similar objects. When you migrate components to use the standalone prop-types, all validator functions will start throwing an error if you call them directly. This makes sure that nobody relies on them in production code, and it is safe to strip their implementations to optimize the bundle size.

npm install --save prop-types
import PropTypes from 'prop-types'; // ES6
var PropTypes = require('prop-types'); // ES5 with npm

10. Working with multiple components in React

We can use many components in a single page application in react ,this is more useful than any other library.

Specifically you can separate the different concerns of your app however you please simply by building new components. By building a custom component library for your application, you are expressing your UI in a way that best fits your domain.

  • Map() takes a list and returns a transformed new list
  • Escape the JavaScript within JSX using {}
NumberList (props) => {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);

JavaScript Lover