Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# React.js Koans

If you want to learn React.js you came to the right place. We prepared a set of practical exercises that will help you learn React.js from square one. The only thing you need to know is JavaScript. Here we are using [ECMAScript 2015 standard](https://babeljs.io/docs/learn-es2015/).
If you want to learn React.js you came to the right place. We prepared a set of practical koans that will help you learn React.js from square one. The only thing you need to know is JavaScript. Here we are using [ECMAScript 2015 standard](https://babeljs.io/docs/learn-es2015/).

The Koans are a set of tasks to complete. Prepared tests checks if they are done correctly.

Expand All @@ -14,9 +14,8 @@ Make sure you have Node.js and Python 2 installed.

## Koans structure

* Edit the files found in the **`exercises`** directory.
* The `koans` directory contains the source of all the exercises. `test` contains the tests.
* `src` contains files compiled from `exercises`.
* Edit the files found in the **`koans`** directory.
* The `koans` directory contains the source of all the koans. `test` contains the tests.
* `build` contains sources launched in the web browser version of Koans.

## Start a local web server (optional)
Expand All @@ -29,8 +28,8 @@ You can run a webserver and see your changes live in your web browser:
## Instructions

1. Remember about running the setup script before you start working on Koans!
2. Work on the code found in the `exercises` directory and run the tests to see if you did everything right.
3. You need to do the exercises in the given order.
2. Work on the code found in the `koans` directory and run the tests to see if you did everything right.
3. You need to do the koans in the given order.
4. Try to not peek at the test files! They contain spoilers.
5. To run the tests, use `npm run test`. To automatically run tests when your code changes, use `npm run watch`.

Expand Down
2 changes: 1 addition & 1 deletion koans/01-HelloWorld.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ class HelloWorld extends React.Component {

render() {
return (
<div>FILL ME IN!</div>
<div>FILL ME IN</div>
);
}
}
Expand Down
2 changes: 1 addition & 1 deletion koans/02-PartiesList.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ class PartiesList extends React.Component {
// Doesn't this code look familiar to you?
render() {
return (
<ul className="FILL ME">
<ul className="FILL IN">
<li>Party at Aperture Laboratories</li>
</ul>
);
Expand Down
2 changes: 1 addition & 1 deletion koans/04-Quiz.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

var Answers = {
// Question #1: What is the name of the class that we extend to create components class?
// Tip: See any of the exercises
// Tip: See any of the koans
answer1: "Enter your answer here",

// Question #2: JSX is converted directly into JavaScript. True or false?
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
"description": "React.js Koans",
"main": "index.js",
"scripts": {
"compile": "babel exercises --out-dir src",
"setup": "npm install && ncp koans/ exercises/",
"compile": "babel koans --out-dir src",
"setup": "npm install && ncp koans/",
"start": "npm run compile && nodemon server.js",
"test": "npm run compile && mocha -b --compilers js:babel/register --require test/helpers.js test/**/*.js || echo",
"watch": "onchange exercises/*.jsx -- npm run test"
"watch": "onchange koans/*.jsx -- npm run test"
},
"repository": {
"type": "git",
Expand Down
2 changes: 1 addition & 1 deletion server.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,4 @@ new WebpackDevServer(webpack(config), {

var server = app.listen(8080, function () {
console.log('Listening at http://localhost:%s', server.address().port);
});
});
4 changes: 2 additions & 2 deletions webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:9090',
'webpack/hot/only-dev-server',
'./exercises/main'
'./koans/main'
],

output: {
Expand All @@ -17,7 +17,7 @@ module.exports = {

module: {
loaders: [
{ test: path.join(__dirname, 'exercises'), loaders: ['react-hot', 'babel-loader']}
{ test: path.join(__dirname, 'koans'), loaders: ['react-hot', 'babel-loader']}
]
},

Expand Down