Merge pull request #34 from gyaresu/gareth-edits

state - description edited and links to relevant docs added

exercises/css/problem.en.md

@@ -1,7 +1,7 @@
 Let's define styles as variables!
 
-Now, we define same styles at multi parts of code.
-Make code smart with cutting the styles down as variables.
+Variables are a smart way to make changes to multiple places in our code.
+Lets assign some styles to a variable and see which parts of our code we can replace.
 
 # Question
 ---
@@ -41,8 +41,8 @@ module.exports = TodoBox;
 Change the code to use the `style` you added.
 *NOTE* Some code is a little different from this style, so you should pay attention.
 
+Inline Styles: https://facebook.github.io/react/tips/inline-styles.html
 
-After improving the code, do `node program.js` and access `http://localhost:3000` , check the real HTML is outputted.
-The HTML should not have changed.
+After fixing your code, test it locally by running `node program.js` and then access `http://localhost:3000` in your browser. You should see the HTML you expect.
 
 After that, do `learnyoureact verify program.js`.

exercises/hello_react/problem.en.md

@@ -19,7 +19,7 @@ var app = express();
 
 app.set('port', (process.argv[2] || 3000));
 app.set('view engine', 'jsx');
-app.set('views', __dirname + '/views');
+app.set('views', path.join(__dirname, '/views'));
 app.engine('jsx', require('express-react-views').createEngine());
 
 require('node-jsx').install();

exercises/state/problem.en.md

@@ -1,13 +1,15 @@
 Let's define mutable values!
 
-You can use `state` to define mutable values.
-Let's set initial value of `checkbox`, and define behavior of check event.
+So far we've rendered components with imutable properties using `this.props`.
+But what about if we want to update components?
+`this.state` is private to each component and allows us to define mutable values.
+Let's set the initial value of `checkbox` to false and define a function to control the behavior of check events.
 
 # Question
 ---
 
-Fix `Todo` of `index.jsx` like below.
-You can also make new `index.jsx` file and write code in that.
+Fix `Todo` of `index.jsx` like the example below.
+You can also write your code into a new `index.jsx` file.
 
 
 ```
@@ -45,10 +47,13 @@ var TodoForm = React.createClass({
 module.exports = TodoBox;
 ```
 
-Write code to set initial value of `checked` and behavior of check event in `Todo`.
-You can set initial value by `getInitialState`.
-You can update the data by writing `handleChange` function and writing `this.setState` in the function.
+Write code to set the initial value of `checked` and behavior of the check event in `Todo`.
+You can set initial value of `checked` by defining `getInitialState`.
+You can update a components `state` by creating a function that makes use of `this.setState`.
 
-After writing codes, do `node program.js` and access `http://localhost:3000`, check the real HTML is outputted.
+Component API: https://facebook.github.io/react/docs/component-api.html
+Component Specs and Lifecycle: https://facebook.github.io/react/docs/component-specs.html
+
+After fixing your code, test it locally by running `node program.js` and then access `http://localhost:3000` in your browser. You should see the HTML you expect.
 
 After that, do `learnyoureact verify program.js`.