nano vazquez
@nanovazquez87
Full-stack developer (10+ years)
International speaker
TechLead @ MuleSoft, a Salesforce company
Co-organizer of conferences & meetups
ReactBA, .NETConfAR & DevDayAr
HOw can we build APPS in a complex and dynamic environment?
A desktop app (ReactXP)
A web app (React)
A mobile app (no idea)
"CRUD" apps (SSR)
IDEs (React + TypeScript)
Remote teams everywhere
Priorities changing very often
Everything is connected
Any kind of app
All levels of complexity
You
are
doomed
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
import { ApplicationsTable, Sidebar } from 'src/components';
class Application extends React.PureComponent {
render() {
const { items, selectedItem } = this.props;
return (
<div className="applications-page">
<ApplicationsTable items={items} />
<Sidebar selectedItem={selectedItem} />
</div>
);
}
}
import { ApplicationsTable, Sidebar } from 'src/components';
class Application extends React.PureComponent {
render() {
const { items, selectedItem } = this.props;
return (
<div className="applications-page">
<ApplicationsTable items={items} />
<Sidebar selectedItem={selectedItem} />
</div>
);
}
}
Components = Modularity + encapsulation
<Button
/** Component content */
children: any,
/** Determines the style of the button */
kind?: KindT,
/** Theme object for the component */
theme?: ThemeT,
/** ID applied to Button component */
testId?: string,
/** Provides an alternative style with transparent background */
noFill?: boolean,
/** Handler called when the user clicks the component */
onClick?: () => void,
/** className applied to the component */
className?: string,
/** If true, the component is disabled */
disabled?: boolean,
/** If true, displays a loading indicator and disables the component */
isLoading?: boolean,
/** If true, sets rounded borders in the component */
isCircular?: boolean
>
Click me
</Button>
import React from "react";
import styles from "./styles.module.css";
import { IProps } from "./types";
export default class TopBar extends React.PureComponent<IProps> {
static defaultProps = {
productName: "Anypoint Platform"
};
render() {
const { productName, user } = this.props;
return (
<div className={styles.topBar}>
<div className={styles.hamburger} />
<div className={styles.product}>{productName}</div>
<div className={styles.settings}>
<span className={styles.help}>?</span>
{user && <span className={styles.userInitials}>{user.initials}</span>}
</div>
</div>
);
}
}
import { IUser } from "../types";
export interface IProps {
/** The name of the active product */
productName?: string;
/** The user logged in */
user?: IUser;
}
export interface IUser {
id: string;
name: string;
initials: string;
}
import React from "react";
import { IProps } from "./types";
import { IPage } from "../types";
import styles from "./styles.module.css";
export default class SidePanel extends React.PureComponent<IProps> {
static defaultProps = {
pages: []
};
getPage = (page: IPage) => {
...
}
render() {
const { pages } = this.props;
return (
<div className={styles.sidePanel}>
{pages.map(this.getPage)}
</div>
);
}
}
import React from "react";
...
export default class SidePanel extends React.PureComponent<IProps> {
...
getPage = (page: IPage) => {
const { activePage } = this.props;
const cssClassNames = activePage.url === page.url
? styles.activeLink
: styles.link;
return (
<a key={page.url} href={page.url} className={cssClassNames}>
{page.title}
</a>
);
}
render() {
...
}
}
import React from "react";
import ReactTable from "react-table";
import applicationsService from "../../services/applicationsService";
...
export default class ApplicationsPage extends React.PureComponent<IProps, IState> {
state = { applications: [] };
componentDidMount() {
applicationsService.getApplications().then(applications => {
this.setState({ applications });
});
}
render() {
const { applications } = this.state;
const columns = [ { Header: "Name", accessor: "name" }, ...];
return (
<div className={styles.applicationsPage}>
<ReactTable data={applications} columns={columns} className={styles.table} />
</div>
);
}
}
import React, { Component } from "react";
import { ApplicationsPage, SidePanel, TopBar } from "./components";
import styles from "./App.module.css";
class App extends Component {
render() {
return (
<div className={styles.app}>
<TopBar user={user} productName={productName} />
<SidePanel pages={pages} activePage={activePage} />
<ApplicationsPage />
</div>
);
}
}
export default App;