basic usage

  1. component: una classe che contiene logica, eventi e un metodo render()
  2. JSX: sintassi abbreviata per il rendering html+attributi+eventi
  3. properties: data, passate dal parent component al child, immutable
  4. state: data, mutable setState(data,callback), component callback change data and trigger render()

Properties

Props (short for properties) are a Component’s configuration, its options if you may. They are received from above and immutable as far as the Component receiving them is concerned. A Component cannot change its props, but it is responsible for putting together the props of its child Components. react man

State

The state starts with a default value when a Component mounts and then suffers from mutations in time (mostly generated from user events). It’s a serialisable representation of one point in time—a snapshot. A Component manages its own state internally, but—besides setting an initial state—has no business fiddling with the state of its children. You could say the state is private. rect man

app init (webpack + Babel + ESLint):

npm install -g create-react-app
# JS: create-react-app proj_name
 
create-react-app proj_name --typescript
cd proj_name
 
npm run start

property example:

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.props.data} />
        <CommentForm />
      </div>
    );
  }
});
var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function (comment) {
      return (
        <Comment author={comment.author}>
          {comment.text}
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});
var el_cont = document.getElementById('content');
ReactDOM.render(<CommentBox data={data} />, el_cont );
ReactDOM.render(<CommentList data={data} />, el_cont );

state example:

var Box = React.createClass({
    getInitialState: function() {
        return {
            hasDetailsVisible: false
        };
    },
    handleToggle: function() {
        this.setState({
                hasDetailsVisible: !this.state.hasDetailsVisible
        });
    },
    render: function() {
        var list = this.props.list.map(function(item) {
                return <li>{item}</li>
        });
        var detailsStyle = this.state.hasDetailsVisible ? {display: 'block'} : {display: 'none'};
        return (
            <div>
            <h1>{this.props.title}</h1>
            <button onClick={this.handleToggle}>toggle details</button>
            <ul style={detailsStyle} >
            {list}
            </ul>
            </div>
        );
    }
});
ReactDOM.render(<Box title="Cool Box" list={['item 1', 'item 2', 'item 3', 'item N']} />, document.body);

events example:

var Box = React.createClass({
    getInitialState: function() {
        return {
            hasDetailsVisible: false
        };
    },
    handleToggle: function(event) {
        this.setState({
                hasDetailsVisible: !this.state.hasDetailsVisible
        });
    },
    render: function() {
        var list = this.props.list.map(function(item) {
                return <li>{item}</li>
        });
        var detailsStyle = this.state.hasDetailsVisible ? {display: 'block'} : {display: 'none'};
        return (
            <div>
            <h1>{this.props.title}</h1>
            <button onClick={this.handleToggle} >toggle details</button>
            <ul style={detailsStyle}>
            {list}
            </ul>
            </div>
        );
    }
});
ReactDOM.render(<Box title="Cool Box" list={['item 1', 'item 2', 'item 3', 'item N']} />, document.body);

TypeScript

npx create-react-app my-typescript-app --typescript

base template:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>I'm in a React app!</title>
  </head>
  <body>
    <div id="react-app"></div>

    <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script>
    <script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script>
</body>
</html>
/// <reference path="../typing/react.d.ts" />
/// <reference path="../typings/main.d.ts" />
 
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
interface DemoProps {
  name:string;
  age:string;
}
 
class Demo extends React.Component<DemoProps, any> {
  private foo:number;
  constructor(props:DemoProps) {
    super(props);
    this.foo = 42;
  }
  render() {
    return <div>Hello world!</div>
  }
}
 
function render_test() {
    var mountNode = document.getElementById('content');
    ReactDOM.render(<Demo name="John" age="22" />, mountNode);
}
render_test();
tsc --jsx react --module commonjs ./app/test.tsx

Bower/NPM/TSD 

npm install --save react react-dom
tsd install react react-dom --save
bower install --save react

YO Generators

  • cordova-react
  • react-webpack
  • react-material-ui

React Components library