React JS REACT JS Library for Creating Interfaces
React JS
REACT. JS • Library for Creating Interfaces • Focus on the View • Virtual DOM = JS Object: efficiently update & render components when data changes • Components and subcomponents nested structure (like HTML) • Data Flow • States store what is happening in application and react to changes in state or data • Props used to pass information between main component and subcomponents
DOM (DOCUMENT OBJECT MODEL) • Document Object Model makes every addressable item in a web page/interface an Object that can be manipulated for color, transparency, position, sound and behaviors. • Every HTML Tag is a DOM object
DOM (DOCUMENT OBJECT MODEL) HTML Java. Scri pt CSS DOM
REACT COMPONENTS // Create a component name Message. Component var Message. Component = React. create. Class({ render: function() { return ( <div>{this. props. message}</div> ); } Like Java. Script functions, but work in isolation and return HTML via a render() function. • accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. }); // Render an instance of Message. Coponent into document body React. DOM. render(<Message. Component message=“Hello!” />, document. body ); Class Component class My. Comp extends React. Component { render () { HTML }} React. DOM. render(<My. Comp />, location in DOM)) React. DOM – render elements in the actual DOM using. render(*) React. DOM. render(<My. Component />, document. get. Element. By. Id("react-contain
REACT COMPONENTS – A N O T H E R EXAMPLE class Car extends React. Component { render() { return <h 2>Hi, I am a Car!</h 2>; } } React. DOM. render(<Car />, document. get. Element. By. Id('root')); • UI elements changing dynamically
REACT COMPONENTS –ANOTHER EXAMPLE CONT. • TRY IT OUT IN W 3
REACT COMPONENTS // Create a component name Message. Component var Message. Component = React. create. Class({ render: function() { return ( <div>{this. props. message}</div> ); } }); What is JSX? // Render an instance of Message. Coponent into document body React. DOM. render( <Message. Component message=“Hello!” /> document. body ); JSX = is javascript XML See W 3 schools to learn more about writing JSX Execute the expression 5 + 5: const myelement = <h 1>React is {5 + 5} times better with JSX</h 1>; JSX=extension of Java. Script that allows you to write HTML directly within Java. Script
REACT COMPONENTS: CLASS O R FUNCTION • We have seen examples of “Class” Components • There also just simple “function” Components (these are simpler) Class Component Example Function Component Example class Welcome extends React. Component { render() { return <h 1>Hello, {this. props. name}</h 1>; } } function Welcome(props) { return <h 1>Hello, {props. name}</h 1 }
EXAMPLE, UPDATE EVERY 1 SECOND – UPDATE ONLY WHAT IS NECESSARY • Try it out
REACT. JS – PROPERTIES • Properties • Class component: this. props contains props defined by caller of this component • {this. props. text} inside JSX <My. Comp text="Hello World"/> const element = <Welcome name="Sara" />; function Welcome(props) { return <h 1>Hello, {props. name}</h 1>; } const element = <Welcome name="Sara" />; React. DOM. render( element, document. get. Element. By. Id('root') ); HTML: <div id="root"></div>
LET’S MODIFY OUR PREVIOUS CLOCK EXAMPLE TO USE PROPERTIES function Clock(props) { return ( <div> <h 1>Hello, world!</h 1> <h 2>It is {props. date. to. Locale. Time. String()}. </h 2> </div> ); } function tick() { React. DOM. render( <Clock date={new Date()} />, document. get. Element. By. Id('root') ); }
LEARN REACT – SOME RESOURCES https: //www. codecademy. com/lrn/react-101 https: //css-tricks. com/learning-react-redux/
MORE TO LEARN…GO TO REACT WEBSITE Code extends Component, • method called update. And. Notify that will set the background color state and then set it back to the initial value after a second (1000 ms), • component. Will. Unmount method to clear the timer up, and a render method. This code looks like this: class Label extends React. Component state = { background. Colour: "inherit" }; component. Will. Unmount() { #lifecycle method if (this. update. Timer) { clear. Timeout(this. update. Timer); } } update. And. Notify = () => { if (this. update. Timer) return; this. set. State({ background. Colour: "#9 b 34 ee" }); this. update. Timer = set. Timeout(() => { this. set. State({ background. Colour: "inherit" }); this. update. Timer = null; }, 1000); } render() { return ( <span class. Name="label-text" style={{ background. Color: this. state. background. Colour }}> {this. props. text} </span> ); } }
- Slides: 14