Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Intro

React Intro

React is a JavaScript framework used for building dynamic UIs. Learn why React is interesting and what makes it different from the other frameworks for JS UIs.

Avatar for Yashu Mittal

Yashu Mittal

April 08, 2018
Tweet

More Decks by Yashu Mittal

Other Decks in Programming

Transcript

  1. (aside)(JSX(Syntax // JSX as authored <div className="app"> <h2>Hello World</h2> <p>Welcome

    to {this.props.appName}</p> <UserList users={activeUsers} /> </div> // output JS React.createElement("div", {className: "app"}, React.createElement("h2", null, "Hello World"), React.createElement("p", null, "Welcome to ", this.props.appName), React.createElement(UserList, {users: activeUsers}) )
  2. User%profile%component var Profile = React.createClass({ githubUrl: function() { return "https://github.com/"

    + this.props.user.github; }, render: function() { return ( <li className="user"> <a href={this.githubUrl()}> {this.props.user.name} on github </a> </li> ) } });
  3. User%List%Component var UserList = React.createClass({ renderUser: function(user) { return <Profile

    user={user} /> }, render: function() { return ( <ul> {this.props.users.map(this.renderUser)} </ul> ) } })
  4. App#Component var App = React.createClass({ render: function() { return (

    <div className="app"> <h1>Active Users</h1> <p>{this.props.users.length} active users</p> <UserList users={this.state.users} /> </div> ) } })
  5. Boot$The$App var users = [ { name: "Chris", github: "christoomey"

    }, { name: "Joe", github: "jferris" }, { name: "Ben", github: "r00k" }, { name: "Chad", github: "cpytel" } ]; React.renderComponent( <App users={users} />, document.getElementById('content') );