Home   HTML   Css   JavaScript   React.js   C   C++   Python   MySQL   Java   Swift             Sign up Login

React Js

React Introduction

---

What is React.js?

React, sometimes referred to as a frontend JavaScript framework, is a JavaScript library created by Facebook. React is a tool for building UI components.

How does React Work?

👉 React creates a VIRTUAL DOM in memory.

• Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating before making the changes in the browser DOM.

👉 React only changes what needs to be changed!

• React finds out what changes have been made, and changes only what needs to be changed.

React.js History

• Current version of React.js is V18.0.0 (April 2022).
• Initial Release to the Public (V0.3.0) was in July 2013.
• React.js was first used in 2011 for Facebook's Newsfeed feature.
• Facebook Software Engineer, Jordan Walke, created it.
• Current version of create-react-app is v5.0.1 (April 2022).
• create-react-app includes built tools such as webpack ,Babel , and ESLint.

React Getting Started

---

To use React in production, you need npm which is included with Node.js.

1. To get an overview of what React is, you can write React code directly in HTML.
2. But in order to use React in production, you need npm and Node.js installed.

Setting up a React Environment

If you have npx and Node.js installed, you can create a React application by using create-react-app.

1. If you've previously installed create-react-app globally, it is recommended that you uninstall the package to ensure npx always uses the latest version of create-react-app.
2. To uninstall, run this command: npm uninstall -g create-react-app.

Run this command to create a React application named my-react-app:

| npx create-react-app my-react-app

The create-react-app will set up everything you need to run a React application.

Run the React Application

• Now you are ready to run your first real React application!
• Run this command to move to the my-react-app directory:

| cd my-react-app

Run this command to run the React application my-react-app:

| npm start

A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:3000 in the address bar.

React Features

---

• JSX: JSX is a syntax extension for JavaScript, which allows you to write HTML directly within React.
• Components: Components are the building blocks of any React application, and a typical React app will contain many of these.
• Unidirectional Data Flow: React implements one-way data flow, making it easier to reason about your app.
• Virtual DOM: The virtual DOM makes updates faster by updating only the parts of the DOM that need to change.
• Performance: React is known for its high performance due to its virtual DOM implementation.
• Extensions: React goes beyond just being a UI library. It has a rich ecosystem of extensions for routing, state management, and more.

Why Use React?

---

React is used for building large-scale applications with dynamic data changes. Here are some reasons why React is popular:

• React allows developers to build web applications that can update and render efficiently in response to data changes.
• It makes it easy to create interactive UIs with components.
• It helps in building complex applications with ease, due to its component-based architecture.
• React’s declarative nature makes it easier to debug and understand the code.

React Ecosystem

---

• Redux: A predictable state container for JavaScript apps.
• React Router: A standard library for routing in React.
• Material-UI: React components for faster and easier web development.
• Styled Components: Utilizes tagged template literals to style your apps.
• Next.js: A React framework for server-rendered applications.