React.js study

# Contents

1. Why React ?

2. Environments

3. Hello world!

4. JSX

5. React Components

6. Prop & State

7 Life Cycle of React Components

8. Event

9. Stateless Components

10. PropTypes

 

1. Why React ?

  • Javscript
    • Dom is expensive
    • If the element changes, change the entire page
  • React
    • Vitual DOM Tree is chip
    • Change elements using Props and State
    • Virtual Dom diff

 

2. Environments

– Node & NPM

– Node modules
> babel & presets
> react
> webpack & webpack-dev-server
> react-hot-loader

 

3. Hello world!

– Hello world
> index.html
> src/App.js
> dist/bundle.js

 

4. JSX

– JSX ?
> Javascript + XML

– How to use
> Tag must need open and close
> using {}
>> Javscript
>> Not use ‘if’
>> Not allowed Javascript keyword .
ex)
div ‘class’ -> ‘className’
label ‘for’ -> ‘htmlFor’

 

5. React Components

– Create
> extends React.Components
> Implements render() function.
ex)
class Custom extends React.Components {
render() {
return (JSX);
}
}

– Use
> JSX
> <Custom></Custom> or <Custom />

 

6. Prop & State

– State
> Writable
> Change state itself.
> Notify state to other Components.

– Prop
> Read-only
> Parents state.
> include Callback.

 

7 Life Cycle of React Components

– 4 Categories

Mount – will, did
|
Props – receive
|
Update – will, did
|
Unmount – will

 

– basic cycles
> componentWillMount
> componentDidMount
> componentReceiveProps
> componentWillUpdate
> componentDidUpdate
> componentWillUnmount

 

8. Event

– Camel Case
– Reference virtual dom using ‘ref’ (Not recommanded)

 

9. Stateless Components

– Recommnad
– Reusable
– No ref

 

10. PropTypes

– Only develepment
– Check React Component’s Props type.