Web in 2018
Ahmed Murtaza
Sr. Front End Developer
Ovrlod
ahmedgmurtaza
slides.com/ahmedmurtaza
codepen.io/ahmedgmurtaza
https://medium.com/@ahmedgmurtaza
Evolution
of Web
Single Page Apps
</>
HTML5
AJAX
Tableless web
Flash
HTML
JS
CSS
Building Blocks
HTML
Semantic Markup
Accessibility
SEO
Semantic Markup
CSS
CSS Preprocessors
JavaScript
Interactivity
Animations
Graphics
JavaScript is not
React
A JavaScript library for building User Interfaces
@ahmedgmurtaza
Who else is using it?
https://github.com/facebook/react/wiki/Sites-Using-React
770 renowned brands listed including
@ahmedgmurtaza
<script src=".../react.development.js"></script>
<script src=".../react-dom.development.js"></script>
<script src=".../babel.js"></script>
dependencies
@ahmedgmurtaza
Vanilla JS
@ahmedgmurtaza
React.js
@ahmedgmurtaza
Introducing JSX
(from React team)
@ahmedgmurtaza
This is neither String nor HTML
Difference between HTML & JSX
https://reactjs.org/docs/dom-elements.html
@ahmedgmurtaza
http://Babeljs.io
Uses to transpile JSX into browser compatible javascript code.
<script src=".../babel.js"></script>
@ahmedgmurtaza
User-Defined Components Must Be Capitalized
Capital case => component
Small case => HTML tag
@ahmedgmurtaza
Components
Component is a small and isolated
part of an interface
@ahmedgmurtaza
Example
@ahmedgmurtaza
Component Lifecycle
@ahmedgmurtaza
Thank You
ahmedgmurtaza
ahmedgmurtaza
slides.com/ahmedmurtaza
codepen.io/ahmedgmurtaza
https://medium.com/@ahmedgmurtaza