Plan What is Reactjs? ReactJs core concepts Let's Code Application Benefits Front And Back End Programming Testing Database Question Session
HELLO !!! I'mMuthukumaranSingaravelu WHOAMI? Programming Lover Someone try to learn new thing everyday
I'm Web Developer I want to create web page :)
How is that possible?
FaceBook created Reactjs
What is Reactjs?
Short Summary A Facebook & Instagram Collaboration Initial release from 2013
A Library for creating User Interfaces
React is not a Framework
Who are using Reactjs?
Why Reactjs?
Separation of concerns: app/html/button.html app/css/button.css app/js/directives/button.js Core Problem !!!!
SEO Friendly Coding is Simpler because of JSX Big minds are backing ReactJs
Virtual DOM Unidirectional Data Flow
Reactjs Core concepts
JSX COMPONENTS UNIDIRECTIONAL DATA FLOW VIRTUAL DOM
Reactjs core concepts :: Component
React Components Self-contained reusable building blocks of web application
React Components Printerest open sourced its full React component UI Library reusable
React Components Office UI Fabric reusable Fabric React is a collection of robust React-based components designed to make it simple for you to create consistent web experiences using the Office Design Language
Who uses UI Fabric?
React Components Lifecycle !
INITIALIZATION UPDATE DESTRUCTION getInitialState() getDefaultProps() componentWillMount() render() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate() componentWillUnmount()
React is about components...
How does component look like?
React core concepts :: Virtual DOM
React Virtual DOM? Keep track of state in DOM is hard! It'll be so easier to render
React Re-render everything for every update
Seems expensive?
Use different algorithm with the browser DOM tree to identify the changes Instead of creating new object, Reactjs just identify what change is took place and once identify update that state
React Virtual DOM Re-rendering process?
Build new virtual DOM subtree Diff. with the old one Compute the minimul set of DOM mutuation Batch execute all update
React core concepts :: JSX
React JSX React components are written in JSX A JavaScript extension syntax allowing easy quoting of HTML and using HTML tag syntax to render components
React core concepts :: state & props !!!
Props Parent Component Component state
Let's start coding...

WEB DEVELOPMENT USING REACT JS