دوره REactNative برای طراحان دو بعدی

عنوان دوره : React Native for Designers – Design+Code

سطح : تمامی سطوح

زمان کل دوره : – ساعت

تعداد فایل های تصویری : –

سال آموزش : 2020

فایل تمرینی : –

مربی دوره : Meng To

نرم افزار : React

زیرنویس انگلیسی : ندارد

React Native for Designers – Design+Code

React Native is a popular Javascript framework that builds on top of React by using native components to create a real mobile app indistinguishable from one made using Xcode or Android Studio. The main difference with native development is that you get to use CSS, hot-reload, Javascript and other familiar techniques that the Web grown over the past decades. Most importantly, you’re building for both iOS and Android using the same codebase.

About this Course
This is a course made for designers, by a designer, focused on UI, animations and a workflow that starts with the design tool. The code and pace was made to be easy to follow. Every step is visual and can be followed with ease. You can take this course without any programming experience, but having some CSS and HTML knowledge definitely helps you to navigate the complexity of some concepts. The design file in InVision Studio (free), project assets and React Native source code are shared so that you can compare against your own progress.

2-Part Course
This first part contains 12 sections, followed by another 12 sections in Part 2. This is a massive course with over 10 hours of learning materials and bonus code for additional screens and fixes.

Why Learn React Native?
React Native is widely considered the best way to create cross-platform apps. If you’ve taken my React course, you’ll feel right at home because the code is extremely similar. Today, most designers know HTML and CSS for Web. I firmly believe that they should pick up equivalent skills for mobile. Owning the visual aspect, the animations and the adaptiveness of your app can save a tremendous amount of time for your team, avoiding unnecessary communications or make poor design decisions. In turn, it increases collaboration between designers and developers. Ultimately your product will ship faster, at a higher quality and with better iterations.

Workflow
We’re going to use Expo to set up our development environment so that it’s easy to test our app in iOS and Android simulators, and on your physical device. For styling, we’re going to use Styled Components because of its similarity to the syntax in CSS. Icon assets are going to be vector-based in SVG. For content and CMS (content management system), we’ll use Contentful and Apollo/GraphQL, which allows you to store your images and texts independently and query them like a database. Like this, when you update your content, you don’t need to send an app update.

We’re going to use Redux for communicating between components so that one action can influence multiple components at the same time. This is especially useful for persistent states and data. Apart from that, we’re going to use as many built-in libraries in the React Native/Expo toolbox as possible, like Animated, Gestures, Icons and Navigation.

Install Node
Before starting, you’ll need the Node package manager (NPM) for installing React and Expo. To install Node, you need to head to their site and download the version appropriate to your system. You can also install node using Homebrew (Mac only) if you prefer.

installNode

Install Xcode
If you’re on a Mac, I highly recommend installing Xcode for the required Command Line Tools and for using the iOS Simulator. Xcode also comes with Git, which is wonderful for development.

installXcode

In Xcode, make sure to go to Xcode, Preferences, Locations and see that the Command Line Tools are properly installed.

installXcode2

Terminal
To install pretty much any library such as Git or React, you’ll need to use the Terminal. It’s essentially a place you can write commands to run programs for you, such as installing new frameworks or updating your libraries. To open the Terminal, run Spotlight (Command + Space) and type Terminal. Once you’re there, go to your Downloads folder. You can press Tab to autocomplete Downloads.