Develop Reference

How to get data of a state in one step above

I am a beginner and I am learning React JS. I am making a demo project. I need a help there.
In my app.js there is routes shop.js and review.js. The data and states is in shop.js. Now how can I pass some states data on review.js from shop.js?
Image
How can I do that?

It's recommended to lift the shared state up to their closest common ancestor (app.js).
please check
https://reactjs.org/docs/lifting-state-up.html

You could use Context
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

VueJS: Passing data from root element to child components through router-view

Generally, when I have a variable that several child components should be able to access, I store them in the data object of my root Vue element and subsequently pass them down to child components through properties.
However, I've recently progressed to using vue-router and my root vue element only contains a "router-view" component, which controls what child component is being served to the user.
Below is what my root element looks like (I am using vue-cli):
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style lang="scss">
</style>
As a result, the approach of passing variables to child components through properties, which I used prior to using vue router, doesn't seem viable anymore.
How should I be passing data from my root Vue element to my child components through vue router? Should I even be using this approach to achieve my goal of accessing "global" variables?
I've read several threads that reference using Vuex for state management and while I'm unopposed to learning and using it - it feels a little overkill for what I'm trying to achieve at this stage.
EDIT (clarifying question)
Several of my child components make API calls to a local / production server (depending on the node environment) and I find myself copying the “if-else” logic multiple times to determine which server the component should be making the API call to. So I thought it would be a much better approach of declaring a “server” variable at the root element and then pass it down to the child elements that need to make API calls

Vuex is a great tool, however, if you're trying to pass some basic data - such as a record id - to a child component, you should be looking at route props.
https://router.vuejs.org/en/essentials/passing-props.html
With route route props, you declare props in your child components in the normal fashion. However, the must be named the same are the route property.
// child component
props: ['id']
// route definition
{ path: '/item/:id', component: Item, props: true },
As you can see the :id is then passed to the child component id prop.
As your application grows in it's complexity, vuex (or a state manager of your choosing) would be a much more appropriate tool to use. When you become comfortable with it and learn some of the really nice tricks, you'll see what you've been missing :).

Correct way to have a global variable in react

I'm developing a react.js project and before the main component is rendered, I call a function that returns an object that all components should be able to access. What is the correct way of doing this in react? Currently, I'm just passing it as a prop to the main component and then I suppose I should have to remember to pass it as a prop to all other components. Is there an easier or better way of doing this?

It seems like you are doing something like Redux. Passing the object as props should be okay. You could make a higher-order component that wraps your components and adds access to that global object via props. This is similar to Redux's connect.

As the expectation in React is application-wide concerns ,like a flux/redux/apollo store, are kept in a root provider component’s context and then accessed elsewhere in the component tree via a Higher Order Component or render props. This provides relief from globals and circular dependencies, and makes testing those components easier.
However, if you have non-component code that will need access to configuration values, you may need to use config global and writing components in a way that accepts config values from props.
see: https://github.com/lorenwest/node-config

Files required in parent component are not accessible to child component

I am working on React project from a while, I just got a small idea, when we are requiring a file in Parent component like below
var something = require('../../utils/properties.js');
why cant we access that in child component without requiring again, is there any way that we can do this or put all the requires in one file and access them across the project?

You can pass something as a prop to the child component. Read more here

Accessing redux dispatch from deeply nested components

I'm using react-redux with the components. It passes dispatch as a prop into my top level component, but i'm having trouble accessing it from deeply nested (and some other more complexly mounted) components. What is the best way to access dispatch from any component? Do I need to pass it manually as a prop to every component I'd like to use it in?

You can use connect on components even if they are bellow some already connected components.

If you don't want to use connect everywhere around you can just explicitly import store and dispatch on it: http://redux.js.org/docs/basics/Store.html