Using react with meteor

USING REACT WITH METEOR
by Neha

What we will Learn
● Simple Rendering
● Updating
● Conditional Rendering

JSX
● JSX is a syntax extension to JavaScript.
● Its tag syntax is neither a string nor HTML, e.g.
const element = <h1>Hello, world!</h1>;
● You can embed any JavaScript expression in JSX
● By wrapping it in curly braces, e.g.
○ {2 + 2}

JSX
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
After compilation, JSX expressions become regular JS objects.
So we can:
● Use JSX inside if statements and for loops
● Assign it to variables

JSX
Specifying Attributes with JSX:
● String literals with quotes:
const element = <div className="container"></div>;
● JS expressions with curly braces:
const element = <img src={user.avatarUrl}></img>;
● React DOM uses camelCase property naming convention

Setup Meteor App
● Create meteor app:
○ meteor create react-workshop
OR download starter files: https://goo.gl/gYHDUL
● Remove blaze and other packages:
○ meteor remove blaze-html-templates autopublish insecure
● Add React:

Component: App.jsx
// Add: imports/ui/components/App.jsx
import React from 'react';
import { Meteor } from 'meteor/meteor';
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div id="container">
{/* some html elements here */}
</div>
);
}
}

React DOM
What is React DOM?
● React DOM uses Virtual DOM concept
● It is used to manipulate the contents of our app view
● DOM-specific methods can be used at the top level of
our app
● Used via react-dom package

ReactDOM.render()
DOM Specific React Method:
● Renders a React element into the DOM in the supplied
container
● Return a reference to the component
● Controls the contents of the container node you pass
in.

Rendering an Element into the DOM
● Create a <div> in your HTML file:
○ <div id="app"></div>
● This is a "root" DOM node
● Everything inside it will be managed by React DOM.

client/main.html

<head>
<title>Player Stats</title>
</head>
<body>

<div id="app"></div>

</body>

client/main.js
// client/main.js
import { Meteor } from 'meteor/meteor';
import React from 'react';
import { render } from 'react-dom';
import App from '../imports/ui/components/App.jsx';
// Render simple react component at startup
Meteor.startup(() => {
render(<App />, document.getElementById('app'));
});

Rendering React Element
(Simple text render)
// imports/ui/components/App.jsx
// ...
render() {
const staticText = 'Meteor Noida';
return (
<b>Static Text:</b> {staticText}
</div>
);
}
Run the Meteor
app!

Updating React Element
(Text box, update state)
Add State:
// ...
super(props);
this.state = {
text: 'Hello Meteorites!',
};
}
// ...

Update render function:
render() {
// ...
const { text } = this.state;
return (
// ...
<b>Dynamic Text:</b> {text}
<br />
</div>
// ...
);
}

Add input box:
<b>Dynamic Text:</b> {text}
<br />
<input
type="text"
name="updateText"
value={text}
onChange={this.updateText.bind(this)}
/>
</div> See the React DOM
updates in action!

Add state handler:
export default class App extends React.Component {
// ...
}
updateText(e) {
const text = e.target.value;
this.setState({ text });
}
render() {
// …
}
}

React Only Updates What's Necessary
React DOM:
● Compares the element and its children to the
previous one
● Only applies the DOM updates necessary
● To bring the DOM to the desired state.

Conditional Rendering
(Checkbox to show text)
super(props);
this.state = {
text: 'Hello Meteorites!',
show: true,
};
}

render() {
const { text, show } = this.state;
// ...
return (
{/* ... */}
{/* Checkbox to show input text box */}
<b>Show Input Box:</b>
<input
type="checkbox"
name="showInputBox"
checked={show}
onChange={this.toggleInputBox.bind(this)}
/>
<br /><br />
{/* ... */}
</div>
);
}
}

// State handler for checkbox
toggleInputBox(e) {
const show = e.target.checked;
this.setState({ show });
}

{/* ... */}
{/* Conditionally render input text box based on checkbox value */}
{
show
? <div>
<input
type="text"
name="updateText"
value={text}
onChange={this.updateText.bind(this)}
/>
<br />
</div>
: null
}
{/* ... */}
</div>
See the Conditional
Rendering in action!

Using react with meteor

More Related Content

What's hot (20)

Similar to Using react with meteor (20)

More from NodeXperts (20)

Recently uploaded (20)

Using react with meteor

Editor's Notes