Fundamental Core Concepts of React

In the fast-evolving world of web development, React remains a cornerstone for building dynamic and performant user interfaces. Whether you're a seasoned developer or just starting out, understanding React's core concepts is essential for leveraging its full potential. In this article, we'll explore the fundamental principles of React, from its library status to the power of hooks, and provide you with a clear foundation to enhance your React skills. Let’s dive in! 🚀

1. Is React a Framework or Library?

React is a JavaScript library, not a framework. Unlike frameworks, which provide a comprehensive set of tools and enforce a particular way of building applications, React focuses on a specific aspect—UI rendering. This makes React highly flexible and popular, as it follows the Unix philosophy of doing one thing and doing it well.

2. Virtual DOM

The DOM stands for Document Object Model in simple words representing the UI of an application. Every time when we change the UI, the DOM gets updated to represent that change. The DOM is represented as a tree data structure. When we change the UI, the DOM re-render and updates its children. The re-rendering of the UI makes application slow.

For this solution we use Virtual DOM. The virtual DOM is only a virtual representation of the DOM. When the state of application changes, the Virtual DOM gets updated instead of the real DOM.

Virtual DOM every time creates a tree and elements are represented as a node. If any of the elements changes a new virtual DOM tree is created. The new tree is then compared or “diffed” with the previous tree.

In this image, the red circles represent the nodes that have changed. These nodes represent the UI elements that change state. Then compared the previous tree and current changed tree. Updated tree is then batch updated to the real DOM. This makes React standout as a high performance JavaScript library.

In summary:

1. The entire virtual DOM gets updated.
2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
3. The changed objects, and the changed objects only, get updated on the real DOM.
4. Changes on the real DOM cause the screen to change.

3. JSX

JSX (JavaScript XML) allows you to write HTML-like code in React. It converts HTML tags into React elements using React.createElement( component, props, …children) function.

For example:
JSX code:

<MyText color="red">
  Hello, Good Morning!
</MyText>

This example compile into:

React.createElement(
  MyText,
  { color: 'red' },
  'Hello, Good Morning!'
)

Note: User-defined components must start with a capital letter. Lowercase tags are treated as HTML elements.

4. Props in JSX

Props can be specified in several ways in JSX:

JavaScript Expressions as Props:

<SumComponent sum={1 + 2 + 3} />

Here, props.sum evaluates to 6.

String Literals:

<TextComponent text={‘Good Morning!’} />

<TextComponent text=”Good Morning!” />

Both examples above are equivalent.

Props Default to “True”
If we do not pass a value for a prop, it defaults to true.

For example,

<TextComponent prop/>

<TextComponent prop={true} />

Both examples above are equivalent.

5. Class Components

Components in React can be defined as classes or functions. Here's how to define a class component:

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

6. The Component Lifecycle

Components have lifecycle methods that you can override to run code at specific stages:

Mounting: When a component is being created and inserted into the DOM.

• constructor()
• render()
• componentDidMount()

Updating: When props or state change.

• render()
• componentDidUpdate()

Unmounting: When a component is being removed from the DOM.

• componentWillUnmount()

7. Class Properties

defaultProps allows you to define default values for props:

class MyText extends React.Component {
  // Component code here
}

MyText.defaultProps = {
  color: 'gray'
};

If props.color is not provided, it defaults to 'gray'.

8. Prop-Types

We can use prop-types for checking types of passed properties of components. It gives errors, when they don’t match.

import PropTypes from 'prop-types';

const studentPropTypes = {
  studentName: PropTypes.string,
  id: PropTypes.number
};

const props = {
  studentName: 'Asima',
  id: 'hi' // Invalid
};

PropTypes.checkPropTypes(studentPropTypes, props, 'prop', 'MyComponent');

This will warn about the type mismatch for id.

9. Optimizing Performance

React is designed for performance, but you can further optimize it:

Using Production Build:

npm run build

This creates a production build with optimizations.

Minimize Source Code: Be cautious with changes to React's source code.

Code Splitting: Bundle JavaScript code into chunks to load as needed.

10. React Hooks

Hooks are functions that let you use state and other React features in function components. The two most popular hooks are:

useState: Adds state to function components.

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useEffect: Manages side effects in function components.

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

React has continually evolved to meet the demands of modern web development, and mastering its core concepts is crucial for building efficient, scalable applications. From understanding how React differentiates itself as a library to harnessing the power of hooks for functional components, these fundamentals will set you on the path to React proficiency.

As you continue to explore and implement React in your projects, remember that staying updated with the latest practices and features will keep you ahead in the ever-changing tech landscape. If you found this article valuable, don’t forget to give it a like and share it with fellow developers eager to deepen their React knowledge!

Thank you for reading, and happy coding! 🌟