React prologue and Build a note app
01 Aug 2017 | React Front-end JavaScriptTutorial video in Youtube by Bucky Roberts
-
Download code: https://github.com/buckyroberts/React-Boilerplate, My editon with notes: https://github.com/xy7313/React-Boilerplate. Final note app click here, application code here
- Include JSX
//after download, also can ref online file, <script src="../../js/react.min.js"></script> <script src="../../js/react-dom.min.js"></script> <script src="../../js/browser.min.js"></script>The last line transpile jsx file to plain js file so that browser can understand jsx. There are also some online tools can do the same work for developer.
- an example:
<!DOCTYPE html> <html> <head> <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script> <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js"></script> <script data-require="react@*" data-semver="15.5.0" src=" https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="container"></div> <script type="text/babel"> ReactDOM.render( <h2>Welcome to React!</h2>, document.getElementById('container') ); </script> <script src="script.js"></script> </body> </html> - Include bable: we add a h2 tag into the html element whoes id is ‘container’
<script type="text/babel"> ReactDOM.render( <h2>Welcome to React!</h2>, document.getElementById('container') ); </script> -
Components: parts of your website, entire application is made up of components.
- Super component:
<script type="text/babel"> var BuckysComponent = React.createClass({ //object //return html render: function() { return (<h2>This is a simple component</h2>); } }); ReactDOM.render(<BuckysComponent />, document.getElementById('container')); </script> - Mutiple components
- One component can only return one parent element(div). The render
ReactDOM.render(..,..)can only render only one one parent tag - when we want to return more than one html tags.
<script type="text/babel"> var BuckysComponent = React.createClass({ //object //return html render: function() { return ( <div> <h2>This is a simple component</h2> <p>para</p> </div> ); } }); ReactDOM.render(<div> <BuckysComponent /> <BuckysComponent /> </div>, document.getElementById('container')); </script>
- One component can only return one parent element(div). The render
- Properties:
- make template for one component and customize in different ways. Using curly brace{}
- Property is essentially an HTML attribute that we can pass in to customize our components in different kinds of ways.
<body> <div id="container"></div> <script type="text/babel"> var Movie = React.createClass({ render:function(){ return( <div> <h1>{this.props.title}</h1> <h2>{this.props.genre}</h2> </div> ); } }); ReactDOM.render( <div> <Movie title="Avatar" genre="action"/> <Movie title="The NoteBook" genre="romance"/> <Movie title="Cube" genre="thriller"/> </div>,document.getElementById('container') ); </script> </body> //output: Avatar, action, The NoteBook, romance, Cube, thriller - Event handling
- Example: Built a sticky note app, where users can add new notes, delete or edit notes and write any notes.
- can not use class as prop’s name, because class is one of the reserve words in js
- children property(built-in prop), between the opening tag and closing tag, like: `
hey-sample txt `
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>React-stickyNote</title> <script src="../../js/react.min.js"></script> <script src="../../js/react-dom.min.js"></script> <script src="../../js/browser.min.js"></script> <link rel = "stylesheet" type="text/css" href = "../../css/main.css"> </head> <body> <div id="container"></div> <script type="text/babel"> var Comment = React.createClass({ edit: function(){ alert("edit"); }, remove: function(){ alert("remove"); }, render: function(){ return( <div className = "commentContainer"> <div className = "commentText"> {this.props.children} </div> <button onClick={this.edit} className = "button-primary">Edit</button> <button onClick={this.remove} className = "button-danger" >Remove</button> </div> ); } }); ReactDOM.render( <div className = "board"> <Comment>hey-sample txt</Comment> <Comment>beans</Comment> <Comment>TUNA txt</Comment> </div>,document.getElementById('container') ); </script> </body> </html> - State
- Customize the components using properties and states. Whenever something is gonna stay the same uses properties, whenever changes uses states.
- You don’t need to explicitly say whenever your state changes to redraw a certain part of your webpage, it automatically watches for your states. Whenever their state changes, the part of web page gets redrawn automatically to fit that.
<script type="text/babel"> var CheckBox = React.createClass({ getInitialState: function(){ return {checked:true} }, handleChecked: function(){ this.setState({checked:!this.state.checked}) }, render: function(){ var msg; if(this.state.checked){ msg='checked' }else{ msg='unchecked' } return( <div className = "commentContainer"> <input type = "checkbox" defaultChecked={this.state.checked} onChange = {this.handleChecked}/> <h3>checkBox is {msg}</h3> </div> ); } }); ReactDOM.render( <CheckBox />,document.getElementById('container') ); </script> - Add state to component(contd on the sticky note app)
- Requirements: This note switches bewteen two modes/states: editing, normal. That is, whenever we click edit, the text area can be changed to a form for editing. After complish editing, the form turns to text area.
<script type="text/babel"> var Comment = React.createClass({ getInitialState: function(){ return {editing: false} }, edit: function(){ this.setState({editing:true}); }, save: function(){ this.setState({editing:false}); }, remove: function(){ alert("remove"); }, renderForm: function(){ return( <div className = "commentContainer"> <textarea defaultValue = {this.props.children}></textarea> <button onClick={this.save} className = "button-success" >Save</button> </div> ); }, renderNormal: function(){ return( <div className = "commentContainer"> <div className = "commentText"> {this.props.children} </div> <button onClick={this.edit} className = "button-primary">Edit</button> <button onClick={this.remove} className = "button-danger" >Remove</button> </div> ); }, render: function(){ if(this.state.editing){ return this.renderForm(); }else{ return this.renderNormal(); } } }); ReactDOM.render( <div className = "board"> <Comment>hey-sample txt</Comment> <Comment>beans</Comment> <Comment>TUNA txt</Comment> </div>,document.getElementById('container') ); </script> - Refs (contd on the sticky note app)
- Requirements: Save whatever the textarer looks like now.
- First, get the text just typed
- Second, show it
- eg:
var val = this.refs.newText.value;+<textarea ref = "newText" defaultValue = {this.props.children}></textarea>
- Rearrange multiple independent components – set up a ‘parent’ container (contd on the sticky note app)
- In the note example, we define a borad, which is like a magener of all note components
- unique identifier, key is the way to uniquely identify each child by giving an ID
//add Board in script babel, change ReactDom.render var Board = React.createClass({ getInitialState: function(){ return { comments:[ 'I like bacon', 'want some ice cream', 'done here' ] }; }, render: function(){ return ( <div className = "board"> { //anonymous function, a.k.a a function with no name, key-unique identifier this.state.comments.map(function(text,i){ return (<Comment key = {i}>{text}</Comment>); }) } </div> ); } }); ReactDOM.render(<Board/> ,document.getElementById('container') );
- Updating state and remove notes(contd on the sticky note app)
- clean up the render function
- array.splice(index,num); remove num elements from index of array
//all in var Board removeComment: function(i){ console.log("remove:"+i); var arr = this.state.comments; arr.splice(i,1); this.setState({comments:arr}); }, updateComment: function(newText,i){ console.log("new text:"+newText); var arr = this.state.comments; arr[i] = newText; this.setState({comments:arr}); }, eachComment: function(text,i){ // unique identifier, i: increment for the array return (<Comment key = {i} index = {i}> {text} </Comment>); }, render: function(){ return ( <div className = "board"> {this.state.comments.map(this.eachComment)} </div> ); }
- Passing functions as props (contd on the sticky note app)
- how to call functions from entirely different components? using props
-
Add new component (contd on the sticky note app)
- Js can not figure out the scope, so we need to call band :
<button className = "button-info create" onClick = {this.addComment.bind(null,'Type here')}>New A Comment</button>. Notice that: Don’t .bind in the render() function - that creates a new function every time render is called (which will be often.) .bind in the component constructor. We will create too many comment components and get an error.
An advantage of react
- Never think about re-rendering!
The benefit of this separation of concerns is you don’t have to concern yourself with whether something has been rendered before, or whether it’s the first time. Since React rendering is immutable, the first render and the 100th render of the same component are handled the exact same way. When state changes, Redux only re-renders relevant components on the page.
The reason React is much more successful in this regard is because it applies changes to a ‘Virtual DOM’ and creates a diff of the smallest change set possible, which it then applies to the DOM. Since updating the DOM is the lengthiest part of the render process, this massive reduction in DOM updates greatly improves performance. It means you really can forget about the rendering process, which has never been true before in front-end.
