English improvements (#130)

* english improvements for problem 1

* Note about JSX

* The "omitted" sections confused me at first

Omitting them doesn't save a ton of space, and it's not clear that you're not supposed to change them from the previous iteration, so I put them back.

* Better solution to the "omitted" confusion

Now that I've passed this exercise and see that the following exercises use the same pattern, I put things back how they were but added an explanation of how to read the sample

* english improvements for isomorphic problem descr

* improved english problem file for Events exercise

* some improved english explanation in the isomorphic lesson

Author: Incognito

exercises/components/problem.en.md

@@ -6,6 +6,9 @@ These use HTML tags together with JSX notation.
 To render a React Component, create a local variable that starts with an
 upper-case letter.
 
+JSX allows you to write near-HTML inline in your JavaScript, rather than writing
+JavaScript code that creates and modifies DOM nodes.
+
 React's JSX uses the upper vs. lower case convention to distinguish between
 local component classes and HTML tags.
 
@@ -18,7 +21,7 @@ ReactDOM.render(myElement, document.getElementById('example'));
 # Challenge
 ---
 
-Update `index.jsx` as shown below.
+Update `views/index.jsx` as shown below.
 
 ```
 import React from 'react';

exercises/event/problem.en.md

@@ -1,11 +1,11 @@
-It's time to add new todos! Let's make a form for adding new ones.
+It's time to add new todos! Let's make a form for adding them.
 
-# Challenge 
+# Challenge
 ---
 
 Update `TodoList` in `index.jsx` as shown below.
 
-``` 
+```
 class TodoList extends React.Component {
     constructor(props) {
         super(props);
@@ -56,6 +56,9 @@ class TodoList extends React.Component {
 Now change the three `Write code here` comments into some real code. You'll
 want to make each of them use `setState`.
 
+Hint: As the inputs are changed, update the state of the `TodoList` component,
+and when the Add button is clicked, use those props to add a new item to data.
+
 When you are ready, run `node program.js 3000 Milk 13:00` and visit
 `http://localhost:3000` to see the HTML output in the browser.
 

exercises/hello_react/problem.en.md

@@ -2,6 +2,7 @@ First things first, let's print `Hello World`!
 
 First, create the directory where you will write your code. It needs to contain a [package.json](https://docs.npmjs.com/getting-started/using-a-package.json) file
 for npm to know in which folder to install the subsequent packages - `npm init` does this for us.
+
 You can change `learnyoureact` to any name you like.
 
 `$ mkdir learnyoureact; cd learnyoureact; npm init -y;`
@@ -10,11 +11,9 @@ Start by installing the required modules. Run this command:
 
 `$ npm install --save react react-dom express body-parser [email protected] [email protected]`
 
-You can see `node_modules` directory made.
-Files of module is in the directory.
+This will create your `node_modules` directory and store a bunch of modules in it.
 
-Next, create `program.js`.
-Folder structure is below.
+Next, create `program.js`. Folder structure is below.
 
 ```
 learnyoureact
@@ -48,12 +47,13 @@ app.listen(app.get('port'), function() {
 ```
 
 The code above creates a small Express server that renders our React
-components. If someone navigates to `/`, `views/index.jsx` will be rendered. This program uses the `express-react-views` module.
+components. If someone navigates to `/`, it will render `views/index.jsx`.
+This program uses the `express-react-views` module for view rendering.
 
-Next, create a `views` directory in the same directory as `program.js`.
-After that, create `index.jsx` in the 'views' directory.
+Next, create a `views` directory in the same directory as `program.js`,
+and create `index.jsx` in the 'views' directory.
 
-Please copy the code below into `index.jsx`
+Copy the code below into `index.jsx`:
 
 ```
 import React from 'react';
@@ -67,8 +67,8 @@ export default class TodoBox extends React.Component{
 }
 ```
 
-This code uses the optional React.js JSX syntax to create our views, which we
-shall use throughout the rest of this workshop.
+This code uses the optional React.js JSX syntax to create our views,
+which we shall use throughout the rest of this workshop.
 
 You can find the React.js docs here: https://facebook.github.io/react/docs/getting-started.html
 

exercises/isomorphic/problem.en.md

@@ -1,25 +1,27 @@
 Let's use React on the front-end too!
 
-From this exercise on, we'll use React not only on the server side but also on the front-end.
-Let's raise the event on the front-end, and see what will happen.
-In the past exercises, there was some code that raised a front-end event, but it did not work. Where is that?
+From this excercise on, we'll use React not only on the server side but also on the front-end.
+In fact, we'll use the very same view files for rendering both the server-side initial response, and on the front-end for any DOM manipulation necessary. Sharing the code between the front end and the server is a concept known as Isomorphic JavaScript.
 
-The code is the check of the `checkbox` event you wrote in `State`.
-At `State`, to tell the truth, you can check the `checkbox` no matter what code you write.
-In this exercise, let's confirm if you can write the right code or not.
-There is a lot of code to change !
-Let's try it!
+In past exercises, there was code that triggered an event in the front-end, but nothing happened. Do you know what it was?
+
+It was interactions with the `checkbox` you wrote in the `State` lesson.
+In the `State` lesson, to be honest, checking the `checkbox` doesn't actually update the state.
+
+In this excercise, let's make it update `this.state`, which will require running React on the front-end too.
+
+There is a lot of code to change!
 
 # Question
 ---
 
-Start by installing the required modules. Run the four commands below.
+Start by installing the required modules. Run the command below:
 
 ```
 $ npm install browserify babelify babel-preset-react babel-preset-es2015
 ```
 
-Next, let's create `app.js` at the same directory as `program.js` and copy the code below into the file.
+Next, create `app.js` in the same directory as `program.js` and copy the code below into it:
 
 ```
 import React from 'react';
@@ -30,12 +32,11 @@ let data = JSON.parse(document.getElementById('initial-data').getAttribute('data
 ReactDOM.render(<TodoBox data={data} />, document.getElementById("app"));
 ```
 
-The above code is to use React at front-end. This code passes `TodoBox`  from `index.jsx`, and data from server that are passed in the id of `initial-data` to the element that has the id of `app`.
+The above code is to use React on the front-end. This code assumes that there will be some data attached to a DOM element with the id `initial-data`, and passes it into a `TodoBox` from `index.jsx`, and renders the whole component in the element with id `app`.
 
-Next, let's fix `program.js`.
-You can also make a new `program.js` file and write all the code there.
+Next, let's fix `program.js`. You can change your existing one, or make a new `program.js` file and write all the code there.
 
-First of all, let's add these `require` statements - like this:
+First of all, let's add some new variables at the top:
 
 ```
 var React = require('react');
@@ -49,17 +50,17 @@ var browserify = require('browserify');
 var babelify = require("babelify");
 ```
 
-Next, add a line that reads `index.jsx` under the sentence that `require` s `babel/register`.
+Next, add a line that `require`s `index.jsx` under the line that `require`s `node-jsx`:
 
 ```
 require('babel/register');
 
 var TodoBox = require('./views/index.jsx');
 ```
 
-Finally, add routes for `/bundle.js` and `/` by copying the code below.
-`/bundle.js` will contain `app.js` and dependencies (view template and react) transformed to ES5 and bundled for the browser.
-Requests to `/` will render the corresponding react view on the server and respond with HTML, including a script tag with `bundle.js` and data from the server for the react view.
+Finally, fix the routes for `/bundle.js` and `/` as shown below.
+When `/bundle.js` is requested, you want to respond with the browserified version of `app.js`, which is transformed to ES5 and will work on the front-end.
+When `/` is requested, you want to respond with a combination of `index.jsx` and the server-side data, and `bundle.js`. This renders the initial state of the application on the server, but allows React to run in the client to continue support state changes.
 
 ```
 app.use('/bundle.js', function (req, res) {

exercises/props/problem.en.md

@@ -13,6 +13,7 @@ Modify `TodoList` in `index.jsx` like below, adding `Todo`.
 Before you start, you may want to check your current `index.jsx` into source
 control, or create a new `index.jsx` for this exercise.
 
+
 ```
 import React from 'react';
 
@@ -44,8 +45,9 @@ class TodoForm extends React.Component {
 }
 ```
 
-Now at each of the "Write code here" comments, write some JSX that results in
-the following HTML.
+At the "Write code here" comment, write some JSX that results in the HTML below.
+The "Omitted" comments are sections that are omitted here to save space, but should
+remain the same as your previous solution -- don't change them.
 
 Within `Todo`, you can get the value of the `title` attribute set in `TodoList`
 (the parent component) by using `{this.props.title}`. Likewise, you can get the