Prezentacija o tome kako se koristi ReactJS, zašto je tako brzo stekao popularnost u odnosu na ostale JavaScript biblioteke i koje su najveće prednosti koje donosi. Odrzan u Startit Centru Indjija. demo kod - https://github.com/gorangajic/react-introduction-demo

1. Uvod u React
03/11/2016
Goran Gajic
twitter.com/golenull
github.com/gorangajic

2. Deklarativan
Opišete kako vaš interfejs izgleda i u svakom
trenutku tako će i izgledati

3. Bazira se na Komponentama
- Kockice za pravljenje vase aplikacije
- Lako se sklapaju
- Jednostavno se koriste
- Izmene su lakse, zato sto su promene
izolovane po komponentama

4. Dostupan
- Radi u vasoj postojećoj aplikaciji
- Radi na serveru
- Uz pomoć react-native pišete mobilne
aplikacije

5. JSX
- JSX je nadogradnja na JavaScript
- Sva moć JavaScripta, bez uvođenja novog jezika
- Nije neophodan, ali olakšava posao
- Ponaša se kao i HTML, JSX ima ime taga, attribute i
svoju decu.

6. JSX
class Hello extends React.Component {
render() {
return <h1> Hello World </h1>;
}
}
class Hello extends React.Component {
render() {
return React.createElement(
"h1", null, "Hello World"
);
}
}

7. rendering
class Message extends React.Component {
render() {
return (<div className="message">
<Avatar username={this.props.user} size="large" />
<ChatMessage>
{this.props.message}
</ChatMessage>
</div>);
}
}

8. state
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false,
}
}
componentDidMount() {
this.setState({ open: true });
}
...

9. props
class Chat extends React.Component {
...
render() {
return (<div className="chat">
<MessagesList messages={this.state.messages} />
<ChatInput onChange={(message) => this.addMessage(message)} />
</div>);
}
....
}

10. Events
class ChatInput extends React.Component {
render() {
return (<div className="form-inline">
<input
value={this.state.message}
onChange={(e) => this.setState({ message: e.target.value })}
/>
<button onClick={() => this.saveMessage()}>
Send
</button>
</div>);
}
}

11. React DOM
Biblioteka koja je zadužena za prikaz vaših komponenti na stranici
ReactDOM.render(
<App />,
document.getElementById('root')
);

12. Alati
- Node.js
- npm
- Babel
- Webpack

13. Create react app
npm install -g create-react-app
create-react-app moja-aplikacija
cd moja-aplikacija/
npm start

14. Demo