Intro to React
by Piero Savastano aka pieroit
Study material
- tutorial "Thinking in React"
- official tutorial
- official React documentation
- play with code online with codesandbox
What is React
- javascript library
- to build interactive user interfaces
- data driven
- open source
- by Facebook Inc.
Composable and reusable components
<ContactList />
<Contact />
<Contact />
<Contact />
<Contact />
<Contact />
<Pic />
CUSTOM HTML !!!
<Call />
<Name />
<Phone />
Data driven: flux architecture
Data
UI
Action
First practice, then theory
JSX
- React code is written in JSX
- JSX is a powered version of Javascript
- JSX compiles to Javascript
- JSX lets you put HTML inside Javascript code
- exercise base JSX and composable JSX
- online tutorial on JSX
let name = "Ivan"
let myJSX = (
<div>
Ciao {name} !
</div>
)
props
- passed from parent component
-
<MyComponent myProp="lol" />
-
- read only
-
this.props.myProp
-
state
- internal data
- read and write
-
this.state.myState
-
this.setState({ myState: 'open' })
-
Components have props and state
React
By Piero Savastano
React
- 655