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.
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.
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