ReactJS Beginner Guide Wri$en by Callum Silcock (csi-lk) for MessageMedia 

What is ReactJs • JS Library for building /user interfaces/ • By Instagram -> Facebook 

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) 

Concepts - JSX • React.CreateElement vs JSX JSX Bu'on Example: const Button (props) => ( {props.label} ) ReactDOM.render(, mountNode) 

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 

Concepts - Javascript expressions inside JSX Simple example: const RandomValue = () => ( ) ReactDOM.render(, mountNode); 

Concepts - Javascript expressions inside JSX This allows us to render with those props I was talking about earlier const Message = ({message}) => ( ) ReactDOM.render( , mountNode ) 

Concepts - Javascript expressions inside JSX We can also render components inside other components (using children) const Strong = props => ( {props.children} ) const Paragraph = props => (

{props.children}

) ReactDOM.render( Did you hear that Callum is awesome!, mountNode ) 

Concepts - You can use Javascript classes to define components • Why do we do this? • Scoped func4ons / variables 

class Button extends React.Component { clickCounter = 0; handleClick = () => console.log(`Clicked: ${++this.clickCounter}`) render() { return ( {this.props.label} ) } } ReactDOM.render(, mountNode) 

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"." 

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 

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 

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 

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