ReactJS For Beginners

Put together a presentation for our local team at @MessageMedia

Transcript

1. ReactJS Beginner Guide Wri$en by Callum Silcock (csi-lk) for MessageMedia
2. What is ReactJs • JS Library for building /user interfaces/ • By Instagram -> Facebook
3. Concepts - Reusable components • All components are re-usable, even across projects • Component names start with a capital le9er • (lowercase are reserved for HTML elements) • Every component has a list of a9ributes (properDes, props)
4. Concepts - JSX • React.CreateElement vs JSX JSX Bu'on Example: const Button (props) => ( <button type="submit">{props.label}</button> ) ReactDOM.render(<Button label="Save" />, mountNode)
5. React.CreateElement Bu0on Example const Button (props) => React.createElement( "button", { type: "submit" }, props.label ) ReactDOM.render( React.createElement(Button, { label: "Save" }), mountNode ) You can see why we use JSX instead of createElement calls, very similar to HTML makes it easier to read
6. Concepts - Javascript expressions inside JSX Simple example: const RandomValue = () => ( <div> { Math.floor(Math.random() * 100) } </div> ) ReactDOM.render(<RandomValue />, mountNode);
7. Concepts - Javascript expressions inside JSX This allows us to render with those props I was talking about earlier const Message = ({message}) => ( <div> {message} </div> ) ReactDOM.render( <Message message="thầy Callum" />, mountNode )
8. Concepts - Javascript expressions inside JSX We can also render components inside other components (using children) const Strong = props => ( <strong>{props.children}</strong> ) const Paragraph = props => ( <p>{props.children}</p> ) ReactDOM.render( <Paragraph>Did you hear that Callum <Strong>is awesome!</strong></Paragraph>, mountNode )
9. Concepts - You can use Javascript classes to define components • Why do we do this? • Scoped func4ons / variables
10. class Button extends React.Component { clickCounter = 0; handleClick = () => console.log(`Clicked: ${++this.clickCounter}`) render() { return ( <button id={this.id} onClick={this.handleClick}> {this.props.label} </button> ) } } ReactDOM.render(<Button label="Awesome" />, mountNode)
11. Concepts - Events Big differences from DOM "All React elements a-ributes (events included) are named using camelCase, rather than lowercase. It’s onClick, not onclick." And "We pass an actual JavaScript func3on reference as the event handler, rather than a string. It’s onClick={handleClick}, not onClick="handleClick"."
12. Concepts - State • I’ve now showed you two types of components, state only applies to class based components, other components are classified as dumb or stateless • Hand over to eggheadio - Use Component State with React from @kentcdodds on @eggheadio • This is the most important thing to learn • React monitors every component for state changes
13. Concepts -Lifecycle • Remember our previous stateful component • getIni3alState -> componentWillMount -> render -> componentDidMount • componentWillUnmount • Stop Memory Leaks with componentWillUnmount Lifecycle Method in React from @kentcdodds on @eggheadio
14. Concepts - Virtual DOM • ReactJS image • React uses dom diffing The Virtual DOM is an abstrac3on of the HTML DOM. It is lightweight and detached from the browser-specific implementa3on details. Since the DOM itself was already an abstrac3on, the virtual DOM is, in fact, an abstrac3on of an abstrac3on. • Watches for changes and Reacts
15. Resources • React components lifecycle diagram • All the fundamental React.js concepts, jammed into this single Medium ar;cle • Beginner Guide to ReactJS • The difference between Virtual DOM and DOM - React Kung Fu