Mateusz Grzesiukiewicz [Mateusz Grzesiukiewicz] - Hands-On Design Patterns with React Native
Here you can read online Mateusz Grzesiukiewicz [Mateusz Grzesiukiewicz] - Hands-On Design Patterns with React Native full text of the book (entire story) in english for free. Download pdf and epub, get meaning, cover and reviews about this ebook. year: 2018, publisher: Packt Publishing, genre: Computer. Description of the work, (preface) as well as reviews are available. Best literature library LitArk.com created for fans of good reading and offers a wide selection of genres:
Romance novel
Science fiction
Adventure
Detective
Science
History
Home and family
Prose
Art
Politics
Computer
Non-fiction
Religion
Business
Children
Humor
Choose a favorite category and find really read worthwhile books. Enjoy immersion in the world of imagination, feel the emotions of the characters or learn something new for yourself, make an fascinating discovery.
![Mateusz Grzesiukiewicz [Mateusz Grzesiukiewicz] Hands-On Design Patterns with React Native](https://litark.com/uploads/posts/book/119470/mateusz-grzesiukiewicz-mateusz-grzesiukiewicz.jpg)
- Book:Hands-On Design Patterns with React Native
- Author:
- Publisher:Packt Publishing
- Genre:
- Year:2018
- Rating:5 / 5
- Favourites:Add to favourites
- Your mark:
Hands-On Design Patterns with React Native: summary, description and annotation
We offer to read an annotation, description, summary or preface (depends on what the author of the book "Hands-On Design Patterns with React Native" wrote himself). If you haven't found the necessary information about the book — write in the comments, we will try to find it.
Learn how to write cross platform React Native code by using effective design patterns in the JavaScript world. Get to know industry standard patterns as well as situational patterns. Decouple your application with these set of Idea patterns.
Key Features- Mobile development in React Native should be done in a reusable way.
- Learn how to build scalable applications using JavaScript patterns that are battle tested.
- Try effective techniques on your own using over 80 standalone examples.
React Native helps developers reuse code across different mobile platforms like iOS and Android.
This book will show you effective design patterns in the React Native world and will make you ready for professional development in big teams.
The book will focus only on the patterns that are relevant to JavaScript, ECMAScript, React and React Native. However, you can successfully transfer a lot of the skills and techniques to other languages. I call them Idea patterns.
This book will start with the most standard development patterns in React like component building patterns, styling patterns in React Native and then extend these patterns to your mobile application using real world practical examples. Each chapter comes with full, separate source code of applications that you can build and run on your phone.
The book is also diving into architectural patterns. Especially how to adapt MVC to React environment. You will learn Flux architecture and how Redux is implementing it. Each approach will be presented with its pros and cons. You will learn how to work with external data sources using libraries like Redux thunk and Redux Saga.
The end goal is the ability to recognize the best solution for a given problem for your next mobile application.
What you will learn- Explore the design Patterns in React Native
- Learn the best practices for React Native development
- Explore common React patterns that are highly used within React Native development
- Learn to decouple components and use dependency injection in your applications
- Explore the best ways of fetching data from the backend systems
- Learn the styling patterns and how to implement custom mobile designs
- Explore the best ways to organize your application code in big codebases
The ideal target audience for this book are people eager to learn React Native design patterns who already know the basics of JavaScript. We can assume that the target audience already knows how to write Hello World in JavaScript and know what are the functions, recursive functions, JavaScript types and loops.
Downloading the example code for this book You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Mateusz Grzesiukiewicz [Mateusz Grzesiukiewicz]: author's other books
Who wrote Hands-On Design Patterns with React Native? Find out the surname, the name of the author of the book and a list of all author's works by series.
![Adam Boduch [Adam Boduch] - React and React Native - Second Edition](/uploads/posts/book/119457/thumbs/adam-boduch-adam-boduch-react-and-react-native.jpg)
![Emilio Rodriguez Martinez [Emilio Rodriguez Martinez] - React: Cross-Platform Application Development with React Native](/uploads/posts/book/119453/thumbs/emilio-rodriguez-martinez-emilio-rodriguez.jpg)
Hands-On Design Patterns with React Native — read online for free the complete book (whole text) full work
Below is the text of the book, divided by pages. System saving the place of the last page read, allows you to conveniently read the book "Hands-On Design Patterns with React Native" online for free, without having to search again every time where you left off. Put a bookmark, and you can go to the page where you finished reading at any time.
Font size:
Interval:
Bookmark:
This chapter is dedicated to managing dependencies, namely libraries, that your mobile applications rely on. Most current applications abuse the singleton pattern. However, I strongly believe that, one day, JavaScript developers will adopt well-known dependency injection (DI) patterns. Even if they decide to use the singleton pattern, it will be way easier to refactor. In this chapter, we will focus on the React context and how libraries such as Redux leverage the DI mechanism. This is the safest alternative to use if you really want to step up your code and make it easily testable. We will dive into the code in the React Redux library, which uses the React context extensively. You will also understand why the JavaScript world is so slow to abandon the singleton pattern.
In this chapter, you will learn about the following topics:
- The singleton pattern
- The DI pattern and its flavors in ECMAScript
- The storybook pattern, to increase productivity and document your components
- The React context API
- How to manage large code bases
Get ready, as we will start off with the singleton pattern straightaway.
In this chapter, we finally expanded our application with far more views than before. You have learned different approaches to navigation in mobile applications. In the React Native world, it is either native navigation, JavaScript navigation, or a hybrid of the two. Along with learning navigation itself, we have used components including StackNavigation, TabNavigation, and DrawerNavigation.
For the first time, we have also ejected the Create React Native App and installed native code from the native navigation library. We are starting to dive really deeply into React Native. Now is the time to step back and refresh our JavaScript knowledge. We will learn patterns that are not only beneficial in React Native, but in JavaScript overall.
In this section, we will refactor the Tasks application to use MobX instead of vanilla Flux.
Before we dive in, install the two packages using the following command:
yarn add mobx mobx-reactOkay, first, let's clean up unneeded pieces:
- AppDispatcher.js: Dispatching is done by MobX using observables behind the scenes.
- TaskActions.js: Actions will now live in TaskStore and work on its state. In MobX, you will most likely end up with many stores, so this is not a big issuewe keep related things together.
- TasksActionTypes.js: There is no need to define this. MobX will take care of it internally.
As you can see, before we begin, we have already removed so much overhead. This is one of the biggest advantages of MobX that fans of the library mention.
It's time to rebuild the store in MobX fashion. This will require some new keywords, so read the following snippet carefully:
// Chapter 5 / Example 4 / src / data / TaskStore.jsimport { configure , observable , action } from 'mobx' ;
import data from './tasks.json' ;
// don't allow state modifications outside actions
configure ({ enforceActions : true }) ;
export class TaskStore {
@observable tasks = [...data. tasks ] ; // default state
@action addTask (task) {
this . tasks . push ({
name : task. name ,
description : task. description ,
likes : 0
}) ;
}
}
const observableTaskStore = new TaskStore() ;
export default observableTaskStore ;
As you can see, there are three new keywords that I have imported from the MobX library:
- configure: This is used to set up our store in such a way as to enforce mutations only by actions.
- observable: This is used to enrich property in such a way it can now be observed. If you have some JavaScript background on streams or Observables, it is literally wrapped by these.
- action: This is just like any other action but it's used in a decorator fashion.
Finally, we create an instance of the store and pass it along as a default export.
Now we need to expose our new store to the views. To do this, we will use MobX Provider, a similar utility to that found in Redux:
// Chapter 5 / Example 4 / src / App.js// ...
import { Provider as MobXProvider } from 'mobx-react/native' ;
// ...
const App = () => (
store = {TaskStore} >
) ;
export default App ;
The last section of the preceding snippet involves refactoring the descendant views.
The AppView component provides tasks down to TaskList component. Let's now consume tasks from our newly created store:
// Chapter 5 / Example 4 / src / views / AppView.jsimport { inject , observer } from 'mobx-react/native' ;
@inject ( 'store' ) @observer
class AppView extends React. Component {
render = () => (
// ...
tasks = { this . props . store . tasks } />
// ...
) ;
}
Let's do something similar with AddTaskForm, but instead of using tasks, we will use the addTask function:
// Chapter 5 / Example 4 / src / views / AddTaskForm.js// ...
@inject ( 'store' ) @observer
class AddTaskForm extends React. Component {
// ...
handleSubmit = () => {
this . props . store . addTask ({
name : this . state . name ,
description : this . state . description
}) ;
// ...
} ;
// ...
}
That's it! Our app is fully functional again.
This is an advanced chapter that focuses on the functional programming paradigm and design patterns that come from the functional programming world. It is high time to dive deep into why we have the option of creating stateless and stateful components. This comes down to understanding what pure functions are and how immutable objects help us to predict application behavior. Once we have clarified that, we will move on to higher-order functions and higher-order components. You have used them already many times, but this time we will look at them from a slightly different perspective.
Throughout this book, I have challenged you with many concepts that will get much much clearer after reading this chapter. I hope you will embrace them in your applications and use them wisely, keeping in mind the maturity of your team. These patterns are good to know but are not essential to either React or React Native development. However, at some point when reading pull requests to the React or React Native repositories, you will find yourself referring back to this chapter quite often.
In this chapter, we will cover the following topics:
- Mutable and immutable structures
- Specific functions, such as pure functions
- Maybe m onad and the monad pattern
- Functional programming benefits
- Caching and memorization
To be honest, beyond just the previous implementation, we can see many other variations in order to achieve the same thing. Let's discuss them.
In the following code, the singleton has already been exported as an instance:
class Singleton {static instance ;
constructor () {
if (Singleton. instance ) {
return Singleton. instance ;
}
this . instance = this ;
}
}
export default new Singleton();
This looks like a good improvement unless your Singleton requires arguments. If so, the Singleton is exported in such a way that it is also harder to test and may only accept hard-coded dependencies.
Font size:
Interval:
Bookmark:
Similar books «Hands-On Design Patterns with React Native»
Look at similar books to Hands-On Design Patterns with React Native. We have selected literature similar in name and meaning in the hope of providing readers with more options to find new, interesting, not yet read works.
Discussion, reviews of the book Hands-On Design Patterns with React Native and just readers' own opinions. Leave your comments, write what you think about the work, its meaning or the main characters. Specify what exactly you liked and what you didn't like, and why you think so.