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
Related
I am working with react-redux, and I use stateless components
The error
This is my index.js
My app.js
the store is in another index.js file, inside a folder called redux
I have tried NewHOC, but I can't get rid of the error
I believe you've had a look at this question since you mentioned "NewHOC".
With that in mind, ensure that in all your components you make use of a return statement if they are functional components or have a render method if they are class based components.
Based on your screenshots, it seems RouterDirectory is the likely culprit as the screenshots you did upload look fine but we can't see RouterDirectory.
If you can provide the code for RouterDirectory we can help you further.
I'm gonna try to not make this too long and just shoot some questions which have been bothering me for some time:
If a view is displaying 2 different children components based on the
URL via a router, should those components be in the components or
views directory?
Should components names be capitalized like this - Participant.vue
or participant.vue?
Are single word components like Participant.vue okay to use? If not,
how should I name a component that renders information about a
participant of a match.
If I want the component to use multiple words, what naming
convention am I meant to use? ParticipantMatches.vue,
participantMatches.vue, participant-matches.vue or
Participant-Matches.vue?
If my components have some sort of hierarchy, would it be stupid to
append the parent component name to the start of the child component
so that related components stay grouped up in the IDE file tree?
For example:
Participant.vue - Parent component
ParticipantMatches.vue - Child component of Participant.vue
ParticipantMatchesStats.vue - Child component of ParticipantMatches.vue
The only problem I see is that component names might potentially become too big.
If a view is displaying 2 different children components based on the
URL via a router, should those components be in the components or
views directory?
There is not a real definition for this so it's up to you, certainly in a SPA, as it is only one page. For me personally I use place the the "views" that can be accessed via a route under views everything rendered on that view I place in components
Should components names be capitalized like this - Participant.vue or
participant.vue?
Vue recommends (as suggested early) https://v2.vuejs.org/v2/style-guide/#Base-component-names-strongly-recommended
Are single word components like Participant.vue okay to use? If not,
how should I name a component that renders information about a
participant of a match.
Participant.vue is basically OK, but again it's all up to you. When you have multiple component handling data of participants you could think of adding more information in the name of the component
If I want the component to use multiple words, what naming convention
am I meant to use? ParticipantMatches.vue, participantMatches.vue,
participant-matches.vue or Participant-Matches.vue?
When using a component directly in the DOM (as opposed to in a string template or single-file component), we strongly recommend following the W3C rules for custom tag names (all-lowercase, must contain a hyphen). This helps you avoid conflicts with current and future HTML elements.
If my components have some sort of hierarchy, would it be stupid to
append the parent component name to the start of the child component
so that related components stay grouped up in the IDE file tree?
Place the components that belong to each other in a directory, I should not use the parent name in the component itself, If you want to reuse the component somewhere else in the future, the name doesn't make sense anymore.
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 :).
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
In my page, I have a set of components and subcomponents like that:
<TournamentTabs :tournament="{{ json_encode($tournament) }}">
<TournamentTab>
<TournamentTabGeneral></TournamentTabGeneral>
<TournamentTabVenue></TournamentTabVenue>
etc.
</TournamentTab>
</TournamentTabs>
Right now, I use Laravel for getting $tournament value.
Now, I would like prop tournament to be available to all TournamentTabs children, but when accessing this.tournament, I get undefined
How should I access tournament value in all chidlren???
There are many ways to do it.
Firstly, the TournamentTabs is not a root component as I can see. Root component - it's the component where Vue instance mounts (in most cases div#app) that can be accessible via this.$root anywhere.
You can access it via this.$parent.tournament, but this is not a best way to do it, because you will end up like this.$parent.$parent.$parent....tournament if you need to access property from deeply nested components.
You can try vuex library to implement the central application storage.