Course idea: React Native basics using REPL.it's new classroom feature

[QuincyLarson]

REPL.it just announced support for React Native. Here's the announcement: https://repl.it/site/blog/react_native

If we can build an interactive course with automated tests using REPL.it, we can host it through REPL.it's embed feature at something like freecodecamp.com/react-native

Is there anyone reading this who's interested in React Native and willing to port Facebook's React Native documentation to an interactive, test-driven format?

[gwenf]

I would be interested in helping with this if other people are interested. I've been using expo for a little while and the REPL implementation seems to work well.

Would someone have to have a smartphone to work through the challenges though?

[gwenf]

It seems like unit tests and input/output testing isn't available yet for React Native on REPL.it:

The React Native docs use a mock simulator. We could use something like that with manual testing, but I'm not sure if that is the best option.

Any thoughts?

Update: I emailed REPL.it about their plans for React Native and if they are planning to support Jest or something similar for testing. They replied that they are working on automated testing for React Native and are looking into using Jest.

[amasad]

@gwenf are you actively working on the course? (what's the timeline look like for you? We can bump this up in pri if you're actively working on it)

[QuincyLarson]

@gwenf Thanks for your interest in this project (and your patience with my slow response). @amasad is the founder of REPL.it. He's actively helping us build a lot of other functionality for our community.

If you're still interested in helping us build React Native challenges, I can help get the word out and see if anyone else is interested. Assuming @amasad was able to get input/output testing to work, and I was able to find someone else who's interested in teaming up with you, how soon would you be interested in starting on this?

[gwenf]

@QuincyLarson I have been trying to come up with an outline (following the docs mostly) and some challenge ideas. It would be great if someone wants to help and bounce around ideas for this.

@amasad I would like to start working on this. When do you think it will be ready at least to try out?

[amasad]

@gwenf I'll get something out for you by next week. Have you looked at the Jest/React Native way of testing? Do you think it'd be good for your use-case? Take a look and let me know what you think

https://facebook.github.io/jest/docs/tutorial-react-native.html

[gwenf]

@amasad I've always used Enzyme instead of Jest but I think they both do pretty much the same thing. Are you planning on having a set up with something like Mocha-Expect-Jest? Or what other testing tools are you going to use?

[amasad]

Jest ships with its own expect library (powered by by Jasmine). It's an end to end tool but we can probably add enzyme too.

[gwenf]

@amasad Hey, just wondering where you are at with this? No rush.

[amasad]

@gwenf seeing a bit of complication on how to make jest work well with all the other modules. Currently talking to the Expo team to see if they can help us.

Everything else is implemented, just pending proper mocking of expo etc.

[gwenf]

@amasad Hey, how's it coming?

[amasad]

It's done. I just need to deploy. Tuesday will be out for sure.

[QuincyLarson]

@amasad @gwenf awesome! Excited to see this in action :)

[amasad]

@gwenf This is ready. Take a look at this example: https://repl.it/community/classrooms/23713

One issue is that running the tests is much slower than I would've liked (and the rest of the site). It takes about 20-30 seconds to run the tests (most of the time is going to initializations).

I'll work on making it faster but in the mean time it's ready to be used. Let me know if you have any feedback or questions.

[gwenf]

I'm playing around with this now. I will let you know if I have trouble. Thanks for setting it up.

[gwenf]

@amasad Hey, I need a little help.

I'm trying to run the tests I created when I login as a student but the tests just run forever - the spinner keeps going and it says Running Tests - the tests will neither pass or fail. I am getting an error in the console that says: Uncaught SyntaxError: Unexpected end of JSON input. I tried a few different browsers just to make sure it wasn't one of my extensions but I get the error in each one. I am importing {expect} from chai and everything else is just the default. My classroom teacher account's username is gwenf (Gwen Faraday).

The stack trace doesn't appear to be helpful but I will include a screen shot just in case:

[gwenf]

@QuincyLarson Hey, here is a list of challenges (following the order of the docs). I'm working on writing tests for them now. I'm guessing I will go ahead and finish writing these in my account on REPL.it and then somehow transfer them to FCC so they can be embedded. Just wanted to let you know I'm still working on it.

[QuincyLarson]

@gwenf this is off to a great start. Ideally these challenges would be stored on your GitHub repo, then pulled into REPL.it (similar to how we're handling the Python challenges).

But we can worry about this later if you want to get started designing these challenges.

[amasad]

@gwenf I'll look at that in the next few days.

@QuincyLarson currently Github integration only works for the Python3 (it requires work to support other languages like parsing the unit tests etc). Let's test out the python implementation first before we move on to other languages.

[gwenf]

@amasad Hey. Have you been able to run tests as a student? If you have, would you mind sending me whatever sample testing you have that's working? Thanks.

[gwenf]

@amasad Hey, I'm still getting the same error. Have you been able to take a look? I'm meeting with someone next week to knock out some of the challenge design and I would like to have this working on some level :)

[gwenf]

Just to follow up on this issue: I had a meeting yesterday with another camper who wants to work with me on this curriculum :) I'll keep this issue updated as we make progress.

[QuincyLarson]

@gwenf We just launched our new learning platform and our expanded curriculum (1,000+ new coding challenges). We'd still be very interested in React Native challenges. You may be able to teach some React Native concepts right on freeCodeCamp, and could add supplemental / additional content using REPL.it on the freeCodeCamp Guide. Let me know your thoughts on this :)

[vinay72]

It would be an interesting project to use React Native Basics with REPL.

[amasad]

Sorry guys we deprecated React native on Repl.it mainly because expo (upstream) was moving fast and on their playground they'd had a lot better support. https://snack.expo.io

On Sun, Nov 4, 2018, 1:18 PM Vinay Sagar Sharma notifications@github.com wrote:

It would be an interesting project to use React Native Basics with REPL.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/freeCodeCamp/freeCodeCamp/issues/14595#issuecomment-435707409, or mute the thread https://github.com/notifications/unsubscribe-auth/AAj2_nKSUQNDxvF7eoRZO3OrfgTWw8cTks5ur1m1gaJpZM4NITKe .

[PurpleCatfish]

@QuincyLarson @gwenf It looks like this issue could be considered as obsolete or refactored to transfer created ReactNative course to expo.io.

[gwenf]

@sergeyradov we are working on the React Native challenges currently using react-native-web. Let me know if you want to help with them.

[moT01]

Are you still working on this @gwenf? Perhaps this should be brought up over on the new curriculum expansion repo.

[thecodingaviator]

@moT01 I think this issue should be closed and an issue on freeCodeCamp/curriculumExpansion should be opened with a reference to this

[gwenf]

@thecodingaviator that sounds good. We have quite a few challenges written already. We've had some trouble with a few things like parsing the React Native code but I would really like to get this done.

[thecodingaviator]

@gwenf Please get back to us once you have a working draft ready, we'd be glad to see it and discuss where to put it