1+ goals do
2+ goal "Understand how modern web developers organize their code."
3+ goal "Familiarize with Stores, JSX, and other features of a React application."
4+ end
5+
6+ overview do
7+ message <<-MARKDOWN
8+ When the web was in its infancy, JavaScript was often an afterthought. Web developers
9+ were mostly concerned writing complex servers, and thought of JavaScript as a language to
10+ simply make things move on their user's pages. Consequently, their JavaScript code
11+ was often unorganized, untested, and hard to maintain.
12+
13+ But as browsers became more advanced, JavaScript was suddenly asked to do much more – web
14+ developers used JavaScript for complex animations, making requests to servers, even doing
15+ complex calculations in the browser! The old approach of writing all your code in one place,
16+ with all the logic jumbled together, quickly became untenable. In response to that, the
17+ JavaScript community has started developing patterns to help themselves organize their code,
18+ making it more readable. Most of these patterns separate code into two buckets:
19+
20+ * __Views (or Components, or View Controllers)__ are in charge or rendering HTML elements, and
21+ listening for user's actions like clicks and form submissions.
22+ * __Models (or Stores)__ are responsible for the logic of your JavaScript application.
23+
24+ There are many JavaScript libraries and frameworks that implement this structure, including
25+ [AngularJS](https://angularjs.org/), [Ember.js](http://emberjs.com/), and [Backbone.js](http://backbonejs.org/).
26+ They each have their own strengths and weaknesses. and we wouldn't presume to tell you
27+ which one is "better." As you continue learning, you'll form your own opinions!
28+
29+ For this tutorial, we'll be using [React](http://facebook.github.io/react/), a rendering library written by Facebook that has
30+ grown in popularity over the last few years. To use React, you write your HTML as a series of __components__
31+ in a language called __JSX__. Don't worry, JSX looks a lot like HTML! These components handle
32+ the rendering of your HTML elements, as well as listen for user actions.
33+
34+ You'll be using React to make your view objects, and we'll use a simple JavaScript object as a model. We've
35+ already built a lot of this structure for you! Let's walk through the code together.
36+ MARKDOWN
37+ end
38+
39+
40+
41+
42+ steps do
43+ step do
44+ message <<-MARKDOWN
45+ Open up store.js in your text editor. There, you should see a ListStore object defined like this:
46+ MARKDOWN
47+
48+ source_code :javascript, <<-JAVASCRIPT
49+ ListStore = {
50+ getItems: function() {
51+ return items
52+ },
53+ loadItems: function() {},
54+ addItem: function(itemDescription) {},
55+ toggleCompleteness: function(itemId) {}
56+ }
57+ JAVASCRIPT
58+
59+ message <<-MARKDOWN
60+ This is where all the logic of our application will be performed! Whenever we need to execute a calcuation, or
61+ make an AJAX request, our program will call a function on the ListStore object. For instance, when we want to load
62+ all items from our server, you would write a line of code like this:
63+ MARKDOWN
64+
65+ source_code :javascript, <<-JAVASCRIPT
66+ ListStore.loadItems()
67+ JAVASCRIPT
68+
69+ message <<-MARKDOWN
70+ In future lessons, we'll be writing the logic to make these functions work! Whenever the store changes – when an item
71+ is added or marked as completed, for example – we'll use the notifyComponents function to update the user's page.
72+ MARKDOWN
73+ end
74+
75+ step do
76+
77+ message <<-MARKDOWN
78+ Now that we've looked at the store, let's take a look at our components. Open index.html, and find the Item component. It should
79+ look like this:
80+ MARKDOWN
81+
82+ source_code :javascript, <<-JAVASCRIPT
83+ var Item = React.createClass({
84+ render: function() {
85+ var itemClass = this.props.completed ? 'item completed' : 'item'
86+ return (
87+ <li className={itemClass}>
88+ <span className='complete-button'>{'\\u2714'}</span>
89+ <div className='description'>{this.props.description}</div>
90+ <span className='delete-button'>{'\\u2718'}</span>
91+ </li>
92+ )
93+ },
94+ })
95+ JAVASCRIPT
96+
97+ message <<-MARKDOWN
98+ This is a React component. It is responsible for rendering the HTML for our list's items! Every React component has
99+ to have a render function, which are written in a language called JSX. It looks a like HTML, except you can write it
100+ alongside your JavaScript code. Here's the HTML this component renders:
101+ MARKDOWN
102+
103+ source_code :HTML, <<-HTML
104+ <li class='item completed'>
105+ <span class='complete-button'>✔</span>
106+ <div class='description'>A gallon of milk.</div>
107+ <span class='delete-button'>✘</span>
108+ </li>
109+ HTML
110+
111+ message <<-MARKDOWN
112+ Take a look at the other components on the page. What do you think List component does, and how does it know to render
113+ items? How about the CreationForm component?
114+ MARKDOWN
115+ end
116+
117+ step do
118+ message <<-MARKDOWN
119+ Now you know what a React component looks like, but how does it work? Well, components can have __state__.
120+ Whenever a component's state changes, it re-renders itself to the page! State can change in a handful
121+ of ways. We've already written a function to make List's state change whenever the notifyComponents
122+ function is called. This will be helpful later on!
123+
124+ Components with state usually also implement a getInitialState function that tells the component what
125+ to render immediately after the page loads. Our List component has one that looks like this:
126+ MARKDOWN
127+
128+ source_code :javascript, <<-JAVASCRIPT
129+ getInitialState: function() {
130+ return (
131+ {items: [
132+ {description: 'a gallon of milk', completed: true, id: 1},
133+ {description: 'a stick of butter', completed: false, id: 2}
134+ ]}
135+ )
136+ },
137+ JAVASCRIPT
138+
139+ message <<-MARKDOWN
140+ Does that data look familiar? It's the default items that our list renders! Try changing these values.
141+ Refresh your browser, and see what's changed!
142+
143+ Before we move on, let's remove the default items altogether. Not everyone wants a gallon of milk!
144+ Your code should look like this:
145+ MARKDOWN
146+
147+ source_code :javascript, <<-JAVASCRIPT
148+ getInitialState: function() {
149+ return (
150+ {items: []}
151+ )
152+ },
153+ JAVASCRIPT
154+ end
155+ end
156+ explanation do
157+
158+ message <<-MARKDOWN
159+
160+ ### Getting Comfortable with React.
161+
162+ You've just looked at your first React application! There are a lot of moving parts, we know.
163+ Don't worry if you don't understand how everything works just yet – as you keep playing with it,
164+ it will become much clearer. Big picture, our web application has two parts:
165+
166+ * A ListStore, which is responsible for fetching data from the server using AJAX, and keeps
167+ track of all the items on our list. Whenever a new item has been added or updated, it will notify
168+ all the components that it has changed.
169+
170+ * A series of components that render our list as HTML. The List component updates whenever
171+ the ListStore changes, and it renders a series of Item components. The CreationForm component
172+ will be responsible for creating new items!
173+
174+ Next, we'll write our first store function to load items when the user visits the page!
175+ MARKDOWN
176+ end
177+
178+
179+ next_step 'loading_items'
0 commit comments