This document provides an introduction to ReactJS including what it is, its key features, and how it works. Some main points:
- ReactJS is a UI library built by Facebook that uses a virtual DOM to selectively update the browser DOM and improve performance.
- It allows building of interactive and reusable UI components in a declarative way.
- React uses a one-way data flow and unidirectional data binding which keeps complexity low.
- Components are the core building blocks and can be composed to build UIs in a modular way.
- The virtual DOM enables fast re-renders by only updating parts of the real DOM that changed.
Mildaintrainings offers advanced ReactJS Interview Questions 2019 that helps you in cracking your interview & acquire your dream career as ReactJS Developer. Visit in this link :- https://mildaintrainings.com/blogs/react-js-interview-questions-answers/
If you want to get trained in React and wish to develop interesting UI’s on your own, then check out the ReactJS with Redux Certification Training by MildainTrainings, a trusted online learning company with a network of more than 50,000 satisfied learners spread across the globe.
This document discusses React, including its web evolution, concepts, syntax, and an example. It begins with an introduction to React and links to code. It then covers React's role in the evolution of the web and data presentation, comparing it to traditional MVC frameworks. Key React concepts are outlined, such as viewing it as a view engine rather than framework, its use of components and single direction data flow, and virtual DOM. React syntax is also summarized, including state, JSX, props, events, mixins, and refs. The document concludes with building a Facebook wall example in React.
React js, node js & angular js which one is the best for web development Concetto Labs
This document compares three popular JavaScript frameworks: AngularJS, ReactJS, and NodeJS. AngularJS is a full-featured front-end framework maintained by Google that uses HTML templates and directives. ReactJS is maintained by Facebook and used for building user interfaces with a component-based approach. NodeJS is a runtime environment that allows JavaScript to be used on the server-side to build scalable web applications. The document discusses the benefits and disadvantages of each framework to help determine which one is best suited for different types of web development projects.
Rama Krishna is an online trainer based in Hyderabad, India with over 11 years of experience in frontend and backend development. He provides training in various technologies including ReactJS, Angular, NodeJS, and more. This document outlines his experience and skills, provides a detailed course outline for a ReactJS training, and shares positive testimonials from past students who praise his teaching abilities and patience.
The document provides an introduction to React, a JavaScript library for building user interfaces. It discusses key React concepts like components, properties, state, one-way data flow, and JSX syntax. It also covers setting up a development environment with Create React App and shows how to create a basic React component with state. The target audience appears to be people new to React who want to learn the fundamentals.
At Lia Infraservice we create Dynamic Websites. Become a front-end React JS developer and be a part of our tech-savvy Web App Development Company in Chennai.
This is the ppt for day 2 of learning react from scratch.
Presentation given for girlscript punjab
date: 23 October 2020
Topics covered basic react app setup functional components and class components.
This document discusses implementing autocomplete functionality for a textbox using jQuery. It describes 3 walkthroughs of increasing complexity:
1. The simplest approach which demonstrates basic autocomplete functionality without data from a backend source.
2. An example that calls a web service asynchronously to get suggestion data from a database to populate the autocomplete.
3. An extension of the second example that displays more detailed suggestion items and only submits the selected value rather than the full object.
The document provides instructions on setting up the necessary jQuery and jQuery UI files, HTML markup, and code for each walkthrough.
This document introduces React JS, a JavaScript library for building user interfaces. It discusses that React uses a virtual DOM for efficient updates, implements one-way reactive data flow, and uses composable components. Key aspects of React covered include JSX syntax, the component lifecycle, managing component state, and thinking in React by breaking down requirements into UI components.
This document provides an overview and introduction to React, a JavaScript library for building user interfaces. It first showcases popular sites that use React like Facebook and Instagram. It then defines React as a library for creating user interfaces that renders UI and responds to events. The key benefits of React are that it is battle-tested, supports large applications with changing data over time, and uses encapsulated components to make code reuse, testing and separation of concerns easy. Components are the fundamental building blocks of React, and are reusable, composable units. When state changes, React re-renders the entire component efficiently by maintaining a virtual DOM to compute minimal DOM updates. The document concludes by pointing to additional React topics and a sample tutorial.
ReactJS is a JavaScript library for building user interfaces using reusable and interactive UI components. It uses a virtual DOM for rendering UI components and follows a unidirectional data flow architecture. Major companies using ReactJS include Facebook, Instagram, AirBnB, and Khan Academy. ReactJS advantages include its use of components, JSX syntax, and debugging tools. Components are the basic building blocks and use props, state, and lifecycles. Flux is a common architecture used with ReactJS that involves a central store for managing data in a unidirectional flow.
Getting Started with React-Nathan SmithTandemSeven
This document provides an overview and introduction to React, including:
- An introduction to the speaker and slides/resources for the talk
- A comparison of React and Angular
- An overview of common components in a React app: React, Redux, Router
- Setting up a basic React project with many dependencies
- Explanations of key React concepts like components, props, and state
- Examples of component structure and organization in a React project
React (or React Js) is a declarative, component-based JS library to build SPA(single page applications) which was created by Jordan Walke, a software engineer at Facebook. It is flexible and can be used in a variety of projects.
The document discusses various techniques for optimizing web performance and React applications. It covers topics like loading time, rendering time, dev tools, React tools, the latest features in React 17 and 18 like the new root API and startTransition API. It also discusses best practices for performance optimization in React like using pure components, React.memo, lazy loading, throttling events, debouncing events, and virtualization. Code snippets are provided as examples for some of these techniques.
The document outlines a React workshop covering what React is, its core concepts, and coding with React. It begins with an introduction and overview of React. It then covers key React concepts like components, the virtual DOM, JSX, state and props. Finally, it demonstrates how to start coding with React by rendering a component, using state, and working with forms. Resources for further learning are also provided at the end.
This document provides an overview of Asp.Net MVC and how it compares to traditional Asp.Net web forms. Some key points:
- Asp.Net MVC follows the MVC pattern, separating concerns into models, views, and controllers, allowing for cleaner code and easier testing compared to Asp.Net web forms.
- In Asp.Net MVC, controllers handle requests and return action results, views are responsible for the UI, and models represent application data. This separation of concerns is more aligned with HTTP concepts.
- Asp.Net MVC aims to be more flexible, maintainable, and testable than web forms. It allows for tighter control over HTML and adheres to conventions over configurations
Java 10 introduces JShell, which allows developers to quickly try out Java code snippets and operations without needing to compile full programs or write test classes. It provides an interactive interface for testing code. Java 10 also includes local variable type inference with "var", which allows declaring variables without specifying the type as long as the type is clear from the initialization value. This simplifies code. Other new features include parallel full garbage collection and application class data sharing to improve performance, but most new features are under the hood improvements rather than things developers directly use in programming.
This document provides an overview of React, a JavaScript library for building user interfaces. It discusses what React is, why it is useful, when to use it, and its key features and components. React allows building of reusable UI components in a declarative way. It uses a virtual DOM for better performance and can render on both client and server sides. Key advantages include high performance with large data changes, reusability, and ease of building large, complex UIs. The document also provides examples of building a simple React app in steps and references for further information.
This program will teach you ReactJS in a practice-oriented way, using all the latest patterns and best practices you need. You will learn all the key fundamentals as well as advanced concepts and related topics to turn you into a ReactJS developer.
My React TechTalk with Jordan open source association on Sep 13-2017 @Zinc , KHBP.
Session source code :
https://github.com/ali-sao/Better-web-apps-with-react-redux-.git
React is a different way to write JavaScript apps. When it was introduced at JSConf US in May, the audience was shocked by some of its design principles. One sarcastic tweet from an audience member ended up describing React’s philosophy quite accurately: https://twitter.com/cowboy/status/339858717451362304
We’re trying to push the limits of what’s possible on the web with React. My talk will start with a brief introduction to the framework, and then dive into three controversial topics: Throwing out the notion of templates and building views with JavaScript, “re-rendering” your entire application when your data changes, and a lightweight implementation of the DOM and events.
As applications grow in complexity, web developers and front-end developers all suffer the hassle of building and maintaining complex web applications; managing and maintaining consistency of application state. This presentation goes through what's special about React and Redux.
This was part of JOSA TechTalks project within Jordan Open Source Association, presented by Ali Sa'o and Omar Abdelhafith.
This document discusses React.js and its use for frontend development. It covers the key features and advantages of React, how it works, its architecture including components and the virtual DOM, comparisons to other frameworks like Angular, and examples of companies that use React like Facebook and Netflix. The summary is:
React.js is a popular library for building user interfaces that uses reusable components and a virtual DOM for improved performance. It has advantages over frameworks like Angular in being easier to learn and use due to its simpler architecture and unidirectional data flow. Major companies like Facebook use React for significant parts of their applications, demonstrating its widespread adoption.
In this presentation, Prashant Sharma of Valuebound has talked about ReactJS - a JavaScript library for building user interfaces. Check out the agendas to know what is there for you.
----------------------------------------------------------
Get Socialistic
Our website: http://valuebound.com/
LinkedIn: http://bit.ly/2eKgdux
Facebook: https://www.facebook.com/valuebound/
Twitter: http://bit.ly/2gFPTi8
React JS is a JavaScript library for building reusable UI components. It uses a virtual DOM for efficient rendering. Components are the building blocks of React, and can be either functional or class-based. Functional components are simpler while class components can maintain state. Props are passed down from parent to child components while state is local. The virtual DOM improves performance by only updating the real DOM with actual changes.
React, often stylized as React-dom, has taken the world of web development by storm. Recognizing the advantages of React and how it interacts with the Document Object Model (DOM) – a topic that often prompts the question, “what is DOM in React?” – is essential for both aspiring and seasoned developers. From the component-based approach and React DOM methods to the virtual DOM concept, React brings several benefits to the table.
React JS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It uses a virtual DOM which works like a lightweight copy of the real DOM to improve performance by only updating what changes. Components are independent and reusable bits of code that serve the same purpose as functions but return HTML. There are two main types of components - functional components which are simple functions, and class components which can maintain their own state and work together.
React gsg presentation with ryan jung & elias malikLama K Banna
React is a client-side JavaScript library for building user interfaces that is made and open-sourced by Facebook. It uses a virtual DOM for fast rendering and reusable components to build up the UI. Components can have their own state that causes re-rendering when updated. Events are handled through callbacks. JSX allows writing HTML-like code mixed with JavaScript.
Managing state across complex apps with many interacting components can be challenging. Flux and Redux address this with a single source of truth store and reducer functions that update state immutably in response to actions. Side effects like API calls require middleware like thunks, sagas, or API-specific middleware to isolate impure logic from pure reducers.
Why Should You Choose ReactJS for Game Development_.pdfReactJS
Choosing the simplest front-end technology can be difficult for businesses and developers nowadays. There are numerous technologies on the market, each of which is designed to meet specific needs. React JS is one such technology that is now used by almost every company. With the growing popularity of React JS, there has been a significant advancement in the field of front-end ReactJS game development. Before we get too far into it, let's first define React JS.
Learn reactjs, how to code with example and general understanding thinkwikHetaxi patel
React js for beginners, learn react js with basic code setup and code examples with general understanding. beginners guide for basic react js programming with examples
React JS is a frontend library for building user interfaces using components. It uses a virtual DOM and declarative programming. Components can be either functional or class-based. Functional components return JSX, while class components can maintain internal state. Events are handled by passing callbacks, and forms use controlled components by storing values in component state.
Frontend Development Bootcamp - React [Online & Offline] In BanglaStack Learner
Frontend Development Bootcamp - React
Stack School:
https://courses.stackschool.co/courses/frontend-development-bootcamp-react
"Frontend Development Bootcamp - React"[ Online + Offline], we will teach you frontend development and its process. And we will use React and its ecosystem for learning. But at the end of this camp, if you want to switch to any other library or framework, and you can do so without anyone's help.
ওয়েব ডিজাইনার না, জেনে শুনে বুঝে, দীর্ঘ সময় হাতে কলমে প্রাকটিস করে সত্যিকার অর্থেই ফ্রন্টেন্ড ডেভেলপার হতে চাইলে এই বুটক্যাম্পটি আপনার জন্য। ফ্রন্টেন্ড ডেভেলপমেন্ট মানে HTML CSS না, React Vue না, এটা একটা প্রোসেস এবং যা আমরা শিখবো React ব্যবহার করে।
Frontend Development Bootcamp - React [Online & Offline]
43+ Weeks, 86+ Classes - A Long Journey to Become A Professional Frontend Developer
আমাদের অনেকেরই ধারণা ফ্রন্টেন্ড ডেভেলপমেন্ট মানেই হচ্ছে React, Vue বা Angular. এগুলো একবার শিখতে পারলেই হয়ে গেলো। কিন্তু বাস্তবিক অর্থে এগুলো হচ্ছে কিছু টুলস যা আপনাকে ফ্রন্টেন্ড অ্যাপলিকেশন ডেভেলপ করতে সাহায্য করবে। এই সুদীর্ঘ বুটক্যাম্পে আমরা ফ্রন্টেন্ড ডেভেলপমেন্ট শিখবো। এবং শেখার কাজে ব্যবহার করবো React এবং এর ইকো সিস্টেম। তবে এই ক্যাম্প শেষে যদি আপনি অন্য যে কোনো লাইব্রেরী বা ফ্রেমওয়ার্ক এ সুইচ করতে চান, কারোর সাহায্য ছাড়াই আপনি সেটা করতে পারবেন। কারণ এই লম্বা বুটক্যাম্পে আপনাকে ফ্রন্টেন্ড ডেভেলপমেন্টের থিওরি এবং প্রসেসের সাথে এমন ভাবে পরিচয় করিয়ে দেওয়া হবে, যেন চাইলেই আপনি যেকোনো টুলস ব্যবহার করে ফ্রন্টেন্ড ডেভেলপমেন্ট করতে পারেন। মনে রাখবেন, এটা React এর কোনো কোর্স না, ফ্রন্টেন্ড ডেভেলপমেন্ট কোর্স যেখানে আমরা টুল হিসেবে React কে বেছে নিয়েছি।
This document introduces an 7-day tutorial to learn ASP.NET MVC in depth. Day 1 focuses on understanding why MVC is better than traditional ASP.NET Web Forms by addressing issues like performance problems and reusability with Web Forms. It includes two labs, one on controllers and one on views, followed by Q&A sections. The goal is to help readers learn MVC step-by-step over the course of the week-long tutorial.
The document provides an overview of React including its introduction, prerequisites, installation, fundamentals, components, life cycle, routing, hooks, Redux, projects, testing, comparison to Angular, and tips for React developers. It discusses key React concepts such as JSX, props, state, events, DOM, and virtual DOM.
ReactJS is a component-based library (not a framework!!) which is used to develop interactive UI’s. Currently, it is the most popular front-end JavaScript library. It deals with View in the MVC (Model - View - Controller). So, if you are dealing with the applications where data keeps on changing in real time, you should go for React.
Beyond the Advance Presentation for By the Book 9John Rodzvilla
In June 2020, L.L. McKinney, a Black author of young adult novels, began the #publishingpaidme hashtag to create a discussion on how the publishing industry treats Black authors: “what they’re paid. What the marketing is. How the books are treated. How one Black book not reaching its parameters casts a shadow on all Black books and all Black authors, and that’s not the same for our white counterparts.” (Grady 2020) McKinney’s call resulted in an online discussion across 65,000 tweets between authors of all races and the creation of a Google spreadsheet that collected information on over 2,000 titles.
While the conversation was originally meant to discuss the ethical value of book publishing, it became an economic assessment by authors of how publishers treated authors of color and women authors without a full analysis of the data collected. This paper would present the data collected from relevant tweets and the Google database to show not only the range of advances among participating authors split out by their race, gender, sexual orientation and the genre of their work, but also the publishers’ treatment of their titles in terms of deal announcements and pre-pub attention in industry publications. The paper is based on a multi-year project of cleaning and evaluating the collected data to assess what it reveals about the habits and strategies of American publishers in acquiring and promoting titles from a diverse group of authors across the literary, non-fiction, children’s, mystery, romance, and SFF genres.
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894PECB
As artificial intelligence continues to evolve, understanding the complexities and regulations regarding AI risk management is more crucial than ever.
Amongst others, the webinar covers:
• ISO/IEC 42001 standard, which provides guidelines for establishing, implementing, maintaining, and continually improving AI management systems within organizations
• insights into the European Union's landmark legislative proposal aimed at regulating AI
• framework and methodologies prescribed by ISO/IEC 23894 for identifying, assessing, and mitigating risks associated with AI systems
Presenters:
Miriama Podskubova - Attorney at Law
Miriama is a seasoned lawyer with over a decade of experience. She specializes in commercial law, focusing on transactions, venture capital investments, IT, digital law, and cybersecurity, areas she was drawn to through her legal practice. Alongside preparing contract and project documentation, she ensures the correct interpretation and application of European legal regulations in these fields. Beyond client projects, she frequently speaks at conferences on cybersecurity, online privacy protection, and the increasingly pertinent topic of AI regulation. As a registered advocate of Slovak bar, certified data privacy professional in the European Union (CIPP/e) and a member of the international association ELA, she helps both tech-focused startups and entrepreneurs, as well as international chains, to properly set up their business operations.
Callum Wright - Founder and Lead Consultant Founder and Lead Consultant
Callum Wright is a seasoned cybersecurity, privacy and AI governance expert. With over a decade of experience, he has dedicated his career to protecting digital assets, ensuring data privacy, and establishing ethical AI governance frameworks. His diverse background includes significant roles in security architecture, AI governance, risk consulting, and privacy management across various industries, thorough testing, and successful implementation, he has consistently delivered exceptional results.
Throughout his career, he has taken on multifaceted roles, from leading technical project management teams to owning solutions that drive operational excellence. His conscientious and proactive approach is unwavering, whether he is working independently or collaboratively within a team. His ability to connect with colleagues on a personal level underscores his commitment to fostering a harmonious and productive workplace environment.
Date: June 26, 2024
Tags: ISO/IEC 42001, Artificial Intelligence, EU AI Act, ISO/IEC 23894
-------------------------------------------------------------------------------
Find out more about ISO training and certification services
Training: ISO/IEC 42001 Artificial Intelligence Management System - EN | PECB
Webinars: https://pecb.com/webinars
Article: https://pecb.com/article
-------------------------------------------------------------------------------
How to Configure Time Off Types in Odoo 17Celine George
Now we can take look into how to configure time off types in odoo 17 through this slide. Time-off types are used to grant or request different types of leave. Only then the authorities will have a clear view or a clear understanding of what kind of leave the employee is taking.
Integrated Marketing Communications (IMC)- Concept, Features, Elements, Role of advertising in IMC
Advertising: Concept, Features, Evolution of Advertising, Active Participants, Benefits of advertising to Business firms and consumers.
Classification of advertising: Geographic, Media, Target audience and Functions.
Satta Matka Dpboss Kalyan Matka Results Kalyan ChartMohit Tripathi
SATTA MATKA DPBOSS KALYAN MATKA RESULTS KALYAN CHART KALYAN MATKA MATKA RESULT KALYAN MATKA TIPS SATTA MATKA MATKA COM MATKA PANA JODI TODAY BATTA SATKA MATKA PATTI JODI NUMBER MATKA RESULTS MATKA CHART MATKA JODI SATTA COM INDIA SATTA MATKA MATKA TIPS MATKA WAPKA ALL MATKA RESULT LIVE ONLINE MATKA RESULT KALYAN MATKA RESULT DPBOSS MATKA 143 MAIN MATKA KALYAN MATKA RESULTS KALYAN CHART
Kalyan Matka Kalyan Result Satta Matka Result Satta Matka Kalyan Satta Matka Kalyan Open Today Satta Matka Kalyan
Kalyan today kalyan trick kalyan trick today kalyan chart kalyan today free game kalyan today fix jodi kalyan today matka kalyan today open Kalyan jodi kalyan jodi trick today kalyan jodi trick kalyan jodi ajj ka.
Delegation Inheritance in Odoo 17 and Its Use CasesCeline George
There are 3 types of inheritance in odoo Classical, Extension, and Delegation. Delegation inheritance is used to sink other models to our custom model. And there is no change in the views. This slide will discuss delegation inheritance and its use cases in odoo 17.
Credit limit improvement system in odoo 17Celine George
In Odoo 17, confirmed and uninvoiced sales orders are now factored into a partner's total receivables. As a result, the credit limit warning system now considers this updated calculation, leading to more accurate and effective credit management.
Principles of Roods Approach!!!!!!!.pptxibtesaam huma
Principles of Rood’s Approach
Treatment technique used in physiotherapy for neurological patients which aids them to recover and improve quality of life
Facilitatory techniques
Inhibitory techniques
2. Introduction to ReactJS
Q.) What is React JS ?
● React Js is nothing but a UI library built by Facebook to improve the creation
of interactive, stateful, and reusable UI components.
● One of its unique feature is that it helps us overcome the limitation of DOM
manipulation of browser for an interactive UI by introducing a concept of
virtual DOM that selectively renders subtrees of nodes based upon state
changes.
3. contd...
● React JS is being used in production by Facebook and sites like Instagram is
entirely converted and built in ReactJS.
● Facebook Chat and message which used to very buggy with notifications on
message not sync is all very smooth all thanks to the ReactJS & Flux.
4. Features of React JS
● One of the key aspects of ReactJS is that it can be used both on the client-
side as well as on the server side.
● React is build to solve the problem of updating UI of large applications
where data changes over time.
● React is simple, declarative, built of compassable components and yes you
need to give it sometime to get a nice flavour of it.
5. React at first look !
Now Let us look at first ReactJS code. Need not to worry, we will be covering
them in details shortly. Its just to give you a look and feel of 1st ReactJS
component code.
Now, tell me what you
think of by seeing this
code for the 1st time ?
6. Probable answers !
If you have worked with JavaScript before which is a prerequisite for this course
you may think like :
a. Isn’t this ugly ?
b. will it not be making things complex by putting Javascript and html in the
same file ?
c. No clue whats going on. Is this javascript ?
d. Is React only templating language ?
7. Don’t worry :)
The thing is that it’s just JavaScript and it’s not a templating language.
The Code that you see previously is written in JSX which is a JavaScript
extension.
The JSX code increases the efficiency as it performs optimization while
compiling the source code to JavaScript.
8. Some more Gyan on React !
If you have worked earlier with JavaScript, you would have seen the MVC being
followed which stands for Model View Controller architecture.
In this ReactJS works only with the Views and it doesn’t care about how the data
is passed or handled across the web-application.
This was mostly the architectural problem that is outside the scope of ReactJS
and to overcome that the developers at Facebook proposed a functional
approach which they call as FLUX.
10. contd...
Flux introduced the concept of Actions, Dispatchers & Stores. Mutation of data
can only be done through calling the actions. This architecture allows for the
data flow in a single direction only and hence makes it easier to monitor data
changes affecting the application.
11. Why React in UI ?
The most basic function of UI is to display some data and React makes it easy to
do that as well as keep the page updated with least DOM mutations to browser.
Now, you all can write a basic React JS code which i display in the next slide and
run your first React code in the browser. Just create a .html file and copy the
code that i show in the next slide.
13. contd...
In the code which is presented before you will see that the some data keeps
changing on the page while the others remains as it is.
Here the virtual DOM comes into picture where it does the diff with the new DOM
and renders only the minimum change required.
Since, the code is not in pure javascript it is first compiled using babel. Babel is a
javascript compiler. React and React-DOM library is also imported for developing
in their framework.
14. More deep into React !
What is JSX ?
● JSX in simple is a language that lets you create javascript object from HTML
syntax which runs faster on the browsers compared to the normal
JavaScript.
● strictly typed OO programming language.
● syntax : class / function definition like JAVA.
● function body is javascript.
● strict type leads to higher productivity than javaScript.
15. contd...
Few more facts about JSX :
1. The code written in JSX when compiled runs faster than equivalent JS code.
the code is optimised using type info.
2. Compiled code generates source-map for debugging. (* source-map : It is a
technology that supports debugging of client-side code on web-browsers
written in language other than javascript.)
16. React Components
Components in React :
Components in react can be thought of as a simple function which takes “props”
and “state” as arguments and renders HTML based on that.
Note : React components can render only a single root node. If the requirement
is to return multiple nodes then it must be wrapped in a single root, otherwise the
component will not render.
17. contd...
The inputs to the components are called “Props”, short for “properties”. Props
are passed as attributes in JSX syntax. “Props” are not changed inside a
component and are treated as immutable objects. The state of the component is
stored in “this.state” of the component.
18. More of React Gyan!
1. In React, everything is a component. React has no : a) controller b) directives
c) templates d) global event listeners e) no view models etc…It only has
“Components” which once understood makes life really easy and removes
complexities.
For E.g : You have a simple shopping below which is generally made as a
template which contains too much code for all the elements together and the
data is all handled in model and controller. But, if you want the same to be
implemented in React it become pretty much simple and all revolves about the
component.
21. React Gyan contd...
2) Reliable Data Display : It has not built in framework. In React any component
can communicate with any other component.
In React there’s a 1-way data flow only. Data is handled from “Parent” to “Child”.
The data is passed as props from parent component to inner component and
accessed as this.props.
“Props” is immutable and “State” is mutable. “State” can become props. Data
flows down with handlers. Events flow up and data flows down.
22. contd ....
3) Virtual DOM :
a) It’s a pure-javascript, in-memory representation of DOM.
b) render() fires whenever something changes.
c) React modifies the real DOM to match.
d) It’s FAST, PURE & just works !
23. React Lifecycle Method!
So, some basic questions now. As, i said earlier React works on virtual DOM. So,
how do i access the actual DOM ?
When i come to know that render has happened for the react component ?
The answer lies in REACT lifecycle method. The lifecycle methods are executed
at specific points in React Lifecycle.
24. contd...
1. componentWillMount : Invoked once, both on the client and server,
immediately before the initial rendering occurs.
2. componentDidMount : Invoked once, only on the client (not on the server),
immediately after the initial rendering occurs.
3. componentWillReceiveProps : Invoked when a component is receiving new
props. This method is not called for the initial render.
4. shouldComponentUpdate : Invoked before rendering when new props or
state are being received. This method is not called for the initial render or
when forceUpdate is used.
25. contd...
5. componentWillUpdate : Invoked immediately before rendering when new
props or state are being received. This method is not called for the initial render.
6. componentDidUpdate : Invoked immediately after the component's updates
are flushed to the DOM. This method is not called for the initial render.
7. componentWillUnmount : Invoked immediately before a component is
unmounted from the DOM. etc
27. Summary
1. one-way data flow keeps complexity under control.
2. Debugging is easy for self-contained components.
3. React library doesn’t dictate too much.