The productive developer guide to React
Download as PPTX, PDF2 likes1,327 views
![Maurice De Beijer [MVP], profile picture](https://cdn.slidesharecdn.com/profile-photo-mauricedb-48x48.jpg?cb=1750747544)
This document serves as a guide for developers on using React, covering its advantages, disadvantages, and key concepts such as components, JSX, props, state, and event handling. It also introduces Redux for state management and React Router for routing needs, providing best practices for building efficient applications. The guide emphasizes the importance of structured components and adherence to best practices for effective React development.
![An input form
class UserForm extends Component {
state = { firstName: "Maurice" };
onChange = e => this.setState({ [e.name]: e.value });
render() {
const { firstName } = this.state;
return (<form>
<InputWithLabel label="First name:"
value={firstName}
name="firstName"
onChange={this.onChange}
/>
</form>);
}
}
© ABL - The Problem Solver 19](https://image.slidesharecdn.com/theproductivedeveloperguidetoreact-171010090114/85/The-productive-developer-guide-to-React-19-320.jpg)
![The reducer
const movies = function(state = [], action) {
switch (action.type) {
case "MOVIES-LOADED":
return action.movies;
default:
return state;
}
};
© ABL - The Problem Solver 24](https://image.slidesharecdn.com/theproductivedeveloperguidetoreact-171010090114/85/The-productive-developer-guide-to-React-24-320.jpg)
The productive developer guide to React
- 1. The productive developer guide to React Maurice de Beijer @mauricedb
- 2. Who am I? Maurice de Beijer The Problem Solver MicrosoftAzure MVP Freelance developer/instructor Twitter: @mauricedb and @React_Tutorial Web: http://www.TheProblemSolver.nl E-mail: [email protected] 2© ABL - The Problem Solver
- 3. Topics What is React Pros and Cons Create ReactApp Building blocks Redux React-Router Best practices © ABL - The Problem Solver 3
- 4. React is aJavaScript library for building user interfaces - Facebook - © ABL - The Problem Solver 4
- 5. Companies Using React Facebook Instagram AirBNB Cloudflare Dropbox KhanAcademy Netflix Salesforce Twitter Uber Visa Wired Wordpress And many more… © ABL - The Problem Solver 5
- 6. React Tradeoffs Advantages Large community Small runtime library Fast Stable Simple and predictable API Server side rendering Open source (MIT license) Dedicated team at Facebook Disadvantages JavaScript focused Markup inside JavaScript Increases memory pressure Driven by Facebooks needs Not very opinionated © ABL - The Problem Solver 6
- 7. Want opinionated? © ABL - The Problem Solver 7
- 8. Components The basic building block of a React application Let you split the UI into independent pieces Think about each component in isolation A React application is a tree of components Components manage state And pass properties to child components as needed © ABL - The Problem Solver 8
- 9. Component tree Application Login Main Page Header Billboard Genre List Genre* Movie* Expanded Movie Playing Movie Simplified Netflix SPA © ABL - The Problem Solver 9
- 10. JSX React is normally written using JSX syntax Combines ECMAScript and markup in one file Transpiled to regular ECMAScript for the browser Babel TypeScript © ABL - The Problem Solver 10
- 11. Minimal Example import React, { Component } from "react"; import ReactDOM from "react-dom"; class App extends Component { render() { return (<div className="app"> <h2>ReactJS</h2> <OtherComponent /> </div>); } } ReactDOM.render(<App />, document.getElementById("app")); © ABL - The Problem Solver 11
- 12. Getting Started © ABL - The Problem Solver 12
- 13. Create React App © ABL - The Problem Solver 13
- 14. Create React App Quickly start on a new React application Uses best practices, tools and libraries Babel Webpack Webpack development server Unit testing with Jest ESLint Service workers Add other packages like Redux or React-Router as needed Use the “eject” option to get full control At the cost of loosing very easy updates © ABL - The Problem Solver 14
- 15. NWB A great alternative to Create ReactApp © ABL - The Problem Solver 15
- 16. Props Props are “parameters” passed into a component Used to provide a component with data to work with Can be a function to call back into a parent component Props should never be modified © ABL - The Problem Solver 16
- 17. State React uses a one way data flow State is data owned by a single component Can be passed to a child component as a prop Updating state in a component using setState() re-renders the component This triggers child components to re-render © ABL - The Problem Solver 17
- 18. Event handling Very similar to native event handling in HTML React binds event handlers using camelCase a naming convention React passes a synthetic event object The event object is reused between events! Use stopPropagation() and preventDefault() instead of return false © ABL - The Problem Solver 18
- 19. An input form class UserForm extends Component { state = { firstName: "Maurice" }; onChange = e => this.setState({ [e.name]: e.value }); render() { const { firstName } = this.state; return (<form> <InputWithLabel label="First name:" value={firstName} name="firstName" onChange={this.onChange} /> </form>); } } © ABL - The Problem Solver 19
- 20. An input component class InputWithLabel extends Component { onChange = e => { const { name, onChange } = this.props; const { value } = e.target; onChange({ name, value }); }; render() { const { label, value } = this.props; return ( <div> <label>{label}</label> <input type="text" value={value} onChange={this.onChange} /> </div> ); } } © ABL - The Problem Solver 20
- 21. Redux Redux is a predictable state container for JavaScript apps Not just for React React bindings provided using the “react-redux” package Created by Dan Abramov Now a member of the React team at Facebook MobX is a great alternative to Redux © ABL - The Problem Solver 21
- 22. A Redux app import { Provider } from "react-redux"; const App = () => ( <div> <h1>The Movies</h1> <MoviesList /> </div> ); ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById("app") ); © ABL - The Problem Solver 22
- 23. The Redux store import { combineReducers, createStore } from "redux"; const reducers = combineReducers({ movies // Other reducers }); const store = createStore(reducers); © ABL - The Problem Solver 23
- 24. The reducer const movies = function(state = [], action) { switch (action.type) { case "MOVIES-LOADED": return action.movies; default: return state; } }; © ABL - The Problem Solver 24
- 25. The action creator const moviesLoaded = (movies) => { return { type: 'MOVIES-LOADED', movies } }; © ABL - The Problem Solver 25
- 26. The component class MovieList extends React.Component { // ... } const mapStateToProps = (state) => ({ movies: state.movies }); const mapDispatchToProps = (dispatch) => ({ moviesLoaded: movies => dispatch(moviesLoaded(movies)) }); export default connect( mapStateToProps, mapDispatchToProps)( MovieList); © ABL - The Problem Solver 26
- 27. React-Router The most popular solution for routing in React Not from the team at Facebook A collection of navigational components Use the “react-router-dom” NPM package © ABL - The Problem Solver 27
- 28. React-Router import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom"; class App extends Component { render() { return (<BrowserRouter> <div className="container"> <h1>React-Router Example</h1> <Switch> <Route path="/movies" component={MovieList} /> <Route path="/movie/:id" component={MovieEdit} /> <Redirect to="/movies" /> </Switch> </div> </BrowserRouter>); } } © ABL - The Problem Solver 28
- 29. Best practices Components Keep components as small as possible Only use props and state in the render function Use pure functional components when possible Use Presentational and Container components Validate props in a component using prop-types © ABL - The Problem Solver 29
- 30. Best practices Performance Use immutable objects and PureComponent Don’t define fat arrow functions in the render © ABL - The Problem Solver 30
- 31. Best practices State Don’t store props or derived data in component state Only store data in state that is needed for rendering Use the functional version of setState() Don’t use Redux or MobX if you don’t need them © ABL - The Problem Solver 31
- 32. Conclusion React is a great library for building user interfaces It’s fast and easy to use But not a perfect fit for every application Using Create React App is a great way to get started You can “eject” to get full control A React application is about Components With State and Props Redux and MobX are great tools for externalizing state Remember and use the best practices! © ABL - The Problem Solver 32
- 33. Thank you Maurice de Beijer - @mauricedb © ABL - The Problem Solver 33
Editor's Notes
- #34: https://www.flickr.com/photos/stevendepolo/4582437563/