React Fundamentals what you need to know

3 min readMay 7, 2021

What is React?

When we are starting work with React, two things create confusion that is React is a Library or Framework. But today I will try to clear this confusion,

React is a javascript library. It’s not a FrameWork.Because When we working with react we will often need to use more libraries with react from any solution but react does not assume anything about other parts of the solution. Why we don’t consider framework because it has much smart design are already made for you and it usually wants you to code everything in a certain way if you try to deviate from this way framework ends up fighting about you want it.

First React Example

when we build UIs with React we use properly javascript extensions that’s called JSX. There are two core API methods in a React Application such as ReactDom.render and React.createElement .ReactApplication cannot exist without these two methods.

ReactDom.render

This is the entry point of React application it has 2 arguments the first argument is React element what things we rendered to the browser.

the second argument where we render the react element that is a browser.

React.createElement

In React we represent the DOM elements with objects using calling to React.createElement .There are three arguments such as

’tag’
‘attribute’ (like id, href,title)
content of the DOM element

Virtual DOM

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 ReactDOM. This process is called reconciliation.

`defaultProps`

defaultProps can be defined as a property of components, 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
  }

JSX is not HTML

JSX is not understood by browsers. If you try to execute the Button function in a regular browser console, it'll give error this JSX part:

in React browsers understood with React.createElement API calls.

JSX is basically a compromise. Instead of writing React components with React.createElement syntax, we use smaller syntax to HTML and then use a ‘“transpiler” compiler to translate it into a call React.createElement API .

it’s absolutely important for you to keep this in mind while building React components. You are not writing HTML. You are using a JavaScript extension to return function calls that create React elements (which are essentially JavaScript objects)

Expressions in JSX

In React we write JSX expression using a pair of curly brackets.

const RandomValue = () => (
  <div>
    { Math.floor(Math.random() * 100) }
  </div>
);ReactDOM.render(<RandomValue />, mountNode);

It works look like a function that means this expression includes curly brackets anything return value. you cannot include a regular if-statement but a ternary expression is okay when we declare the variables in the react components is also an expression.

How rendering works

Every setState() call informs React about state changes. Then, React calls render() method to update the components representation in memory (Virtual DOM) and compares it with what’s rendered in the browser. If there are changes, React does the smallest possible update to the DOM.

Child components know that they need to re-render because their props changed.

What exactly are hooks?

A hook in a React component is a call to a special function. All hooks functions begin with the word “use”. Some of them can be used to provide a function component with stateful elements (like useState), others can be used to managed side effects (like useEffect) or to cache/memoize functions and objects (like useCallback). Hooks are very powerful and sky is the limit when it comes to things you can do with them.

React hook functions can only be used in function components. You can’t use them in class components.