Lecture 8. ReactJS 1 / 24

Transcription

1 Lecture 8 ReactJS 1 / 24

2 Agenda 1. JSX 2. React 3. Redux 2 / 24

3 JSX 3 / 24

4 JavaScript + HTML = JSX JSX is a language extension that allows you to write HTML directly into your JavaScript files. Behind the scenes, it converts all the HTML text to React components. This means that we use ReactDOM.render to render JSX. This function takes in a JSX object (which it renders) and a plain DOM element (which it renders the JSX inside of). var mydiv = ( <div class="jsx"> Greetings from JSX world! </div> ); ReactDOM.render(myDiv, getelementbyid('container')); 4 / 24

5 The Transformation JSX maps directly into React syntax, so you never actually have to dig down into the React element-creation API. Here's a side-by-side comparison of the JSX syntax and the equivalent JavaScript: <ul id="list"> <li>one thing</li> <li>another</li> </ul> React.createElement( "ul", { id: "list" }, React.createElement( "li", null, "One thing" ), React.createElement( "li", null, "another" ) ); 5 / 24

6 JSX Syntax It's pretty much HTML, with a few key differences: Some common attribute names (like class and for ) are reserved in JavaScript, so they have different names in JSX ( classname and htmlfor, respectively). Custom attributes (any attribute not in the HTML spec) must have a data- prefix. Inline styles must be specified as objects, not strings. Properties are camelcased instead of kebab-case. Example: <div style={{color: 'white', fontsize:'12px'}}> 6 / 24

7 Computed Expression Values What makes JSX useful is that we don't need to know all the values of the attributes ahead of time. So we can use it as an easy templating engine. For instance, here's an example of a simple login/logout button. <a classname="button" href={window.loggedin? '/logout' : '/login'} > {window.loggedin? 'Log Out' : 'Log In'} </a> In reality, though, these values won't be global - they'll actually come from a React component! 7 / 24

8 Side Note: How JSX is transformed We're going to use Browserify to bring the require syntax from Node to our browser. It generates one big JS file by parsing the syntax of your program for require calls and replacing them with the actual code. As it does this, it also transforms JSX files into plain JS files. Now, instead of including all the <script> tags for our JS files, we only need to include the one that Browserify gives us. <script src="js/build/main.js"></script> 8 / 24

9 Using Browserify With Browserify, we just use the same syntax that we're used to from Node. // require Lodash from node_modules var _ = require('lodash'); // require some local file var utils = require('./utils/index.js'); // export an object to be required elsewhere module.exports = [1, 2, 3, 4]; 9 / 24

10 React 10 / 24

11 Putting the "V" in "MVC" React is often used as the View in a Model-View- Controller architecture. It's a really efficient way to update the DOM in response to state changes because it only re-renders things that have changed, rather than just re-rendering everything. React doesn't really have any utilities for modeling data. It can easily be used with any model framework, including Backbone models. 11 / 24

12 Components Components are the basic building blocks of React. A React application is just a tree of components, each representing a different part of the DOM. 12 / 24

13 Creating Components Components are created using React.createClass. The only required method is render (though we'll discuss many others). This method simply returns a JSX representation of the component. var HelloWorld = React.createClass({ render: function () { // Return a heading to greet the user. // What's this.props.name? See the next slide! return ( <h1>hello {this.props.name}!</h1> ); } }); 13 / 24

14 Rendering Components Once we have a component, we can refer to it as a JSX element using its variable name. Here's an example of rendering a HelloWorld component with a name 'CIS 197'. ReactDOM.render( // Here's the name prop from the previous slide! <HelloWorld name={'cis 197'} />, document.getelementbyid('container') ); 14 / 24

15 State and Props The previous example used this.props to access a value that was defined as a JSX attribute. These values are called properties, and they should be treated as immutable by their components (though, this being JavaScript, they're very mutable). Mutable values are encapsulated as the state of a component. A component is allowed to mutate its state, usually in response to events. 15 / 24

16 Event Listeners Event listeners are set up in JSX. They should refer to functions on the component, which will (almost always) then update the state of the component using setstate. var LikeButton = React.createClass({ getinitialstate: function () { return {liked: false}; }, toggle: function () { this.setstate({liked:!this.state.liked}); }, render: function () { var txt = this.state.liked? 'Unlike' : 'Like'; var color = this.state.liked? '#3b5998' : '#627AAC'; return ( <span onclick={this.toggle} style={{color: color}}> {'\ud83d\udc4d' + txt} // </span> ); } }); 16 / 24

17 Nesting Components A component can have subcomponents, which can have components themselves, and so on. This allows for component re-use, and it's very intuitive, since a component is JSX looks just like any other element. Generally a higher level component will change its subcomponents when it re-renders itself. Since React efficiently recomputes the DOM, this is much more efficient than it sounds! 17 / 24

18 Redux 18 / 24

19 Managing Application State Rather than using traditional models to manage our React application, we're going to do something a little different. Instead of keeping a model for every component, we're just going to keep track of the state of the whole app at once! 19 / 24

20 How Redux Works Redux keeps track of the state of your application behind of the scenes. To change the state, you can dispatch actions (which are just arbitrary JS objects). The event is passed to the reducer, which is a function of type (event, state) -> state. Finally, you can use subscribe to run a function whenever the state changes. This is a lot like an event listener, but the difference is that with Redux, everything depends on the state. Subscribed functions don't have access to the event that caused the change to state. 20 / 24

21 Quick Redux Example var redux = require('redux'); var reducer = function (state, action) { if (action.type === 'INCR') { return state + 1; } else if (action.type === 'DECR') { return state - 1; } return state; }; // create store with initial state 10 var store = redux.createstore(reducer, 10); store.subscribe(function () { console.log(store.getstate()); }); store.dispatch({type: 'INCR'}); store.dispatch({type: 'INCR'}); store.dispatch({type: 'DECR'}); store.dispatch({type: 'DECR'}); 21 / 24

22 Using React with Redux You don't need to use React with Redux - they work fine on their own, or with other frameworks like Backbone. But the combination is really nice. Redux is a way of keeping track of state, and React components efficiently update based on their state. So if we just update the state of the top-level React component when the application state changes, we have a working app! The tricky part is updating state based on events. To dispatch an action in response to event (like click ), a component needs access to the store itself. For small applications, this isn't too bad; for larger ones, we may want to factor out this code into other modules. 22 / 24

23 Example Code Some example code for React is available on the CIS 197 Github. Be sure to reference this when completing the homework assignment! 23 / 24

24 Coming Up Homework 7 due Monday, April 3. This will be a two-week homework assignment split into two parts. Next week: a more in-depth React example. Start thinking up some final project ideas! 24 / 24