Topics: tools, development
Author: Maitrik
It is JS library not framework.
Declarative
MVC - Only View
Three main reasons
Two type of Components
Use require and module.exports to access one file from another
A React app is basically just a lot of components, setting state and passing props to one another.
| Other | React |
|---|---|
| Framework | Library |
| Concise | Explicit |
| Twoway Binding | One Way Binding |
| Template-centric | JS-Centic |
| JS in Html | Html in JS |
| Separate (MVC) | Single File (HTML/CSS/JS) |
| Standard Component | Non-Standard |
| Community | Corporate ( FB ) |
| WebComponent | React |
|---|---|
| Templates | JSX |
| Custom Elemen | Declare React Components |
| Shadow DOM | CSS Modules, CSS in JS |
| Imports | One component per file |
JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML.
There's a rule that we haven't mentioned: a JSX expression must have exactly one outermost element.
class become className
you have to include the slash in end of tag. If you write a self-closing tag in JSX and forget the slash, you will raise an error.
Wrapping your code in curly braces between JSX tags, treat it like ordinary JavaScript and not like JSX.
var theBestString = 'tralalalala i am da best';
var judgmental = Math.random() < 0.5;
var math = (
<h1>
2 + 3 = {2 + 3}
</h1>
);
var JSKIf = (
<h1>
{ if (purchase.complete) 'Thank you for placing an order!' }
</h1>
);
function myfunction (e) {
ReactDOM.render(
<h1>{2 + 3}</h1>,
<h1 className="big">{2 + 3}</h1>,
<h1>{theBestString}</h1>,
<h1 onClick={myfunction} >Click Here</h1>,
{ !judgmental && <h1>Nacho Cheez Straight Out The Jar</h1> }
math,
document.getElementById('app')
);
var React = require('react');
var ReactDOM = require('react-dom');
var Button = React.createClass({
scream: function () {
alert('AAAAAAAAHHH!!!!!');
},
name : "Ths is button",
render: function () {
return <button onClick={this.scream}>{this.name}</button>;
}
});
ReactDOM.render (
<Button />,
document.getElementById('app')
);
var React = require('react');
var ReactDOM = require('react-dom');
var green = '#39D1B4';
var yellow = '#FFD712';
var Toggle = React.createClass({
getInitialState: function () {
return { color: green };
},
changeColor: function () {
var color = this.state.color == green ? yellow : green;
this.setState({ color: color });
},
render: function () {
return (
<div style={{background: this.state.color}}>
<h1>
Change my color
</h1>
<button onClick={this.changeColor}>
Change color
</button>
</div>
);
}
});
ReactDOM.render(
<Toggle />,
document.getElementById('app')
);
You will have one stateless component display information, and a differenstateless component offer the ability to change that information.
An instance of the stateful component class is rendered.
One stateless child component displays the state, and a different stateless child component displays a way to change the stateful component
Files
Stateful / Parent.js
var React = require('react');
var ReactDOM = require('react-dom');
var Child = require('./Child');
var Sibling = require('./Sibling');
var Parent = React.createClass({
getInitialState: function () {
return { name: 'Frarthur' };
},
changeName: function (newName) {
this.setState({
name: newName
});
},
render: function () {
return (
<div>
<Child onChange={this.changeName} />
<Sibling name={this.state.name} />
</div>
);
}
});
ReactDOM.render(
<Parent />,
document.getElementById('app')
);
Stateless / Child.jsvar React = require('react');
var Child = React.createClass({
handleChange: function (e) {
var name = e.target.value;
this.props.onChange(name);
},
render: function () {
return (
<div>
<select
id="great-names"
onChange={this.handleChange}>
<option value="Frarthur">Frarthur</option>
<option value="Gromulus">Gromulus</option>
<option value="Thinkpiece">Thinkpiece</option>
</select>
</div>
);
}
});
module.exports = Child;
Stateless / Sibling.jsvar React = require('react');
var Sibling = React.createClass({
render: function () {
var name = this.props.name;
return (
<div>
<h1>Hey, my name is {name}!</h1>
<h2>Don't you think {name} is the prettiest name ever?</h2>
<h2>Sure am glad that my parents picked {name}!</h2>
</div>
);
}
});
module.exports = Sibling;
Inline Styles, dividing components into presentational components and containecomponents.
<h1 style={{ color: 'red' }}>Hello world</h1>
The outer curly braces inject JavaScript into JSX. They say, "everything between us should be read as JavaScript, not JSX."
The inner curly braces create a JavaScript object literal. They make this a valid JavaScript object
Nicer approach is to store a style object in a variable, and then inject that variable into JSX.
Normally Style names are written in hyphenated-lowercase but in React, those same names are instead written in camelCase. backgroundColor: "green"
A style value as a number, then the unit "px" is assumed. fontSize: 50
Style file / style.js
var blue = 'rgb(139, 157, 195)';
var darkBlue = 'rgb(059, 089, 152)';
var lightBlue = 'rgb(223, 227, 238)';
var grey = 'rgb(247, 247, 247)';
var white = 'rgb(255, 255, 255)';
var fontSize = '4em';
module.exports = {
blue: blue,
darkBlue: darkBlue,
lightBlue: lightBlue,
grey: grey,
white: white,
fontSize: fontSize
};
Stateless / Sibling.jsvar React = require('react');
var ReactDOM = require('react-dom');
var styles = require('./facebookStyles');
var divStyle = {
backgroundColor: styles.darkBlue,
color: styles.white,
fontSize: styles.fontSize
};
var Wow = React.createClass({
render: function () {
return (
<div style={divStyle}>
Wow, I stole these colors from Facebook!
</div>
);
}
});
ReactDOM.render(
<Wow />,
document.getElementById('app')
);
one render function, and no other properties.Stateless functional components
// Normal way to display a prop:
var MyComponentClass = React.createClass({
render: function () {
return <h1>{this.props.title}</h1>;
}
});
// Stateless functional component way to display a prop:
function MyComponentClass (props) {
return <h1>{props.title}</h1>;
}
propTypes are useful for two reasons
var React = require('react');
var MessageDisplayer = React.createClass({
// This propTypes object should have
// one property for each expected prop:
propTypes: {
message: React.PropTypes.string
},
render: function () {
return <h1>{this.props.message}</h1>;
}
});
var React = require('react');
var ReactDOM = require('react-dom');
var Input = React.createClass({
getInitialState: function () {
return {
userInput: ''
};
},
handleUserInput: function (e) {
this.setState({
userInput: e.target.value
});
},
render: function () {
return (
<div>
<input
type="text"
onChange={this.handleUserInput}
value={this.state.userInput}
/>
<h1>{this.state.userInput}</h1>
</div>
);
}
});
ReactDOM.render(
<Input />,
document.getElementById('app')
);
var React = require('react');
var ReactDOM = require('react-dom');
var Flashy = React.createClass({
componentWillMount: function () {
alert('AND NOW, FOR THE FIRST TIME EVER... FLASHY!!!!');
},
componentDidMount: function () {
alert('YOU JUST WITNESSED THE DEBUT OF... FLASHY!!!!!!!');
},
render: function () {
alert('Flashy is rendering!');
return (
<h1 style={{ color: this.props.color }}>
OOH LA LA LOOK AT ME I AM THE FLASHIEST
</h1>
);
}
});
ReactDOM.render(
<Flashy color='red' />,
document.getElementById('app')
);
setTimeout(function () {
ReactDOM.render(
<Flashy color='green' />,
document.getElementById('app')
);
}, 2000);
var React = require('react');
var Enthused = React.createClass({
interval: null,
componentDidMount: function () {
this.interval = setInterval(function(){
this.props.addText('!');
}.bind(this), 15);
},
componentWillUnmount: function (prevProps, prevState) {
clearInterval(this.interval);
},
render: function () {
return (
<button onClick={this.props.toggle}>
Stop!
</button>
);
}
});
module.exports = Enthused;