All Projects → jondot → Reactnativekatas

jondot / Reactnativekatas

This is a project that lets you participate in a fully-immersive, hands-on, and fun learning experience for React Native.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Reactnativekatas

Python-Studies
All studies about python
Stars: ✭ 56 (-93.89%)
Mutual labels:  training, development
Inginious
INGInious is a secure and automated exercises assessment platform using your own tests, also providing a pluggable interface with your existing LMS.
Stars: ✭ 138 (-84.95%)
Mutual labels:  training, exercise
shortest-tutorial-ever
A list of the shortest tutorials ever.
Stars: ✭ 14 (-98.47%)
Mutual labels:  training, exercise
admin-training
Galaxy Admin Training
Stars: ✭ 55 (-94%)
Mutual labels:  training, development
traindown-dart
Dart (and Flutter) library for the Traindown Markup Language. This is the reference implementation for now. It is first to receive features and fixes.
Stars: ✭ 16 (-98.26%)
Mutual labels:  training, exercise
traindown
Public site
Stars: ✭ 35 (-96.18%)
Mutual labels:  training, exercise
cpluspluscourse
C++ Course Taught at CERN, from Sebastien Ponce (LHCb)
Stars: ✭ 19 (-97.93%)
Mutual labels:  training, exercise
Secdevlabs
A laboratory for learning secure web and mobile development in a practical manner.
Stars: ✭ 547 (-40.35%)
Mutual labels:  training, development
Katasuperheroesandroid
Super Heroes Kata for Android Developers. The main goal is to practice UI Testing.
Stars: ✭ 680 (-25.85%)
Mutual labels:  training
Front End Career
A career guide to Front End Developers
Stars: ✭ 765 (-16.58%)
Mutual labels:  development
Servor
Dependency free file server for single page app development
Stars: ✭ 672 (-26.72%)
Mutual labels:  development
Standard
🌟 JavaScript Style Guide, with linter & automatic code fixer
Stars: ✭ 26,433 (+2782.55%)
Mutual labels:  development
Vagrant Lamp
My default LAMP development stack for Vagrant
Stars: ✭ 765 (-16.58%)
Mutual labels:  development
Ok Mdx
Browser-based MDX editor
Stars: ✭ 681 (-25.74%)
Mutual labels:  development
Create Cerebro Plugin
Create Cerebro plugins with no configuration
Stars: ✭ 16 (-98.26%)
Mutual labels:  development
Language Detection
A language detection library for PHP. Detects the language from a given text string.
Stars: ✭ 665 (-27.48%)
Mutual labels:  training
Javascripttraining
Training course repository for JavaScript
Stars: ✭ 658 (-28.24%)
Mutual labels:  training
Python Zero To Hero Beginners Course
Materials for a Python Beginner's Course. First given at the Royal Society of Biology. Designed and delivered by Chas Nelson and Mikolaj Kundegorski.
Stars: ✭ 22 (-97.6%)
Mutual labels:  training
Vuejs Training
VueJS training including Vue ecosystem: HTTP (Axios), Vuex, Unit Testting (Jest)...
Stars: ✭ 6 (-99.35%)
Mutual labels:  training
Ethereum Development With Go Book
📖 A little book on Ethereum Development with Go (golang)
Stars: ✭ 754 (-17.78%)
Mutual labels:  development

Rinja: the React Native Ninja

Rinja: the React Native Ninja



React Native Katas

This is a project that lets you participate in a fully-immersive, hands-on, and fun learning experience for React Native.

We will focus solely about design and styling for React Native, making this a perfect learning aid for both programmers and designers that previously handled Sass or CSS.

What's a Kata

This is a Kata. For programming, this means a way to practice something, which is simple enough. However, traditionally programming katas or programming Koans are made to "learn the hard way".

Learning "the hard way" primes your brain to receive information and accelerates the learning process considerably on the expense of frustration.

This process, like many other Kata or Koan based projects, aims to give you the best experience possible so that you can fail with a nice safety net and learn from your failures quickly.

For this, we use:

  • A fancy framework that sets up, runs, and validates your Katas
  • A smart layout of learning material so that one builds on the other, yet lets you discover things on your own
  • Some times things are repeated
  • React Native's live-reload for rapid iteration
  • Simulator friendly set up, so that you will get full-immersion, working on the same physical space as your desktop
  • Tips and guides along the way, so that you will always know what to do

Quick Start

I assume you already have a working react-native setup.

  • Clone this project
  • npm i and then run the project via Xcode or react-native
  • After running the project, turn on Live Reload (Ctrl+Cmd+Z for developer menu on iOS Simulator)

You will then be faced with the first Kata.

  • Press on a Kata (anywhere) to show the reference Kata - which is what you should arrive at
  • Press again to go back to your answer Kata
  • Find your src/katas folder
  • Get familiar with the list of katas available
  • Per subject (flex, styling, composing), look for the .test version of your Kata and edit away. The reference Kata is the one without the .test suffix.
  • Example: FillAll under the flex subject, will be at src/katas/flex/FillAll.test.js, and the reference Kata will be at src/katas/flex/FillAll.js
  • Modify, view, until both Katas match.
  • Once Katas match, you will be automatically moved to a new Kata to solve

Checking Results

At any point in time, you can click on your view to show the reference view, and click again to go back.

If you've successfully solved the current view, you'll be automatically progressed to the next Kata.

Learning

Learn by making mistakes ("The Hard Way"). By making mistakes, you're priming your brain to receive and retain data in a much better way than reading a book or watching a video.

Use the tips in the .test versions of the components. Sometimes there will be tips, sometimes there won't be. Some times the tips will be somewhat opaque, sometimes very revealing.

  1. Use the tips
  2. Think, experiment, think, and experiment again
  3. Use Google
  4. Go to (2)
  5. Eventually, take a look at the reference component (read: answers)

The reference components won't have a test suffix. You'll be able to find solutions there and if a concept is first introduced or demands a special explanation - it will be explained inline for your convenience, look for the Did you know? sections, Hints sections, and TODO notes.

Building Katas

You're more than welcome to submit new katas. Please see the kata building doc for details.

Under the Hood

There's a reference Kata, and a test Kata (the one you fiddle with). They're wrapped with a special snapshotting component that exists within the runner infrastructure.

With that, a reference Kata is mounted, rendered, snapshotted (visually), and then your test Kata goes through the same process. We then diff the two snapshots to see if the designs match for your Kata to be marked as solved.

So, this is not the regular testing framework you'd expect.

That was done because design needs creative freedom. This means there's more than one way to solve a Kata, as long as you get the same visuals!

This also means that you're welcome to make forks with better solutions, and offer these as the de-facto reference Katas for next generations to come!

Katas

UsingText

UsingStyles

Clipping

BorderRadius

LoadingCard

Gridding

FlexSize

FillAll

Direction

AlignmentAxis

Alignment

SimpleChart

ProfileScreen

ContactCard

CalendarMonth

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].