Introduction to React JS for beginners
Download as PPTX, PDF2 likes5,755 views
- React is a JavaScript library for building user interfaces that uses a virtual DOM for faster re-rendering on state changes. - Everything in React is a component that can have states, props, and lifecycle methods like render(). Components return JSX elements. - Props are used for passing data to components in a unidirectional flow, while states allow components to re-render on changes. - The render() method returns the view, accessing props and state values. Forms and events also follow React conventions.
![TODO LIST EXAMPLE
var TodoList = React.createClass({
render: function() {
var createItem = function(item) {
return <li key={item.id}>{item.text}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
});
var TodoApp = React.createClass({
getInitialState: function() { return {items: [], text: ''};},
onChange: function(e) {
this.setState({text: e.target.value});
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
render: function() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.onChange} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
</form>
</div>
);
}
});
ReactDOM.render(<TodoApp />, mountNode);](https://image.slidesharecdn.com/gzdnak4jtlm5lj8b6wxp-signature-127b012cf512ed0a6122b6d9d0614bb353ce4f4bdcf9eca093b4c4cdff411a6c-poli-160130135642/85/Introduction-to-React-JS-for-beginners-17-320.jpg)
Introduction to React JS for beginners
- 2. Varun Raj Sr. Application Architect @ Skcript [email protected] @zathvarun About Me
- 3. Library for building User Interfaces V part of MVC ( Model View Controller ) Not a front end framework What is React ?
- 4. And React is not a templating library
- 5. Why To Use React ? Simple Declarative Build Reusable Components
- 6. React Uses JSX (JavaScript & XML) Standard HTML - Accept all attributes Little modifications like className instead of class var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox"> Hello, world! I am a CommentBox. </div> ); } });
- 7. Virtual DOM React uses a concept called Virtual DOM It’s Faster for re-rendering the entire component on every state change. Virtual DOM uses diff algorithm. Can rendered in server and synced with local client.
- 9. Components Everything is a component in react Created using React.createClass Key functions for every components getInitialState: function() {}, componentWillMount : function() {}, componentDidMount : function() {}, componentWillUnmount : function() {}, componentDidUnmount : function() {}, render : function() {}
- 11. Props Loaded as attributes for components Used for unidirectional data flow immutable or read only var CommentBox = React.createClass({ render: function() { return ( <div className="commentBox">{this.props.message}</div> ); } }); ReactDOM.render(<CommentBox message=”Say Hello”/>,document.getElementById('content'));
- 12. Defines states of a component. Changes to the state causes re rendering of the entire component. getInitialState() is used to set initial states of the component setstate({state: value}) is used to update the state States
- 13. Render Function The Actual View Code is written here States and Props both are read-only here Returns JSX Elements render: function() { return ( <div className="commentBox">{this.props.message}</div> ); }
- 14. Forms Form elements are pointed or named with ref attribute From values are extracted like this.refs.searchInput.value where searchInput is the ref of the input element Default value is set with help of defaultValue attribute.
- 15. Events Cross Browser Events CamelCase Event Handlers onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver
- 17. TODO LIST EXAMPLE var TodoList = React.createClass({ render: function() { var createItem = function(item) { return <li key={item.id}>{item.text}</li>; }; return <ul>{this.props.items.map(createItem)}</ul>; } }); var TodoApp = React.createClass({ getInitialState: function() { return {items: [], text: ''};}, onChange: function(e) { this.setState({text: e.target.value}); }, handleSubmit: function(e) { e.preventDefault(); var nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]); var nextText = ''; this.setState({items: nextItems, text: nextText}); }, render: function() { return ( <div> <h3>TODO</h3> <TodoList items={this.state.items} /> <form onSubmit={this.handleSubmit}> <input onChange={this.onChange} value={this.state.text} /> <button>{'Add #' + (this.state.items.length + 1)}</button> </form> </div> ); } }); ReactDOM.render(<TodoApp />, mountNode);
- 18. Useful tools when developing in React HTML to JSX Compiler React Developer Tools for Chrome React Developer Tools for Firefox
- 19. Sites built with React Facebook Whatsapp Web netflix BlankCursor Instagram Producthunt messenger.com
- 21. Thank You ! [email protected] @zathvarun
Editor's Notes
- #4: Can also be used with angularjs React has routes
- #7: Written inside render fucntion Add tags must be closed properly purely xml has inline event lisenters
- #8: Not similar to Shadow DOM can be seen in normal dom but with special attributes like react-id
- #9: Also there are few other things like Mixins refs
- #10: Can be nested Mounted unmounted dynamically They as like partials but in different manner
- #11: Completly react Whatsapp Web
- #12: Read Only Attributes Sent from the render call can also set default props from component with special function call getDefaultProps Usually props to be chaged are stored to statees and then the state is modified
- #13: Initialied based on the some condition or from props states controls the modification changes reflects in rerendering
- #18: Example of todo list application from the official docs