React JS Introduction

What is React JS?

React JS is an open source JavaScript library which is used to build user interfaces for single-page web applications. React JS is developed and maintained by Facebook. The single-page applications (SPA) does not load a new page when user clicks a button etc. It does not reload the page when there is change in any component of the page and so it gives the feel of desktop application. The user does not feet the page reload experience as is felt in normal webpages. React JS is basically concerned with rendering data to the DOM. Many enterprise applications are using React JS e.g. Netflix, Facebook, Instagram etc. have used React JS. 

React JS was created by Jordan Walke, a Software engineer at Facebook and first time used in 2011 by Facebook and it was released in public in 2013. React JS version is updated time to time.

You can use the following link to get started with React JS.
https://reactjs.org/docs/getting-started.html
The base URL can be used to get documentation etc. of the React JS.

Some features of React JS:

• React JS is a JavaScript library.
• React JS is used to design UI of the web pages.
• React JS is used to create Single Page Applications(SPA).
• React JS is mainly used to create reusable UI component such as header and footer.
• React JS is free and open source JavaScript library.
• React JS is not framework.
• React JS has large community on GitHub.
• React JS is created by Facebook.
• React JS provides state management. It means that when page redirection occurs, the state is maintained.
• React JS allows routing features.
• React JS creates a virtual DOM in the memory. Browser creates DOM when it renders the web page.
• React JS creates its own DOM, called virtual DOM; it does not work upon browser DOM directly.
• React JS uses component based architecture.

What are different packages in React library?

In the React ecosystem, several core packages and libraries complement the main React library ('react' and 'react-dom'). These packages extend the functionality of React or provide additional tools to help with development. Here are some of the most commonly used packages in the React library ecosystem:

1. react: The core React library for building user interfaces using components.
2. react-dom: Provides DOM-specific methods that can be used at the top level of a web application to enable React to interact with the DOM.
3. react-router: A popular routing library for React applications that enables navigation between different components.
4. redux: A predictable state container for JavaScript applications. It helps manage the application's state in a more organized and predictable way.
5. react-redux: Official React bindings for Redux, providing integration between React components and Redux state management.
6. axios: A promise-based HTTP client for making HTTP requests in JavaScript applications. It is often used for data fetching in React applications.
7. formik: A library for building forms in React, providing utilities for form validation, handling form submission, and managing form state.
8. react-bootstrap: A library that provides Bootstrap components as React components, allowing developers to use Bootstrap's UI components in React applications.
9. react-router-dom: DOM bindings for React Router, which is commonly used for implementing routing in React applications that render to the DOM.
10. styled-components: A library for styling React components using tagged template literals, allowing developers to write CSS directly within their JavaScript code.
11. material-ui: A set of React components that implement Google's Material Design. It provides pre-built components for creating attractive and responsive UIs.
12. react-query: A library for managing, caching, and synchronizing server state in React applications. It simplifies data fetching and caching strategies.
13. react-icons: A library that provides popular icon packs as React components, making it easy to include icons from various icon libraries in React applications.
14. react-testing-library: A library for testing React components in a way that resembles how the components are used by end users. It encourages writing tests that focus on behavior rather than implementation details.
15. prop-types: Although not strictly a React package, 'prop-types' is often used with React to type-check the props passed to components, helping developers catch bugs early and improve code reliability.

These are just some of the many packages available in the React ecosystem. Each package serves a specific purpose, such as state management, routing, styling, testing, or integration with external services, contributing to the versatility and power of React for building modern web applications.

Pre requisites of learning React JS: 

React JS is a front end library to develop UI for web applications. We must have knowledge of HTML, CSS and JavaScript programming before diving into React JS.

React JS application development needs many tools and techniques. In the beginning, we can ignore the depth of these tools and can start learning React JS. It is enough to know the basic to React Development tools without diving into their depth.

What is Babel in React JS?

Babel is a JavaScript transpiler (loosely called compiler). In React JS, we use Babel to compile the React JS code into JavaScript. The JavaScript has many versions over the time e.g. ES5, ES6 etc. Babel converts the React JS code into backward compatible JavaScript code. It helps to run the React JS code in old browsers.

React JS follows declarative programming approach. React JS has component based architecture. We create React components and use declarative approach to add them into the application. We don't have to know how React JS adds the component. It is abstracted away from the user. We just have to add the components on the webpage and the React handles them. This is declarative approach in short.

React JS Component

A React component is a fundamental building block in React applications. It is a self-contained unit of code that defines a part of the user interface. React components can be thought of as custom, reusable HTML elements, which can accept inputs (called "props") and maintain internal state. Components can be simple or complex and are written using JavaScript (or TypeScript) along with JSX (JavaScript XML), which allows you to write HTML-like syntax within your JavaScript code. There are different types of React components such as class component, function component, pure component etc.

React JS Element
A React element is the smallest building block in React. It is an immutable description of what you want to see on the screen. Unlike React components, which can be classes or functions, a React element is a plain JavaScript object that represents a DOM node or a component instance. Here's a deeper look at React elements:

Immutability: Once a React element is created, it cannot be changed. This immutability helps with performance optimizations, as React can quickly determine when and how to update the DOM.
Creation: React elements can be created using JSX syntax or the React.createElement() method. For example:
const element = <h1>Hello, world!</h1>;
Or, using React.createElement():
const element = React.createElement('h1', null, 'Hello, world!');
Representation: A React element is a plain JavaScript object that describes the DOM node. For instance, the above element could be represented as:
const element = {
type: 'h1',
props: {
children: 'Hello, world!'
}
};
Rendering: React elements are what you pass to React DOM's render method. React DOM then takes these elements and updates the DOM to match:
ReactDOM.render(element, document.getElementById('root'));
Children: React elements can have children, which are also React elements. This allows for the creation of nested structures:
const element = (
<div>
<h1>Hello, world!</h1>
<p>This is a paragraph.</p>
</div>
);
In summary, React elements are fundamental to how React constructs and updates the user interface. They serve as the blueprint for what React should render to the DOM.

What is React nested elements?

In React, nested elements refer to the structure where one React element is rendered within another React element, forming a hierarchy of components. This hierarchical structure allows for composing complex user interfaces from smaller, reusable components.