A cloud service company for oil and gas
Formerly:
Applies to any switch
create-react-appreact-routerreactProperties flow down; actions flow up
Only render sub components that actually change
Used properly:
JavaScript extension syntax
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
render() returns a React element<ShoppingList name="Mark" />
render() <div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
render()render() does not mutate statecreate-react-appcreate-react-appnpm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
creat-react-app Toolsnpm startnpm testnpm run buildreact-routerreduxSlides from talk given on Mon 21st, 2017 at the HTML5 Denver Meetup Group.
React is a popular JavaScript library from Facebook. React provides a view implementation for Web applications.
In this talk, Geoff Filippi (Senior Architect at DISH Network), will start by describing "What is React?". We will discuss how React uses components to build applications. Components can be implemented in JSX, an alternate version of JavaScript that allows mixing HTML-like markup and JavaScript. Input is passed into a component through props. Components return elements for display on the screen.
We will have a look at
create-react-app, a quick React application starter.create-react-appconfigures Babel to transpile JSX to JavaScript, and Webpack to build your application.Finally, Geoff will demonstrate how to create a simple React app.
This slideshow was written using reveal.js