ReactJS: Circle

See the Pen React: Circle by Pete (@peterbenoit) on CodePen.0

var Circle = React.createClass({

  styler: {
    width: "100px",
    height: "100px",
    mozBorderRadius: "50%",
    webkitBorderRadius: "50%",
    borderRadius: "50%",
    background: "red"
  },

  render: function() {
    return (
      <div style = {this.styler}></div>
    );
  }
});
 
React.render(
  <Circle />, 
  document.getElementById('mount-point'));

ReactJS: Button

See the Pen React Button by Trenton (@trentontri) on CodePen.0

/*
 * A simple React component
 * Properties include: href, icon, disabled, and className
 */
class Button extends React.Component {

  render() {
    const { children, className, href, icon, ...others } = this.props;
    const props = { ...others, href, className, ref: 'button', disabled: this.props.disabled };
    const element = href ? 'a' : 'button';

    return React.createElement(
      element, props, icon ? <i className={this.props.icon} /> : null, children
    );
  }
}

/*
 * Render the above component into the div#react-button
 */
ReactDOM.render(
  <div>
    <Button className="btn-primary">click me</Button>
    <Button className="btn-success" icon="fa fa-phone">success </Button>
    <Button className="btn-success" disabled={true}>disabled </Button>
  </div>, 
  document.getElementById('react-button')
);

ReactJS: TextField

See the Pen React – TextField by daryl (@darylw) on CodePen.0

class MyApp extends React.Component {
  render() {
    return (
      <TextField 
        placeholder="Enter your name"
      />
    );
  }
};

class TextField extends React.Component {
  constructor (props) {
    super(props);
  }
  
  render () {
    return (
      <input
        onChange={this.handleKeyPress}
        type="text"
        placeholder={ this.props.placeholder } 
        value=""
      />
    );
  }
};

React.render(<MyApp/>, document.querySelector('#myapp'));

ReactJS: Preview Image

See the Pen React Image Preview & Upload by Brian Emil Hartz (@hartzis) on CodePen.0

class ImageUpload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {file: '',imagePreviewUrl: ''};
  }

  _handleSubmit(e) {
    e.preventDefault();
    // TODO: do something with -> this.state.file
    console.log('handle uploading-', this.state.file);
  }

  _handleImageChange(e) {
    e.preventDefault();

    let reader = new FileReader();
    let file = e.target.files[0];

    reader.onloadend = () => {
      this.setState({
        file: file,
        imagePreviewUrl: reader.result
      });
    }

    reader.readAsDataURL(file)
  }

  render() {
    let {imagePreviewUrl} = this.state;
    let $imagePreview = null;
    if (imagePreviewUrl) {
      $imagePreview = (<img src={imagePreviewUrl} />);
    } else {
      $imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
    }

    return (
      <div className="previewComponent">
        <form onSubmit={(e)=>this._handleSubmit(e)}>
          <input className="fileInput" 
            type="file" 
            onChange={(e)=>this._handleImageChange(e)} />
          <button className="submitButton" 
            type="submit" 
            onClick={(e)=>this._handleSubmit(e)}>Upload Image</button>
        </form>
        <div className="imgPreview">
          {$imagePreview}
        </div>
      </div>
    )
  }
}
  
ReactDOM.render(<ImageUpload/>, document.getElementById("mainApp"));

ReactJS: Shadow Parallax

See the Pen Shadow Parallax • Reactjs by daryl (@darylw) on CodePen.0

class App extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
			pos: {x: 0, y: 0},
			shadow: true,
		    colors: [
			{
		        "background": "#2A2C39",
		        "text": "#ffffff",
		        "bold": "#FF4056"
		    }, {
		        "background": "#FCF751",
		        "text": "#2A2C39",
		        "bold": "#14151c"
		    }],
		    background: null,
		    text: null,
		    bold: null
		};
	}

	componentDidMount(){
		this.RandomBackground();
	}

    onMouseMove(e) {
        this.setState({
        	pos: {
        		x: e.pageX,
        		y: e.pageY
        	}
        });

        this.CreateShadow();
    }

	CreateShadow() {
	
	    if ('ontouchstart' in window == false && this.state.shadow) {

	            let [moveX, moveY] = [(this.state.pos.x / -100), (this.state.pos.y / -120)];

	            let [Section, firstWord, secondWord] = [React.findDOMNode(this.refs.section), React.findDOMNode(this.refs.playword_1), React.findDOMNode(this.refs.playword_2)];

				firstWord.style.transform = `translate3d(${moveX / 2}px, ${moveY}px, 0)`;
				secondWord.style.transform = `translate3d(${moveX / 2}px, ${moveY}px, 0)`;
				Section.style.textShadow = `${moveX}px ${-moveY}px rgba(0, 0, 0, 0.1)`;

		}
	}

	RandomBackground(){
		let getRandomInt = (min, max) => {
			return Math.floor(Math.random() * (max - min + 1) + min);
		}

		let RandomID 	= getRandomInt(0, 1),
			SelectColor = this.state.colors[RandomID];

		console.log(RandomID);

		this.setState({
			background: this.state.colors[RandomID].background,
			text: this.state.colors[RandomID].text,
			bold: this.state.colors[RandomID].bold
		})
	}

	render() {
		let sectionStyle = {
			backgroundColor: this.state.background,
			color: this.state.text
		}
		let boldStyle = {
			color: this.state.bold
		}

		return <section id="app" onMouseMove={this.onMouseMove.bind(this)} style={sectionStyle}>
				<h1 className="middle" ref="section">
					Movement is <span className="bold" ref="playword_1" style={boldStyle}>here</span>.
					<br/>
					And it is here to <span className="bold" ref="playword_2" style={boldStyle}>stay</span>.
				</h1>
			</section>
	}
}

React.render(<App />,
	document.querySelector('body')
);