• Stars
    star
    3,219
  • Rank 13,949 (Top 0.3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Learn basics of React.js making the tests pass

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.

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

Installation

Make sure you have Node.js and Python 2 installed.

  1. git clone https://github.com/arkency/reactjs_koans.git
  2. cd reactjs_koans
  3. npm run setup

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.
  • build contains sources launched in the web browser version of Koans.

Start a local web server (optional)

You can run a webserver and see your changes live in your web browser:

  1. Run command npm run start
  2. Visit http://localhost:8080/

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.
  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.

Video walkthrough

More than just Koans

Blog

If you want to read more about React.js and modern JavaScript applications, check out our React Kung Fu blog.

The book

For people who finished Koans, we prepared something to go continue: the React by example book. In this book, we explain how to create common widgets like password-strength meter or credit card input.

For the price of the ebook, you get:

  • Over 140 pages of React content. From fast introduction to React to example Todo app;
  • 11 practical real-world examples;
  • Repositories with code for most of the examples;

It's an early version of the book. It means some wording in book may change and there will be more examples later. All updates for the book are free.

You can use special 20% discount code: REACTKOANS. Grab your copy today or download a free chapter

Additional resources

  • React docs - it's a great source of in-depth information about React.
  • Why keys are important in React - great reading explaining the reason for React's keys.
  • Reactiflux. User group on Slack. You can meet a lot of people using React there. There's a channel for beginners needhelp.

About

Arkency

React Koans is funded and maintained by Arkency. Check out our other open-source projects.

You can also hire us or read our blog.

More Repositories

1

scaffold-to-react

Step by step scaffold to React, using server-side rendering and react-rails
Ruby
59
star
2

image_placeholder

Ruby
58
star
3

command_bus

Command Pattern - decoupling what is done from who does it in Ruby and Rails
Ruby
56
star
4

react-testing-approaches

Example approaches to test React components
JavaScript
49
star
5

event-bus

Simple eventing bus
JavaScript
46
star
6

http_event_store

HttpEventStore is a HTTP connector to the Greg's Event Store.
Ruby
39
star
7

find-open-source-mentor

A platform to connect junior developers with open source projects
Ruby
37
star
8

react_flux_alt_immutable_todolist

A simple example of React + Flux + Alt + Immutable.js in action.
JavaScript
31
star
9

rethinkdb-reactjs

rethinkdb + react.js + ActionController::Live (Rails) + Server Side Events
Ruby
22
star
10

wet-health_endpoint

Ruby
20
star
11

arkency-ios

Arkency iOS app written in RubyMotion
Ruby
18
star
12

plusone

plus one as a service
Ruby
17
star
13

fair_pizza

JavaScript
13
star
14

posts

source for the blog posts published on our blog
Ruby
12
star
15

ruby-build-cookbook

Cookbook providing definition to install Ruby for user using ruby-build.
Ruby
11
star
16

devsnap

a directory of developers who use Snapchat
Ruby
10
star
17

nanoc-tailwind-starter

Ruby
9
star
18

react-workshops-2016-wrocloverb

React.js Workshops base prepared for wroc_love.rb 2016 conference
Ruby
9
star
19

heroku-buildpack-ruby-monorepo

Heroku buildpack for Ruby monorepos
Shell
8
star
20

react-example-pact

react-example-pact
JavaScript
5
star
21

protobuf-nested-struct

Serialize primitives and deep structures (array, hash) to protobuf
Ruby
4
star
22

feature_toggle

A simple feature Toggle for a Rails app.
Ruby
4
star
23

constants-resolver

A tool for tracking down not resolving constants in Ruby projects
Ruby
4
star
24

nullmailer-cookbook

Ruby
3
star
25

redux-ah

Auction House with the help of Redux (iso-app)
JavaScript
3
star
26

inspect_xml

Discover the schema and unique values of an XML file you need to parse #ruby
Ruby
3
star
27

heroku-buildpack-cdn-manifest

Shell
2
star
28

slack_proxy

Proxy DPD webhook to Slack
Ruby
2
star
29

sample-event-sourcing-app

Ruby
2
star
30

wkhtmltopdf-cookbook

Cookbook to install wkhtmltopdf binary from tarball.
Ruby
2
star
31

multigit

Tools to deal with multiple git repositories #microservices
Shell
2
star
32

hexagonal-nodejs

CoffeeScript
1
star
33

react-book-chapter-hello-world

HTML
1
star
34

ruby-magic

A collection of code snippets which could be considered magic
Ruby
1
star
35

rubymotion-book-store

Ruby
1
star
36

sidekiq-rails-cookbook

sidekiq-rails-cookbook
Ruby
1
star
37

pp-jozaz-dysk-string-calculator

Ruby
1
star
38

zombiaki

Just another zombiaki hack
Ruby
1
star
39

geo-lite-cookbook

Download geo localization database files (GeoLiteCity.dat.gz & GeoIP.dat.gz) from geolite.maxmind.com
Ruby
1
star
40

shorewall-cookbook

Installs and configures shorewall.
Ruby
1
star
41

arkency-js

JavaScript utility functions useful in your daily work
JavaScript
1
star