• Stars
    star
    541
  • Rank 82,114 (Top 2 %)
  • Language
    JavaScript
  • Created about 6 years ago
  • Updated 4 months ago

Reviews

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

Repository Details

The React Native crash course by Wix is a self-learning course designed to help you learn everything you need to know before diving into writing production code in React Native.

React Native Crash Course by Wix

The React Native crash course by Wix is a self-learning course designed to help you learn everything you need to know before diving into writing production code in React Native. This course is part of the official onboarding plan for every new developer joining the Wix Mobile Guild.

The course is divided into 2 sections:

1. Learn the basics

Helps you untangle the environment setup, learn basics or refresh your knowledge of JS, React, Node, Git, etc. If you already feel comfortable with these subjects, you can jump straight into the next section.

2. Build your first app

This step-by-step guide will teach you about the best practices and open source tools we are using at Wix and will guide you through building a simple blog app.

  1. Intro
  2. Build the app navigation (with React-native-navigation)
  3. Adding the app business logic and state management (with Remx)
  4. Style the app (with react-native-ui-lib)
  5. Add e2e tests (with Detox)
  6. Add unit tests (with Jest)
  7. Adding a Native Module
  8. Using shono
  9. Performance - Tools and Best Practice

Here is how our app will look like:

The app that we are going to build

Let's start. 🚀

Note: The most important thing about any course, is to keep it up to date. We encourage the old Scout's rule: "Leave the campground cleaner than you found it". If you find any issues or out of date content, please send us a pull request or open an issue we will take care of it. Thanks!

We are always working on improving the course content and we would love to get your feedback.

How To Run the App

npm install
npm run fake-server
react-native run-ios / run-android
  • prerequisites:
    • npm json-server package
    • ios simulator - Hardware -> Keyboard -> Toggle Software Keyboard

How To Run the Tests

npm run start-e2e
npm run test

More Repositories

1

react-native-interactable

Experimental implementation of high performance interactable views in React Native
JavaScript
5,179
star
2

react-templates

Light weight templates for react
JavaScript
2,813
star
3

vscode-glean

The extension provides refactoring tools for your React codebase
TypeScript
1,461
star
4

mjml-react

React component library to generate the HTML emails on the fly
JavaScript
992
star
5

react-native-zss-rich-text-editor

React Native rich text editor based on ZSSRichTextEditor
HTML
841
star
6

react-native-keyboard-input

Use your own custom input component instead of the system keyboard
Objective-C
797
star
7

wml

An alternative to symlinks that actually copies changed files from source to destination folders
JavaScript
769
star
8

angular-tree-control

Angular JS Tree
HTML
709
star
9

DetoxInstruments

Detox Instruments is a performance–analysis and testing framework, designed to help developers profile their mobile apps in order to better understand and optimize their app's behavior and performance.
Objective-C
621
star
10

react-native-controllers

Native IOS Navigation for React Native (navbar, tabs, drawer)
Objective-C
610
star
11

react-native-autogrow-textinput

Objective-C
542
star
12

accord

Accord: A sane validation library for Scala
Scala
534
star
13

react-native-keyboard-aware-scrollview

Created by artald
JavaScript
490
star
14

wix-embedded-mysql

embedded mysql based on https://github.com/flapdoodle-oss/de.flapdoodle.embed.process
Java
382
star
15

DetoxRecorder

Detox Recorder is a utility for recordings steps for a Detox test as you use your app in Simulator. After recording the test, add expectations that check if interface elements are in the expected state.
Objective-C
286
star
16

react-dataflow-example

Experimenting with different dataflow approaches for a real life React app
JavaScript
279
star
17

eslint-plugin-lodash

ESLint rules for lodash
JavaScript
276
star
18

pro-gallery

Blazing fast & beautiful galleries built for the web
JavaScript
270
star
19

quix

Quix Notebook Manager
TypeScript
267
star
20

petri

Wix experiment system (A/B test and feature toggle framework)
JavaScript
264
star
21

redux-saga-tester

Full redux environment testing helper for redux-saga
JavaScript
249
star
22

react-native-wordpress-editor

React Native Wrapper for WordPress Rich Text Editor
Objective-C
246
star
23

redux-testkit

Complete and opinionated testkit for testing Redux projects (reducers, selectors, actions, thunks)
JavaScript
226
star
24

remx

Opinionated mobx
JavaScript
224
star
25

exodus

Easily migrate your JVM code from Maven to Bazel
Scala
222
star
26

react-native-action-view

An easy to use component that allows displaying swipeable buttons with a variety of transitions.
Objective-C
187
star
27

tdd-katas

TDD katas
JavaScript
175
star
28

repluggable

Pluggable micro frontends in React+Redux apps
TypeScript
170
star
29

react-native-custom-segmented-control

Custom version of the IOS SegmentedControl component
Objective-C
168
star
30

lerna-script

Lerna addon for adding custom tasks
JavaScript
164
star
31

react-native-wix-engine

Java
164
star
32

angular-widget

Lazy load isolated micro-apps in Angular
JavaScript
163
star
33

angular-viewport-watch

Angular directive that disables watchers in scopes out of viewport
JavaScript
148
star
34

kampos

Tiny and fast effects compositor on WebGL
JavaScript
134
star
35

react-native-keyboard-tracking-view

Objective-C
134
star
36

react-native-swipe-view

Native container for a React Native view which supports swipe behavior (for swipe to delete and such)
Java
124
star
37

list-view-experiments

React Native ListView Experiments
Objective-C
123
star
38

rn-perf-experiments

Various performance experiments with React Native over a swipeable card pattern
JavaScript
119
star
39

rn-perf-experiments2

React Native performance experiments revisited
JavaScript
115
star
40

codio

A media format to record and playback the process of programming
Kotlin
107
star
41

rn-synchronous-render

Experiments with synchronous rendering in React Native
Objective-C
104
star
42

react-native-gifted-chat

JavaScript
99
star
43

as-typed

Ambient mapping from JSON schema to typescript
TypeScript
98
star
44

playable

No hassle, no fuss, just nice and easy video player
TypeScript
96
star
45

obsidian

Dependency injection library for React and React Native applications
TypeScript
88
star
46

tspoon

(DEPRECATED) AST visitors for TypeScript
TypeScript
83
star
47

remote-dom

JavaScript
82
star
48

react-native-paged-contacts

Paged contacts for React Native
Java
80
star
49

react-native-newrelic

New Relic reporting for React Native
JavaScript
79
star
50

react-module-container

Small library for building micro apps in React and Angular
JavaScript
68
star
51

react-native-repackager

Custom extensions for react-native packager
JavaScript
67
star
52

rapido

🏃 A site performance test kit, built using Chrome's DevTools.
JavaScript
63
star
53

BindingListView

React Native ListView experimental implementation supporting direct view binding
Objective-C
62
star
54

rawss

Generic CSS polyfill framework, with a CSS variables implementation
TypeScript
59
star
55

wix-animations

Tools for easy and simple animating capabilities
JavaScript
59
star
56

haste

An extendable, blazing fast build system that cares about user experience
JavaScript
58
star
57

kafka-connect-s3

A Kafka-Connect Sink for S3 with no Hadoop dependencies.
Java
56
star
58

unidriver

UniDriver - Universal Component Drivers 🚀
TypeScript
53
star
59

carmi

CARMI - Compiler for Automatic Reactive Modelling of Inference
JavaScript
49
star
60

mobile-crash-course

Crash course for engineers in Wix to start working on the mobile stack
49
star
61

react-native-extended-cli

Extended CLI with convenient scripts and utilities for developing React Native apps
Shell
47
star
62

protractor-helpers

Set of matchers, locators, and helper functions for Protractor
JavaScript
46
star
63

Kompot

Component testing for React Native using Detox
JavaScript
45
star
64

future-perfect

A helper for Futures covering non-functional concerns such as retries, timeouts and reporting
Scala
44
star
65

mjml-react-example

mjml-react example project
JavaScript
42
star
66

specs2-jmock

This is a specs2 adapter + DSL for using the popular mocking framework JMock
Scala
41
star
67

corvid

Download your Wix site, code in a local IDE, collaborate, use git, and more!
JavaScript
38
star
68

javascript-essentials

Essential reading and learning materials for Wix client-side engineers
37
star
69

fed-training-kit

A self-guided onboarding kit for new FED Guild members
JavaScript
35
star
70

DeviantArt-API

The DeviantArt API
35
star
71

commons-validator-js

JavaScript port of Apache Commons Validator
JavaScript
35
star
72

redux-cornell

A Redux library which helps reduce boilerplate
TypeScript
34
star
73

wix-http-testkit

Tools for testing HTTP services
Scala
34
star
74

DetoxSync

Synchronization framework for Detox and other testing frameworks
Objective-C
34
star
75

enzyme-drivers

Enzyme Drivers is a JavaScript library that makes react component testing with enzyme a lot easier and fun to write
JavaScript
33
star
76

mutable

State containers with dirty checking and more
JavaScript
32
star
77

eyes.it

Add screenshot comparison to existing protractor tests simply by changing `it` to `eyes.it`
JavaScript
31
star
78

react-native-sane-listview

Why do we need all this datasource nonsense?!
JavaScript
31
star
79

wix-ui-backoffice

Common React UI components for all Wix backoffice React applications
TypeScript
31
star
80

turnerjs

An angular test kit for components and directives. See:
TypeScript
29
star
81

wixmadefor

Wix Madefor font
Python
27
star
82

zorechka-bot

Github bot for keeping your Bazel dependencies up-to-date and clean
Scala
27
star
83

Koboshi

Obsessed with your precious data
Scala
27
star
84

react-popup-manager

Manage react popups, Modals, Lightboxes, Notifications
TypeScript
26
star
85

sample-wix-rest-app

JavaScript
25
star
86

wix-code-docs

Wix Code Reference Documentation - docworks jsons
JavaScript
25
star
87

wix-react-native-storybook-template

Server to host storybook for react native apps
JavaScript
24
star
88

hello-react-templates

Starter project for react-templates
JavaScript
24
star
89

react-native-open-file

Objective-C
24
star
90

isolated-runtime

Run untrusted Javascript code in a multi-tenant, isolated environment
JavaScript
23
star
91

react-hoverbox

Created by malsomnus
JavaScript
23
star
92

react-sequence-animator

A React library for sequence animations
TypeScript
23
star
93

fast-boot

Caching of the FS location of node modules between node process startups
JavaScript
22
star
94

svg2react-icon

Generate React icon components from SVG raw files
JavaScript
22
star
95

quick-2fa

Safely generate two-factor authentication tokens into clipboard
JavaScript
21
star
96

async-graph-resolver

A Utility to handle execution and aggregation of async actions
TypeScript
21
star
97

DetoxIPC

DetoxIPC is an asynchronous, bi-directional inter-process remote invocation library for Apple platforms with an API similar to Apple's NSXPCConnection.
Objective-C
21
star
98

react-native-animation-library

JavaScript
20
star
99

data-capsule

A pluggable capsule for storing key/value data for your application
TypeScript
20
star
100

DTXLoggingInfra

Logging infrastructure for Apple platforms
Objective-C
18
star