Introduction Web Development using ReactJS

Introduction Web Development using ReactJS

• 1.
  REACT JS INTRODUCTION
• 2.
  CONTENT • Introduction ReactJS and JSX • Component, State, Props. • Component API, Life Cycle. • Pros & Cos • Demonstration
• 3.
  WHAT IS REACT? •A JavaScript Library For Building User Interfaces • Renders your UI and responds to events. • It also uses the concept called Virtual DOM, creates an in-memory data structure cache, enumerates the resulting differences, and then updates the browser’s displayed DOM efficiently. • One of the unique features of React.js is not only it can perform on the client side, but it can also be rendered on the server side, and they can work together interoperably.
• 4.
  #1 Everything isa Component: React has no… … controllers … directives … templates … global event listeners … models … no view models Just Components
• 5.
  #2 Single Sourceof Truth Traditional data flows No framework: Any component can communicate with any other component React: 1-way data flow
• 6.
  JSX • JSX =Javascript + XML. const element = <h1>Hello, world!</h1>;
• 7.
  JSX <script> var helloEl =React.createElement('div', { className: 'hello' }, 'Hello, world!'); React.render( helloEl, document.body ); </script> <script type="text/jsx"> var helloEl = <div className: "hello">Hello, world!</div>; React.render( helloEl, document.body ); </script>
• 8.
  JSX <script> var helloEl =React.createElement('div', { className: 'hello' }, 'Hello, world!'); React.render( helloEl, document.body ); </script> <script type="text/jsx"> var helloEl = <div className: "hello">Hello, world!</div>; React.render( helloEl, document.body ); </script>
• 9.
  COMPONENT • Components letyou split the UI into independent, reusable pieces, and think about each piece in isolation. • Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
• 10.
  COMPONENT class TodoInput extendsReact.Component { render() { return ( <div className="form-inline"> <input className="form-control" type="text" value={this.state.content} onChange={this.updateState}/> </div> ); } }
• 11.
  COMPONENT - PROPS
• 12.
  COMPONENT - STATE classTodoInput extends React.Component { constructor(props) { super(props); //Call this function because 'this' is not allowed before super(). this.state = { content: '' }; this.addTodo = this.addTodo.bind(this); } updateState(e) { this.setState({content: e.target.value}); } addTodo() { // We of course not declare onSave function of this component at parent component // Refer to: Body.jsx for more information // We declare this onSave at mapDispatchToProps function this.props.onSave.call(this, this.state.content, this.props.todo && this.props.todo.id || null); this.setState({ content: '' }) } render() { return ( <div className="form-inline"> <div className="form-group"> <input className="form-control" type="text" value={this.state.content} onChange={this.updateState}/> </div> </div> ); } }
• 13.
  REACT COMPONENT LIFECYCLE •React enables to create components by invoking the React.createClass() method which expects a render method and triggers a lifecycle that can be hooked into via a number of so called lifecycle methods. • This short article should shed light into all the applicable functions. • Understanding the component lifecycle will enable you to perform certain actions when a component is created or destroyed. Further more it gives you the opportunity to decide if a component should be updated in the first place and to react to props or state changes accordingly.
• 14.
  THE LIFECYCLE - INITIALIZATION •Code and example here
• 15.
  THE LIFECYCLE - STATECHANGES • Code and example here
• 16.
  THE LIFECYCLE - PROPSCHANGES • Code and example here
• 17.
  THE LIFECYCLE - UNMOUNTING •Code and example here
• 18.
  PROS & COSOF REACT.JS THE GOOD POINTS: • React.js is extremely efficient - Virtual DOM • It makes writing Javascript easier - React.js uses a special syntax called JSX • It gives you out-of-the-box developer tools - React.js chrome extension • It’s awesome for SEO • UI Test Cases THE BAD: • React.js is only a view layer. • Integrating React.js into a traditional MVC framework would require some configuration • There is a learning curve for beginners who are new to web development.
• 19.
  Why you shoulduse React.js: • React.js works great for teams, strongly enforcing UI and workflow patterns. • The user interface code is readable and maintainable. • And also, there is now a lot of demand for developers with ReactJS experience.
• 21.
  DEMONSTRATION [Complete Demo]