The State of React and React native
Youssouf EL Azizi
Amine Hakkou
ReactJs :
A JavaScript library for building user interfaces
ReactJs
16.6 lazy, memo suspense and contextType
A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components.
π₯π₯π₯ Suspense π₯π₯π₯
In short: the new feature allows you to defer rendering part of your application tree until some condition is met (for example data from an endpoint or a resource is loaded).
React.memo
This helps boost the performance by avoiding re-rendering if not needed.
React.lazy
Code-Splitting with Suspense
static contextType
Consume Context as a static property
Hands-on
Agenda
16.7.0-alpha: Hooks
Hooks are a new feature proposal that lets you use state and other React features without writing a class.
Motivation
Sharing stateful logic
React doesnβt offer a way to βattachβ reusable behavior to a component (for example, connecting it to a store).
Splitting stateful logic and side effects from Components.
In many cases itβs not possible to break these components into smaller ones because the stateful logic is all over the place. Itβs also difficult to test them.
No Breaking Changes
Completely opt-in
You can try Hooks in a few components without rewriting any existing code.
100% backwards-compatible.
Hooks donβt contain any breaking changes.
Available now
yarn add react@16.7.0-alpha.0
Hooks At a glance
Visit this Sandbox if you want to try it!
Hands-on
React Native :
Build native mobile apps using JavaScript and React Top open source projects
React Native Notes
Be Ready
HMR to build apps faster, but ...
React Native Difficulty Curve
Easy to start with, hard to Scale
Do I need to learn java/swift stuff ?
Mmm, highly recommended ( Native modules )
List
Use FlatList
Navigation
React-navigation ( javascript solution ) or react-native-navigation ( native solution)
What is New In React Native ?
π₯π₯π₯ JSI π₯π₯π₯
The communication between JavaScript and the VM is being standardized using a JavaScript Interface (JSI). Fabric uses JSI to expose methods to JavaScript code. Using JSI, JavaScript can hold reference to C++ Host Objects and invoke methods on them. ( proposal )
A healthy GitHub repository
Issues and pull requests get handled within a reasonable period of time.
Excellent documentation.
Focus on helping users create high quality experiences, and up-to-date API reference docs.
Stable APIs
?
Resources