Wednesday, February 17

Notes : Introduction and Getting Started with React.js - JSConf 2015



1) Install Node.js

2) http://codewinds.com/jsconf-react-win

What makes react.js special?
- Simple to learn - Mostly it is the View.
- Composable components
- Declarative - Rather then doing jQuery manipulation, it is easily done via React.
- Easy to use with existing projects

React.js core concepts
- Just the view
- Virtual DOM - Keeps track of what is changed in DOM and updates it accordingly
- Components
- Top down data flow

You can use ES6

Just the view
class Greeting extends React.Component {
  render(){ // the heart of React.js
    // pass in any type of js objects, methods, or functions.
    return <div>{ this.props.user.name }</div>;
  }
}

Virtual DOM
- Render Virtual tree
- Fast Diff
- Adapters to DOM, ...

Components
Everything is components. You can have your code in different file, you can just import it and use it.



<Name value={this.props.name} /> => JSX code. It is a components.
props is built in react properties set up for you.

Top Down data flow

// from main.js
<App name={appName} items={items} />

// elsewhwere in App's render()
return (<div>
          <MainTitle title={this.props.name) />
          <div/>);


React.js API - JSX


Render, prop



React.js - State, events

when rendering, you can use this.state and this.props



React.js family

- react-router
- Flux
-React Native





Be the first one to Comment!!!

Post a Comment