After running through a tic-tac-toe tutorial it became very obvious to me that ReactJS is a kind of server faces technology but runs in the client context instead. When you use JSX to define classes, these classes become new HTML elements that can be used like any other element. You write your page in JSX and it compiles down to regular JavaScript. The main idea behind ReactJS is to allow developers to create reactive programmable components than can be dropped into your HTML pages.
Basically each component should be structured as follows
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
class Square extends React.Component {
render() {
return (
<button className="square">
{/* TODO */}
</button>
);
}
} |
The attribute className represents a class style in a .css file.
The return keyword, returns a DOM element that ReactJS can render.
All ReactJS components have a this.props.<field>. As with all JS variables these can be created dynamically, consider the following lines of code
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
class Square extends React.Component {
render() {
return (
<button className="square" onClick={()=>alert('click')}>
{this.props.value}
</button>
);
}
}
class Board extends React.Component {
renderSquare(i) {
return <Square value={i}/>;
}
|
At line 13 return <Square value={i}/>; value={i] could be changed to selsVal={i}, but line 5 {this.props.value} would need to change to {this.props.selsVal}. The above example is a demonstration of how property values are passed between components in ReactJS
State
React components can have state by setting this.state in their constructors. this.state should be considered as private to a React component that it’s defined in.
...
| title | Eureka Moment |
|---|
...
After running through a tic-tac-toe tutorial it became very obvious to me that ReactJS is a kind of server faces technology but runs in the client context instead. When you use JSX to define classes, these classes become new HTML elements that can be used like any other element. You write your page in JSX and it compiles down to regular JavaScript. The main idea behind ReactJS is to allow developers to create reactive programmable components than can be dropped into your HTML pages.
Basically each component should be structured as follows
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
class Square extends React.Component {
render() {
return (
<button className="square">
{/* TODO */}
</button>
);
}
} |
The attribute className represents a class style in a .css file.
The return keyword, returns a DOM element that ReactJS can render.
All ReactJS components have a this.props.<field>. As with all JS variables these can be created dynamically, consider the following lines of code
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
class Square extends React.Component {
render() {
return (
<button className="square" onClick={()=>alert('click')}>
{this.props.value}
</button>
);
}
}
class Board extends React.Component {
renderSquare(i) {
return <Square value={i}/>;
}
|
At line 13 return <Square value={i}/>; value={i] could be changed to selsVal={i}, but line 5 {this.props.value} would need to change to {this.props.selsVal}. The above example is a demonstration of how property values are passed between components in ReactJS
State
React components can have state by setting this.state in their constructors. this.state should be considered as private to a React component that it’s defined in.
| Info | ||
|---|---|---|
| ||
Line 13 in the above code fragment explains a lot. Unlike traditional programming where each function call leads onto another function call, and the end of the chain of calls would yield a result. In this model, line 13 returns an object of type Square. But line 13 can be considered like a remember object/a future object, a Square is instantiated with a value in the 'i' variable, this value is passed to the Square constructor that looks like this class Square extends React.Component { So this line - <Square value={i}/> can be considered as performing a call like Square( i ). To access the passed parameter in the constructor you could write class Square extends React.Component { If you change line 13 to <Square value={i} index={i + 1}/>, you are now passing two parameters to the constructor Square(i, i + 1). To access these parameters in the constructor you would write class Square extends React.Component { idx : props.index}So this line - <Square value={i}/> can be considered as performing a call like Square( i ). To access the passed parameter in the constructor you could write Notice that each constructor parameter is available in the props object. } } If you change line 13 to <Square value={i} index={i + 1}/>, you are now passing two parameters to the constructor Square(i, i + 1). To access these parameters in the constructor you would write class Square extends React.Component {idx : props.index } } Notice that each constructor parameter is available in the props object. The Board's renderSquare method will change to |
In the tic-tac-toe example, the state of the game (state of each square is being kept in the board even though each square maintains it's own state. The designer has decided for simplicity's sake it will be easier to keep the games state in the board rather than the square. Since this is a ReactJS learning exercise I would agree, this is not about OO design principles.
...