React Js Tutorial
- React is a open-source front-end JavaScript library for building user interfaces based on components.
- React is used to building single-page applications.
- React allows us to create reusable UI components.
- React is a created by Jordan Walke in 2013 That was developed by Facebook.
- 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 is one of the most popular JavaScript frameworks for building dynamic and fast work web applications.
- In a React very reusable component is a piece of UI that can be used in various parts of an application to build more than one UI instance.
Introduction To ReactJS
What is React?.
How does React Work?
React an creates a VIRTUAL DOM (Document Object Model) in memory.
React is a JavaScript library (not a framework) that creates user interfaces (UI) in a predictable and efficient way using declarative code. You can use it to help build single page applications.
ReactJs 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.
History Of React Js ?
Why learn ReactJS?
React is one of the most popular JavaScript frameworks for building dynamic and fast work web applications.
ReactDOM applies a Virtual DOM approach to rendering views. It stores a virtual representation of the User Interface (UI) changes.
In a React very reusable component is a piece of UI that can be used in various parts of an application to build more than one UI instance.
ReactJS installation setup?
1. Install NodeJs
2. Install React From Terminal
ReactJS Create React App?
The React Js is a create-react-app is an excellent tool for beginners which allows you to create and run React project very quickly. It does not take any configuration manually. This tool is wrapping all of the required dependencies like Webpack, Babel for React Project Application itself and then you need to focus on writing React code only. This tool sets up the development environment, provides an excellent developer experience, and optimizes the application for production.
Requirements
The Create React App is maintained by Facebook and can works on any platform, for Like, macOS, Windows, Linux, etc. To create a React application using create-react-app, you need to have installed the following this step.
1.Check Node Version
node -v
Open the following command to check the Node version in the command prompt.
NPM Version
Open the following command to check the NPM version in the command prompt.
Create a new React project
create-react-app projectname
Once the React installation is successfully, we can create a new React project using create-react-app projectname command. Here, I choose “reactproject” name for my project.
The above command will take some time to install the React and create a new project with the name “reactproject.” Now, we can see the terminal as like below
Run React Program
React Render HTML
React’s goal is in many ways to render HTML in a web page.
React renders HTML to the web page by using a function called createRoot() and its method render()
The createRoot Function
CreateRoot(rootElement) is a React utility function used to create a react root element, which is a DOM element in which UI components render ourselves.
It takes as a parameter the root element that should be created.
The purpose of the function is to define the HTML element where a React component should be displayed.
The render Method
Render is the technique that can redirect a page with the help of function render(). Most importantly, render a function we can use to define the HTML code within the HTML element. It helps to display certain views in the UI using certain logic defined in the render function and returns the output.
The render() method is then called to define the React component that should be rendered.
There is another folder in the root directory of your React project, named public. In this folder, there is an index.html file.
You will be notice a single <div> in the body of this file. This is where our React application will be rendered.
Example
What is JSX?
JSX stands for JavaScript XML.
JSX allows us to write HTML in React.
React JSX, JavaScript XML is a form of markup that allows us to write HTML in React by converting HTML tags into React elements.
React JSX allows us to write HTML elements in JavaScript, which is then rendered to the DOM.
JSX makes it easy to write and add HTML in React.
Example
Embedding Expressions in JSX
As you can see in the example below, we declare a variable called name and then use it inside JSX by wrapping in curly braces:
With JSX you can write expressions inside curly braces { }.
React JSX you can write expressions inside curly braces { }
Example
const JsxElement = <h1>{10 + 10}</h1>;
What is Component ?
React components is a piece of code that can be reused
Components are independent and reusable piece of code. The same purpose as JavaScript functions, but work in isolation and return HTML.
React Components in two types, Like Class components and Function components
Function Component ?
React Component are simply JavaScript functions. We can create a functional component in React by writing a JavaScript function.
The Function component returns HTML but Function components can be written using much less code, are easier to understand.