Who else is using it?

https://github.com/facebook/react/wiki/Sites-Using-React

770 renowned brands listed including

@ahmedgmurtaza

https://insights.stackoverflow.com/survey/2018

@ahmedgmurtaza

React.js

@ahmedgmurtaza

Chrome console

@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

React Must Be in Scope

JSX uses React.createElement(), so react must be  added every time JSX is used.

@ahmedgmurtaza

User-Defined Components Must Be Capitalized

Capital case => component

Small case => HTML tag

@ahmedgmurtaza

Expressions inside JSX

@ahmedgmurtaza

JSX as an expression

you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions

@ahmedgmurtaza

examples

@ahmedgmurtaza

examples

@ahmedgmurtaza

examples

@ahmedgmurtaza

Components

• Functional Component (Stateless Component)

• Class Component (Stateful Component)

@ahmedgmurtaza

Components

Functional Component

@ahmedgmurtaza

Components

Class Component

@ahmedgmurtaza