diff --git a/exercises/components/problem.en.md b/exercises/components/problem.en.md index 856d70b..f941b1d 100644 --- a/exercises/components/problem.en.md +++ b/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'; diff --git a/exercises/event/problem.en.md b/exercises/event/problem.en.md index 4f39a0b..15a3627 100644 --- a/exercises/event/problem.en.md +++ b/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. diff --git a/exercises/hello_react/problem.en.md b/exercises/hello_react/problem.en.md index 97de3c8..692451b 100644 --- a/exercises/hello_react/problem.en.md +++ b/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 express-react-views@0.9.0 babel@5.8.23` -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 diff --git a/exercises/isomorphic/problem.en.md b/exercises/isomorphic/problem.en.md index 510c93b..e1eb5f6 100644 --- a/exercises/isomorphic/problem.en.md +++ b/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(, 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,7 +50,7 @@ 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'); @@ -57,9 +58,9 @@ 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) { diff --git a/exercises/props/problem.en.md b/exercises/props/problem.en.md index 3efa891..bbd874e 100644 --- a/exercises/props/problem.en.md +++ b/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