Quickstart
A quick dive into getting started with Lore
A quick dive into getting started with Lore
In this step we'll add a Filter component to our interface.
You can view the finished code for this step by checking out the
filtering.1
branch of the completed project.
Create a component called Filter
. We'll be using this component to display a list of links the user can click to filter the data being displayed.
lore generate component Filter
Update the code to look like this:
import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import { Link, IndexLink } from 'react-router';
export default createReactClass({
displayName: 'Filter',
contextTypes: {
user: PropTypes.object.isRequired
},
render() {
const { user } = this.context;
return (
<div className="filter">
<ul className="list-group">
<IndexLink className="list-group-item" activeClassName="active" to="/">
Feed
</IndexLink>
<Link className="list-group-item" activeClassName="active" to={"/users/" + user.id}>
My Tweets
</Link>
</ul>
</div>
);
}
});
import React from 'react';
import PropTypes from 'prop-types';
import { Link, IndexLink } from 'react-router';
class Filter extends React.Component {
render() {
const { user } = this.context;
return (
<div className="filter">
<ul className="list-group">
<IndexLink className="list-group-item" activeClassName="active" to="/">
Feed
</IndexLink>
<Link className="list-group-item" activeClassName="active" to={"/users/" + user.id}>
My Tweets
</Link>
</ul>
</div>
);
}
}
Filter.contextTypes = {
user: PropTypes.object.isRequired
};
export default Filter;
import React from 'react';
import PropTypes from 'prop-types';
import { Link, IndexLink } from 'react-router';
class Filter extends React.Component {
static contextTypes = {
user: PropTypes.object.isRequired
};
render() {
const { user } = this.context;
return (
<div className="filter">
<ul className="list-group">
<IndexLink className="list-group-item" activeClassName="active" to="/">
Feed
</IndexLink>
<Link className="list-group-item" activeClassName="active" to={"/users/" + user.id}>
My Tweets
</Link>
</ul>
</div>
);
}
}
export default Filter;
In the code above, we've added two links; one to display all tweets (the Feed) and one to display only the tweets belonging to a specific user. In this case, we're going to call that link "My Tweets" and use it to display the current user's tweets.
With our Filter
component created, import it into the Layout
component and insert it right below the Profile
:
// src/components/Layout.js
...
import Filter from './Filter';
export default createReactClass({
displayName: 'Layout',
render() {
return (
<div>
<Header />
<div className="container">
<div className="row">
<div className="col-md-3">
<Profile />
<Filter />
</div>
<div className="col-md-offset-1 col-md-6">
{React.cloneElement(this.props.children)}
</div>
</div>
</div>
</div>
);
}
});
// src/components/Layout.js
...
import Filter from './Filter';
class Layout extends React.Component {
render() {
return (
<div>
<Header />
<div className="container">
<div className="row">
<div className="col-md-3">
<Profile />
<Filter />
</div>
<div className="col-md-offset-1 col-md-6">
{React.cloneElement(this.props.children)}
</div>
</div>
</div>
</div>
);
}
}
...
// src/components/Layout.js
...
import Filter from './Filter';
class Layout extends React.Component {
render() {
return (
<div>
<Header />
<div className="container">
<div className="row">
<div className="col-md-3">
<Profile />
<Filter />
</div>
<div className="col-md-offset-1 col-md-6">
{React.cloneElement(this.props.children)}
</div>
</div>
</div>
</div>
);
}
}
...
If you refresh the page you should now see the Filter displayed right below the Profile. Clicking on a link will generate a console error however, as the /users/:userId
route doesn't exist yet. We'll fix that next.
If everything went well, your application should now look like this.
Below is a list of files modified during this step.
import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import { Link, IndexLink } from 'react-router';
export default createReactClass({
displayName: 'Filter',
contextTypes: {
user: PropTypes.object.isRequired
},
render() {
const { user } = this.context;
return (
<div className="filter">
<ul className="list-group">
<IndexLink className="list-group-item" activeClassName="active" to="/">
Feed
</IndexLink>
<Link className="list-group-item" activeClassName="active" to={"/users/" + user.id}>
My Tweets
</Link>
</ul>
</div>
);
}
});
import React from 'react';
import PropTypes from 'prop-types';
import { Link, IndexLink } from 'react-router';
class Filter extends React.Component {
render() {
const { user } = this.context;
return (
<div className="filter">
<ul className="list-group">
<IndexLink className="list-group-item" activeClassName="active" to="/">
Feed
</IndexLink>
<Link className="list-group-item" activeClassName="active" to={"/users/" + user.id}>
My Tweets
</Link>
</ul>
</div>
);
}
}
Filter.contextTypes = {
user: PropTypes.object.isRequired
};
export default Filter;
import React from 'react';
import PropTypes from 'prop-types';
import { Link, IndexLink } from 'react-router';
class Filter extends React.Component {
static contextTypes = {
user: PropTypes.object.isRequired
};
render() {
const { user } = this.context;
return (
<div className="filter">
<ul className="list-group">
<IndexLink className="list-group-item" activeClassName="active" to="/">
Feed
</IndexLink>
<Link className="list-group-item" activeClassName="active" to={"/users/" + user.id}>
My Tweets
</Link>
</ul>
</div>
);
}
}
export default Filter;
import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import Header from './Header';
import Profile from './Profile';
import Filter from './Filter';
export default createReactClass({
displayName: 'Layout',
render() {
return (
<div>
<Header />
<div className="container">
<div className="row">
<div className="col-md-3">
<Profile />
<Filter />
</div>
<div className="col-md-offset-1 col-md-6">
{React.cloneElement(this.props.children)}
</div>
</div>
</div>
</div>
);
}
});
import React from 'react';
import PropTypes from 'prop-types';
import Header from './Header';
import Profile from './Profile';
import Filter from './Filter';
class Layout extends React.Component {
render() {
return (
<div>
<Header />
<div className="container">
<div className="row">
<div className="col-md-3">
<Profile />
<Filter />
</div>
<div className="col-md-offset-1 col-md-6">
{React.cloneElement(this.props.children)}
</div>
</div>
</div>
</div>
);
}
}
export default Layout;
import React from 'react';
import PropTypes from 'prop-types';
import Header from './Header';
import Profile from './Profile';
import Filter from './Filter';
class Layout extends React.Component {
render() {
return (
<div>
<Header />
<div className="container">
<div className="row">
<div className="col-md-3">
<Profile />
<Filter />
</div>
<div className="col-md-offset-1 col-md-6">
{React.cloneElement(this.props.children)}
</div>
</div>
</div>
</div>
);
}
}
export default Layout;
In the next section we'll add the ability to view just the user's tweets.