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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Using react with meteor

Semelhante a Using react with meteor (20)

Mais de NodeXperts

Mais de NodeXperts (20)

Último

Último (20)

Using react with meteor

Notas do Editor