-
Notifications
You must be signed in to change notification settings - Fork 451
/
Copy pathjavascript-to-do-list-with-react.step
58 lines (39 loc) · 2.25 KB
/
javascript-to-do-list-with-react.step
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
message <<-MARKDOWN
### Goal
By the end of this session, you should understand how to write a JavaScript application
using the [React](http://facebook.github.io/react/) library. You're going to be building a personal to do list application.
You've decided that you'd like to:
* Add an item to your list
* Mark an item as complete
* Load your list from multiple computers.
You've sketched up an initial screenshot of what you want it to look like:

### Meta-Goal
When you have completed today's goal of getting the basic
application online you should understand:
* How to use JavaScript to interact with a server.
* How to organize your JavaScript code into models and views.
* How to use the React library to render HTML elements.
* How to incrementally add features to your application.
* How to get your application online.
### Schedule
* 1-ish hours of the basics of clients and servers.
* 1-ish hours on organizing JavaScript using models and views.
* 3-ish hours of adding features to you application, broken up into 1 hour chunks.
This is just a rough guideline, not a mandate. Some steps you'll go
over and some you'll go under. It'll all work out by the end of the
day. Probably.
### Requirements
When programming, you'll generally want these tools on hand:
* An internet connection. We're going to be communicating with other websites using JavaScript.
* Your browser to see the code running (I recommend Chrome, but any will do!)
* A text editor to change the code (Railsbridge recommends <a href="https://code.visualstudio.com/">Visual Studio Code</a>, but you can <a href="/installfest/editors">try a different editor</a>)
* A javascript console so you can experiment and print out debugging
messages. This is built into your browser.
Before you can start the tutorial, you'll need to <a href="AdvancedTodoList.zip">download the tutorial</a>
to your computer to edit the source code.
Once you've downloaded it, open index.html with your browser. You should see a mock up of your list. If you do not, get an instructor to help you out.
MARKDOWN
insert '../javascript-to-do-list/_lesson_format'
insert '../javascript-to-do-list/_teachers_note'
next_step "developer_tools"