Posted on

ReactJS: Checkbox

This entry is part 26 of 35 in the series React JS

See the Pen Stateful React checkbox component by daryl (@darylw) on CodePen.0

/**
* www.devhamsters.com
*/

class Checkbox extends React.Component {
  static propTypes = {
    checked: React.PropTypes.bool,
    disabled: React.PropTypes.bool,
  };
  static defaultProps = {
    checked: false,
    disabled: false,
  };
  constructor(props) {
    super(props);
    this.state = {
      checked: props.checked,
    };
  };

  _handleChange = () => {
    this.setState({
      checked: !this.state.checked,
    });
  };

  render() {
    const { disabled } = this.props;
    const { checked } = this.state;
    return (
      <div className="React__checkbox">
        <label>
          <input 
            type="checkbox"
            className="React__checkbox--input"
            checked={checked}
            disabled={disabled}
            onChange={this._handleChange}
          />
          <span 
            className="React__checkbox--span"
          />
        </label>
      </div>
    );
  }
}

const App = (
  <div className="App">
    <Checkbox />
    <Checkbox checked />
    <Checkbox disabled />
    <Checkbox checked disabled />
  </div>
);
      
ReactDOM.render(
  App, 
  document.getElementById('app')
);
Posted on

Javascript: Alert

This entry is part 8 of 27 in the series Javascript Tutorial

The JavaScript alert is a dialogue box that pops up from the browser.

<!DOCTYPE html>
<html>
<body>
<h3>Click to alert me.</h3>
<button onclick="myFunction()">Click Me</button>
<script>
 function myFunction() {
   alert("I pop up from the browser!");
 }
</script>
</body>
</html>

button

This alert function becomes handy when you want to check if a part of the code has been executed.

 

Posted on

Javascript vs PHP, which to start learning first for beginners?

Javascript has been getting very popular in the past 2 years mainly because together with HTML5, you can create iPhone or Android apps.

Though it is known that in terms of speed, Javascript will never be able to catch up with native apps, there are still many applications that are suitable for developing with Javascript.

If you delve into these 2 languages, you would be surprised how different they are.  You can say C and Java are very similar but you can’t say PHP and Javascript are similar.

What makes PHP so popular? It’s the simple reason that PHP is server side and the code written is hidden in the server.

If you are a new web programmer, I strongly suggest that you start with Javascript first.  Javascript has a better separation between the script and HTML making it a lot more easy to code.

When you first learn about Javascript, you do not have to worry about HTML or CSS.  You can learn it as if you are writing in C.  However, when you are writing PHP, you need to put the HTML into the code making it really confusing for the beginners.