React Native for Designers – Design+Code

React Native for Designers – Design+Code

React Native for Designers is a well-liked Javascript framework that builds on prime of React through the use of native parts to create an actual cell app indistinguishable from one made utilizing Xcode or Android Studio. The principle distinction with native growth is that you just get to make use of CSS, hot-reload, Javascript and different acquainted strategies that the Internet grown over the previous a long time. Most significantly, you’re constructing for each iOS and Android utilizing the identical codebase.

About this Course

This can be a course made for designers, by a designer, centered on UI, animations and a workflow that begins with the design instrument. The code and tempo was made to be straightforward to comply with. Each step is visible and might be adopted with ease. You possibly can take this course with none programming expertise, however having some CSS and HTML information undoubtedly lets you navigate the complexity of some ideas. The design file in InVision Studio (free), challenge belongings and React Native supply code are shared so as to examine towards your individual progress.

2-Part Course

This primary half accommodates 12 sections, adopted by one other 12 sections in Part 2. This can be a large course with over 10 hours of studying supplies and bonus code for extra screens and fixes.

Why Study React Native?

React Native is extensively thought-about one of the best ways to create cross-platform apps. In the event you’ve taken my React course, you’ll really feel proper at residence as a result of the code is extraordinarily comparable. As we speak, most designers know HTML and CSS for Internet. I firmly consider that they need to choose up equal expertise for cell. Proudly owning the visible side, the animations and the adaptiveness of your app can save an incredible period of time on your staff, avoiding pointless communications or make poor design selections. In flip, it will increase collaboration between designers and builders. In the end your product will ship quicker, at a better high quality and with higher iterations.


We’re going to make use of Expo to arrange our growth atmosphere in order that it’s straightforward to check our app in iOS and Android simulators, and in your bodily system. For styling, we’re going to make use of Styled Elements due to its similarity to the syntax in CSS. Icon belongings are going to be vector-based in SVG. For content material and CMS (content material administration system), we’ll use Contentful and Apollo/GraphQL, which lets you retailer your pictures and texts independently and question them like a database. Like this, once you replace your content material, you don’t must ship an app replace.

We’re going to make use of Redux for speaking between parts in order that one motion can affect a number of parts on the identical time. That is particularly helpful for persistent states and information. Aside from that, we’re going to make use of as many built-in libraries within the React Native/Expo toolbox as attainable, like Animated, Gestures, Icons and Navigation.

Set up Node

Earlier than beginning, you’ll want the Node package deal supervisor (NPM) for putting in React and Expo. To put in Node, you could head to their website and obtain the model acceptable to your system. It’s also possible to set up node utilizing Homebrew (Mac solely) in the event you desire.

Set up Xcode

In the event you’re on a Mac, I extremely suggest putting in Xcode for the required Command Line Instruments and for utilizing the iOS Simulator. Xcode additionally comes with Git, which is great for growth.

In Xcode, be certain that to go to Xcode, Preferences, Areas and see that the Command Line Instruments are correctly put in.


To put in just about any library reminiscent of Git or React, you’ll want to make use of the Terminal. It’s basically a spot you’ll be able to write instructions to run applications for you, reminiscent of putting in new frameworks or updating your libraries. To open the Terminal, run Highlight (Command + House) and sort Terminal. When you’re there, go to your Downloads folder. You possibly can press Tab to autocomplete Downloads

Be at liberty to place your challenge in your Desktop or in your Paperwork as an alternative. The explanation I select Downloads is as a result of iCloud gained’t intervene with Sizzling Reload.

Set up Expo

Expo will enable us to have a growth atmosphere for creating our app. Go to Terminal and sort this command and press Enter.

Create Project

Begin constructing your first React Native challenge by working this command.

  • Select the Clean template.
  • Select managed (default).
  • Set the identify to “Design+Code”. Or, be happy to make use of any identify you would like.
  • Set up Yarn.
  • Enter the challenge identify and outline. Slug needs to be designcode-app.

Direct obtain hyperlinks 2.four GB

Course download – Design+Code – part 1

Course download – Design+Code – part 2

Course download – Design+Code – part 3

Course download – Design+Code – part4

Rar Password


Your email address will not be published. Required fields are marked *

error: Content is protected !!