jondot / reactnativekatas Goto Github PK

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

Python 3.11% Java 2.24% JavaScript 84.96% Objective-C 9.69%

kata koans react-native training development exercise

reactnativekatas's Introduction

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.

Use the tips
Think, experiment, think, and experiment again
Use Google
Go to (2)
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

reactnativekatas's People

Contributors

Stargazers

Watchers

Forkers

nazt abdulhannanali conroywhitney qmmr leo-guinan bnopacheco minghuigao stuzenz johny imjerrybao orta agtlucas andreimirzac1 brentvatne expo chriskwong91 vmlinz fpaboim byennen rabbitkevin zjpjohn fun-alex-alex2006hw sabrym cborjah leeseean dtd-design-team raghucse2010 haki9 kiernan lothbrek erneledesma raksonibs sherwinterunez huynhtansi spiderx00 augustoalegonzhipcode chsyu kinwahlai fourestfire sedatsevgili garlandrileyjr sivajeebattina semenovdl johncrisostomo gabrielsclimaco vermuz dianavidalc matepapp nagyv react-native-oss-projects toblerpwn ritesh-singh duocyber rudrajsdev vickvasquez agentkma lvntyldz antonve cmedinadeveloper vphong brooksquil brramos mynguyen1709 qiquwong dowatugkins simonbao iamsourabhh jdiss rlpraveena ellthompson timsully hannan-emily saurabhariyan jstacoder mshokry stradler claret15 xumes alienadrii reactnativee eurekainc dwkrghm ptreitler subtraktive farfaniriss hhy5277 superbigbang ayelenmarie engrrbilal nabeelimran casab ksiyivang alexfrontweb jinlmsft sguzman zhaolc90 saaaab1213 moldoteck ange-rodriguez lelen91

reactnativekatas's Issues

Launching on Xcode 10

Hey,

I am new to react-native and trying to get your project to work. I ran these commands and followed that stackoverflow answer for fixing the error I got at first: Print: Entry, “:CFBundleIdentifier”, Does Not Exist

This worked, to fix that issue. Overall I did the following:

npm install
react-native upgrade
react-native run-ios

That produced following result, which I was unfortunately unable to debug.

warning: the transform cache was reset.
Loading dependency graph, done.
 BUNDLE  [ios, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1)::1 - - [01/Nov/2018:12:05:02 +0000] "GET /index.bundle?platform=ios&dev=true&minify=false HTTP/1.1" 200 - "-" "rnk/1 CFNetwork/975.0.3 Darwin/18.0.0"
error: bundling failed: Error: The resource `/Users/Mo/Desktop/ReactNativeKatas/index.js` was not found.
    at /Users/Mo/Desktop/ReactNativeKatas/node_modules/metro/src/IncrementalBundler.js:122:24
    at gotStat (fs.js:1783:21)
    at /Users/Mo/Desktop/ReactNativeKatas/node_modules/graceful-fs/polyfills.js:284:29
    at FSReqWrap.oncomplete (fs.js:152:21)
 BUNDLE  [ios, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

Is there still a way to run your project? Should I downgrade my XCode? Any help would be greatly appreciated!

build failed

ReactNativeKatas/android/app/src/main/java/com/reactnativekatas/MainActivity.java:27: error: method does not override or implement a method from a supertype
@OverRide
^
/code/android/react-native/ignite2/ReactNativeKatas/android/app/src/main/java/com/reactnativekatas/MainActivity.java:36: error: method does not override or implement a method from a supertype
@OverRide
^
2 errors
:app:compileDebugJavaWithJavac FAILED

FAILURE: Build failed with an exception.

What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.

Compilation failed; see the compiler error output for details.

Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Implement Android Support

Hi,
Currently only iOS is supported, since originally there wasn't any support for taking snapshots on Android.
Since then, projects like https://github.com/gre/react-native-view-shot popped up, which may open the way to supporting Android.

I'll keep this issue here open to track the efforts in that front.

Quick Start: the "npm i" step

Hi,

Incredibly basic question here--an easy win for whoever can answer!

I have a working react-native setup. I've run other projects successfully via run-ios. I have followed the first "Quick Start" step and have cloned this repo locally.

From my ReactNativeKatas folder, react-native run-ios prompts the following command line response: "Command run-ios unrecognized. Make sure that you have run npm install and that you are inside a react-native project." OK, so, on to "Quick Start" step two: npm i.

Do I literally input npm i on the command line? Or npm install? Or something else? What exactly am I needing to install? And what is the literal text I input on the command line to accomplish this?

I ran into npm troubles setting up react-native, and am trying to avoid the headache now if possible. :)

Thanks,
Ben

this._nativeModule.addListener is not a function

Hi I just discovered these katas (via the comments in the deco slack channel) and wanted these to give these exercises a try...however I just ran into an issue when I tried to spin it up for the first time:

steps I took:

cloned the repo
cd ReactNativeKatas
npm i
react-native run-ios
(screenshot posted above shows what happens in the simulator)

I'm kinda new at this, so I wanted to bring to your attention before I dig in to see what could be the cause...thanks!

Personal note, I also bought your book and am enjoying what I've seen so far!

Error running react-native run-ios

clang: error: no such file or directory: '/Users/user/reactnative/ReactNativeKatas/node_modules/react-native-view-snapshot/ViewSnapshotter.m'
clang: error: no input files

Add / Modify Labels for Certain Katas

Very cool project. Thanks for putting this together!

Most of the katas have a <Text> label with the name of the kata which is a great idea. These labels are very helpful for knowing which file corresponds with the given kata. However, there are a few katas which currently do not have indicative labels:

Also, the SimpleChart.test.js kata's label reads as Chart! instead of SimpleChart!

Even without labels, it's still possible to determine which file to edit by either looking at the list of katas on the README or at the ordered list of katas in bundle.js. The addition of labels would just make it that much easier.

What would you think of adding / modifying the labels for the above katas?

Provide font names and font sizes, border radii

These are really great so far, but I'm finding it a little frustrating having to guess at font sizes and border radii, when the real concepts to learn are the properties in question.

I think if you were to provide the font sizes, families, etc in comments, without indicating how they're applied, it could prevent some undue frustration.

Can provide a PR if you'd like.

Thanks again for this great resource.

Cannot Build

When the app is compiling it spits out this error:

Android support

First, it gives a "error: method does not override or implement a method from a supertype" in the MainActivity.java file. and when i remove the @OverRide. It compiles and installs. But it crashes on open.

Not Being Able to Clear Second Kata

Hi,

I am just getting started with react-native and I found your repo from the awesome list. 🐵

I tried the solution for the second problem, but my second kata is not passing the tests. 😢

Even after hot-reloading, the error is not going away. I tried by restarting too.

I don't know enough React-native to decide if this is an issue or if I am doing anything wrong. Either way, thanks in advance! ✨

[Error] UIManager.takeSnapshot is not available on this platform

After completing FillAll kata, I got this warning UIManager.takeSnapshot is not available on this platform when running on Android Device(Android version 6). I am not able to move to next kata.

Below is the stack trace that might help you

mounting
snapshot.js:18 snapshotting /data/user/0/com.reactnativekatas/files/FillAll.ref.png
YellowBox.js:56 UIManager.takeSnapshot is not available on this platform
snapshot.js:24 Snapshotted: /data/user/0/com.reactnativekatas/files/FillAll.ref.png
YellowBox.js:56 Unhandled rejection Error: Attempt to invoke virtual method 'char[] java.lang.String.toCharArray()' on a null object reference
    at convertError (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:82117:11)
    at tryCatcher (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:86929:15)
    at Promise._settlePromiseFromHandler (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:85035:21)
    at Promise._settlePromiseAt (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:85109:6)
    at Promise._settlePromises (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:85225:6)
    at Async._drainQueue (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:82515:4)
    at Async._drainQueues (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:82525:6)
    at Async.drainQueues (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:82407:6)
    at JSTimersExecution.callbacks.(anonymous function) (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:7606:13)
    at Object.callTimer (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:7345:1)
    at Object.callImmediatesPass (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:7403:19)
    at Object.callImmediates (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:7418:25)
    at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:6671:43
    at guard (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:6585:1)
    at MessageQueue.__callImmediates (http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:6671:1)
    at http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false:6641:8

Direction flex test is solved in 50% already

Second kata about direction is almost solved:

<View style={{flexDirection:'row'}}>

Android support?

Is this project iOS only? When run in Android, there is an error "UIManager.takeSnapshot is not available on this platform".

Unhandled JS Exception: Invariant Violation

Hi,

Thank you for your work, but I'm not able to run it properly on iOs Simulator.
After launching the app with react-native, I've got the following error message :

Unhandled JS Exception: Invariant Violation: Module name prefixes should've been stripped by the native side but wasn't for RCTJSCExecutor

Is it due to my version of React Native ?

react-native-cli: 1.2.0
react-native: 0.33.0

Method does not override or implement a method from a supertype ?? On Android Platform

Hello, I am currently facing an error while I am trying to run on my device. I don't know exactly what to do. I really want to use this amazing project because I thing it is the right tool for learning faster and better.

I am on Windows 10. This is the error so far:

C:\Users\Augusto\Documents\ReactNativeKatas\android\app\src\main\java\com\reactnativekatas\MainActivity.java:27: error: method does not override or implement a method from a supertype
    @Override
    ^
C:\Users\Augusto\Documents\ReactNativeKatas\android\app\src\main\java\com\reactnativekatas\MainActivity.java:36: error: method does not override or implement a method from a supertype
    @Override
    ^
2 errors
:app:compileDebugJavaWithJavac FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

I was reading and probably it is a plugin that it is not working right. I am really a newbie on React Native.

TransformError: Couldn't find preset "react" relative to directory "/"

I've tried fresh npm install, it doesn't work.
I'm not sure what to do.
Please help me to fix this error. Thank you...

Extending

Hi there,

Thank you so much for this awesome project, I plan to use these Katas at a little training session I am planning to do. For this reason, I would like to extend the Katas, to contain more examples, like how to use ListViews, Scroll Views or other RN specific components.

Is there a guide on how to do so or could you add a brief one?

Have a nice day!