I just approached to react native/react and are a bit confused...I specify that I have a background with angularjs, cordova, ect...Now I have a problem...I'm reading Flux and I want to use it in my application because it improve the structure with the unidirectional data flow.
The most important decision is the navigation in my app, so in the documentation of native react I found the component "Navigator". Now I don't understand if I can use the Navigator and Flux together or one excludes the other.
if you have informations, advices or examples, it's welcome. Thanks.
Infact you can use combination of both. Here is one library that and provides a router API on top of Navigator. https://github.com/aksonov/react-native-router-flux
You can use RN Navigator and Flux together, they're not excluding each other. Here is few navigation articles, that might help you:
http://blog.paracode.com/2016/01/05/routing-and-navigation-in-react-native/
http://tech.taskrabbit.com/blog/2015/09/21/react-native-example-app/
https://medium.com/the-exponent-log/routing-and-navigation-in-react-native-6b27bee39603#.ae10t4lks
You can find they're all stating that you can use Flux actions to dispatch events, update navigation bar buttons and screens content etc.
I'm not using Flux, but on your place I would try to read react-native-router-flux code, read articles and try to buid flux-navigator myself with all that aknowledged ^^. Good luck, I hope this will help you :)
Related
I'm new to React.
In React, we use navigation with a library like... 'react-router-dom' to navigate to pages. My question is most of the time, I can show and hide the entire Component based on the item selected in a navigation bar. I can store a value in the state and if the selection changes, I can show another component. Then why should we use a navigation library to navigate around?
I can not find any clear information about this online. Please help.
I was writing in this answer about having a more organized code (easier to maintenance) and a better folder structure, but you could easily have it working without a navigation library.
Probably the main point to use a navigation library is, as said in React Router page, whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native.
Web
The library will help you work with the URL, receive parameters, navigate between pages.
Mobile
You can make use of deep linking, receive parameters, navigate between screens, animations, components ready for Stack navigation, Drawer navigation, Bottom Tab navigation...
You can do anything I mentioned above by yourself, but libraries exist because other people had a need and you decide to use it if you have the same need and think it's worth it.
Why should we use a navigation library to navigate around?
In short, because they are widely used, well-tested libraries, with a performance that you may not be able to achieve easily if you want to have many different functionalities like those libraries have. And they will certainly save you a lot of time in case you need to create a way to navigate and work with things related to navigation (like those mentioned about Web and Mobile).
If your project is simple, there is no need to use a navigation library. To have a more practical experience, you can even try to do your project without using such a library, and when you are having difficulties, try replacing your logic with some library and analyze if it was worth it.
I am trying to create a blog application and I am a bit confused on the data flow patterns of React.
Should I be trying to use something like Redux to store all of my posts after fetching the posts? Do I use local storage?
How do I then tell a component to render the 'expanded' version of the post? Is it better to re-use a 'post' component or should I just create two seperate components, one for the title and one for the full post?
I know it's two questions in one, but they kind of go together. Thanks in advance
Here's what I've found out about these topics after 6 months into my self-taught React journey.
In my opinion, React built-in features are more than enough to handle state for a small to medium applications (especially if you're working alone as a single developer).
If you turn to Redux right away, you'll have to learn this whole new pattern of handling state in a single immutable store and how to connect your components to it.
Since you will be most likely fetching data asynchronously, you'll need a helper library to work async on Redux: redux-thunk or redux-saga.
So right from the start, you'll have to add:
redux
react-redux
redux-thunk OR redux-saga
That is a lot of documentation to digest. It's perfectly doable, but I couldn't agree more with this quote:
don't solve problems that you don't have
It will be hard to learn those tools, since you've never faced the problems that they solve. Problems that you don't encounter just yet when you're starting to learn React.
Read this (from Redux creator):
https://medium.com/#dan_abramov/you-might-not-need-redux-be46360cf367
So, my recommendation to you:
Learn basic React (with classes):
https://reactjs.org/docs/getting-started.html
Then learn React Hooks (and you can basically forget about class components):
https://reactjs.org/docs/hooks-intro.html
Build your project using only React at first. And see how it goes. Then you can read more about Redux and what it does, and will be able to make a better choice on if you really need it or not.
From what you've told us about your project:
Keep a state for all your posts in a component high in the tree. Maybe inside the <App/> component itself.
Build your functions to fetch and update post data and update the state with the response.
Render how many components as you wish. Displaying full info about the post inside a BlogPostComponent or simplified version inside a BlogPostThumbnailCard with just the thumbnail and the title, for example.
If you want to be ready for the next versions of React and have a shorter code, you should try the hooks and avoid Classes
https://reactjs.org/docs/hooks-intro.html
You can organize your code as you want, but this is more interesting to have scalability with your components and reuse them with different properties
Is there any way to create a sample login page and a home page in React native without using stack Navigator?
Yes. You can create your own navigation. Even react-navigation is a library built by components. If you are building your own navigation it will take more time and effort.
There are several navigation solutions are available for react-native. You should use one of this unless it is not fitting your need.
Some of the popular navigation solutions,
ReactNavigation - Js implementation
ReactNativeNavigation - Native implementation
React Native Router - Js implementation
An advantage of using navigation solutions out there is they got 100s of contributors. The solution is made by more than one person. Unity is strength. These libraries are updated frequently by adding more features and fixing bugs.
Using one of these solutions(libs) is a wise choice up to me.
Still, you wanna build your own navigation. Please follow Build Your Own Navigation
Reference MV* Architecture using React js
I understand that React is an View Engine and it still requires many other libraries like Redux..etc.
Is there a list of libraries to be used along with React to build a complete ecosystem like Angular ?
The React/JS ecosystem has become so rich, you can't really decide of a set of libraries to use by default in every projects.
It really depends on your needs.
Many people choose to generally go with react-router for the client-side routing, react-dom to interact with the DOM, redux for the state management, and react-redux to connect your components to the redux state.
You might find better answers by looking at the code of these react boilerplates, some of them explain there choices: http://andrewhfarmer.com/starter-project/
One of the key decisions in choosing React over Angular for us was that React is a technology, not a framework.
The ability to mix librairies to your needs is the big plus; there is no best list. As a quick example, redux makes tons of sense for us for the webapps, however it does not for the react-native mobile app where it may not blend well with the Navigator or may be overkill...
I have two parts in my website - a menu that has redirections on click, and a content div where I load something via ajax when I click on a link from this menu.
The menu is different when I logged in as a user, and when I logged in as an admin.
How do I structure the reactjs classes in the above situation? What's the best practice?
I find that react-router is sufficiently flexible to suit your scenario. It's a bit tricky to find "best practices" in the react community right now and it's better to understand what you're trying to do (you have done this) and then understand the tools available: react itself, react-router, and perhaps redux and react-redux as a way to check an application state [e.g. logged in as admin] in order to decide which links to display.