Introduction to ReactJS UI Web Dev .pptx
- 1. Introduction to React JS
- 2. • ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components • It is an open-source, component-based front end library which is responsible only for the view layer of the application. • Most people think it as a Framework But it is just a library developed by Facebook to solve some problems that we were facing earlier • React was created by Jordan Walke, a software engineer at Meta, who released an early prototype of React called "FaxJS“. It was first deployed on Facebook's News Feed in 2011 and later on Instagram in 2012. It was open- INTRODUCTION
- 3. React Features •JSX: -- JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an XML or HTML like syntax used by ReactJS •Components:- ReactJS is all about components. ReactJS application is made up of multiple components, and each component has its own logic and controls. These components can be reusable which help you to maintain the code when working on larger scale projects. •One-way Data Binding:- ReactJS is designed in such a manner that follows unidirectional data flow or one-way data binding. The benefits of one-way data binding give you better control throughout the application •Virtual DOM:- A virtual DOM object is a representation of the original DOM object. It works like a one- way data binding. Whenever any modifications happen in the web application, the entire UI is re- rendered in virtual DOM representation. Then it checks the difference between the previous DOM representation and new DOM. Once it has done, the real DOM will update only the things that have actually changed. This makes the application faster, and there is no wastage of memory.
- 4. Virtual Dom DOM: DOM stands for ‘Document Object Model’. In simple terms, it is a structured representation of the HTML elements that are present in a webpage or web-app. DOM represents the entire UI of your application. The DOM is represented as a tree data structure. It contains a node for each UI element present in the web document. Updating DOM: We Make use of ‘getElementById()’ or ‘getElementsByClassName()’ methods to modify the content of DOM. Every time there is a change in the state of your application, the DOM gets updated to reflect that change in the UI. Like this each time there is a component update, the DOM needs to be updated and the UI components have to be re- rendered. Virtual DOM: React uses Virtual DOM exists which is like a lightweight copy of the actual DOM(a virtual representation of the DOM). So for every object that exists in the original DOM, there is an object for that in React Virtual DOM. It is exactly the same, but it does not have the power to directly change the layout of the document. Manipulating DOM is slow, but manipulating Virtual DOM is fast as nothing gets drawn on the screen. So each time there is a change in the state of our application, the virtual DOM gets updated first instead of the real DOM. How Virtual DOM actually Works?:When anything new is added to the application, a virtual DOM is created and it is represented as a tree. Each element in the application is a node in this tree. So, whenever there is a change in the state of any element, a new Virtual DOM tree is created. This new Virtual DOM tree is then compared with the previous Virtual DOM tree and make a note of the changes. After this, it finds the best possible ways to make these changes to the real DOM. Now only the updated elements will get rendered on the page again.
- 5. Advantage of ReactJS 1. Easy to Learn and Use 2. Creating Dynamic Web Applications Becomes Easier 3. Reusable Components 4. Performance Enhancement 5.Excellent cross-platform support.
- 6. Environment Setup • Install Node js Latest Version • Install Gitbash Latest Version (It Acts Like a Linux Terminal ) • Install Vs Code code Editor • To Create a new React App type the Command • npx create-react-app
- 7. Components Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI.
- 8. In React, we mainly have two types of components: • Functional Components: • Functional components are simply JavaScript functions. We can create a functional component in React by writing a JavaScript function. • Syntax: • const Democomponent=()=> • { • return ( • <h1>Hello World </h1>); • } Functional Component
- 9. In React, we mainly have two types of components: • Class Components: • The class components are a little more complex than the functional components. The functional components are not aware of the other components in your program whereas the class components can work with each other. We can pass data from one class component to other class components. • Syntax: class Democomponent extends React.Component { render(){ return <h1>Helloh1>; } } Functional Component
- 10. Diff between functional & Class Component • Functional Component • Simple functions • Solution without using logic • Mainly Responsible for UI • Stateless/Presentational • Class Component • More features • Maintain their Own private Data • Stateful • More Complex Logc
- 11. State vs Props • Props • Props get Passed to the Component • Props are immutable • Props---functional • This.propsClass Comp • State • State is Managed within the Component • Variables declared in Functional Body • Use StateHook---Functional • This.state-Class
- 12. Destructuring of Props • Destructuring is a characteristic of JavaScript, It is used to take out sections of data from an array or objects, We can assign them to new own variables created by the developer. • In destructuring, It does not change an array or any object, it makes a copy of the desired object or array element by assigning them in its own new variables, later we can use this new variable in React (class or functional) components. • It makes the code more clear. When we access the props using this keyword, we have to use this/ this.props throughout the program, but by the use of restructuring, we can discard this/ this.props by assigning them in new variables. • This is very difficult to monitor props in complex applications, so by assigning these props in new own variables we can make a code more readable.
- 13. Conditional Rendering Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operators.