Downloaded 147 times
![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)
![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/75/Introduction-to-React-JS-for-beginners-17-2048.jpg)
Uploaded byVarun Raj
Introduction to React JS for beginners
- 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.
EngineeringâŚ
More Related Content
![[Final] ReactJS presentation](https://cdn.slidesharecdn.com/ss_thumbnails/65cfd4f9-740f-4f41-b769-b496b6e60802-170119143904-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to Introduction to React JS for beginners
![Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology](https://cdn.slidesharecdn.com/ss_thumbnails/iwtclass-9-200722155940-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Introduction to React JS for beginners
- 1.
- 2. Varun Raj Sr. ApplicationArchitect @ Skcript varun@skcript.com @zathvarun About Me
- 3. Library for buildingUser Interfaces V part of MVC ( Model View Controller ) Not a front end framework What is React ?
- 4. And React isnot a templating library
- 5. Why To UseReact ? 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 usesa 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.
- 8.
- 9. Components Everything is acomponent 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 attributesfor 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 ofa 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 ActualView 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 arepointed 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 CamelCaseEvent Handlers onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver
- 16.
- 17. TODO LIST EXAMPLE varTodoList = 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 whendeveloping in React HTML to JSX Compiler React Developer Tools for Chrome React Developer Tools for Firefox
- 19. Sites built withReact Facebook Whatsapp Web netflix BlankCursor Instagram Producthunt messenger.com
- 21. Thank You ! varun@skcript.com@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