Comprehending import statements and someone's else old react code

I was trying to comprehend Dimitar Valchanov React code for the game 2048 via his github repo.

He have also written a blog about it but he wants a person to go through the code himself and have rather explained the structure of the code in this blog. (*Although he have included the comments in the code to make it more understandable).

The major problem I am facing while to trying to understand his code is 1st my lack of experience and 2nd His code is old now

While reviewing his code, I found few things which I was unable to comprehend.

[Question:1] In his import statements in this file, He have used something like this

import {Board, Result} from "js/components";

import * as Actions from "js/actions/actions";

How is he able to right js and go back to the src and then walk through the given repo.

If I would've been, I would have written something like this
import Board from "../components";
import Result from "../components";

Question: What does 'js' mean over here and how is he able to export two different file using single statement i.e import {Board, Result} from "js/components";

[Question:2] In the same file he have written something like this

this.actions = bindActionCreators(Actions, this.props.dispatch);

Which I thought to be dispatching all redux action together but I seem to be wrong and hence I am unable to comprehend what is inside my this.actions

And hence this line also doesn't make sense

 getChildContext() {

    return {

      actions: this.actions

    };

  }

Question: Can Someone please explain me what's happening above?

asked Nov 19 '18 at 23:33

NoobieSatan

1,111527

1

Good place to start for #1 stackoverflow.com/a/36796281/1175966 . The "js/" is just a directory path

– charlietfl
Nov 19 '18 at 23:43

@charlietfl There is no directory with name js I went through that article but still couldn't figure out how did he used the word js here

– NoobieSatan
Nov 20 '18 at 7:43

add a comment |

I was trying to comprehend Dimitar Valchanov React code for the game 2048 via his github repo.

The major problem I am facing while to trying to understand his code is 1st my lack of experience and 2nd His code is old now

While reviewing his code, I found few things which I was unable to comprehend.

[Question:1] In his import statements in this file, He have used something like this

import {Board, Result} from "js/components";

import * as Actions from "js/actions/actions";

How is he able to right js and go back to the src and then walk through the given repo.

If I would've been, I would have written something like this
import Board from "../components";
import Result from "../components";

Question: What does 'js' mean over here and how is he able to export two different file using single statement i.e import {Board, Result} from "js/components";

[Question:2] In the same file he have written something like this

this.actions = bindActionCreators(Actions, this.props.dispatch);

Which I thought to be dispatching all redux action together but I seem to be wrong and hence I am unable to comprehend what is inside my this.actions

And hence this line also doesn't make sense

 getChildContext() {

    return {

      actions: this.actions

    };

  }

Question: Can Someone please explain me what's happening above?

asked Nov 19 '18 at 23:33

NoobieSatan

1,111527

1

Good place to start for #1 stackoverflow.com/a/36796281/1175966 . The "js/" is just a directory path

– charlietfl
Nov 19 '18 at 23:43

@charlietfl There is no directory with name js I went through that article but still couldn't figure out how did he used the word js here

– NoobieSatan
Nov 20 '18 at 7:43

add a comment |

I was trying to comprehend Dimitar Valchanov React code for the game 2048 via his github repo.

The major problem I am facing while to trying to understand his code is 1st my lack of experience and 2nd His code is old now

While reviewing his code, I found few things which I was unable to comprehend.

[Question:1] In his import statements in this file, He have used something like this

import {Board, Result} from "js/components";

import * as Actions from "js/actions/actions";

How is he able to right js and go back to the src and then walk through the given repo.

If I would've been, I would have written something like this
import Board from "../components";
import Result from "../components";

Question: What does 'js' mean over here and how is he able to export two different file using single statement i.e import {Board, Result} from "js/components";

[Question:2] In the same file he have written something like this

this.actions = bindActionCreators(Actions, this.props.dispatch);

Which I thought to be dispatching all redux action together but I seem to be wrong and hence I am unable to comprehend what is inside my this.actions

And hence this line also doesn't make sense

 getChildContext() {

    return {

      actions: this.actions

    };

  }

Question: Can Someone please explain me what's happening above?

asked Nov 19 '18 at 23:33

NoobieSatan

1,111527

I was trying to comprehend Dimitar Valchanov React code for the game 2048 via his github repo.

The major problem I am facing while to trying to understand his code is 1st my lack of experience and 2nd His code is old now

While reviewing his code, I found few things which I was unable to comprehend.

[Question:1] In his import statements in this file, He have used something like this

import {Board, Result} from "js/components";

import * as Actions from "js/actions/actions";

How is he able to right js and go back to the src and then walk through the given repo.

If I would've been, I would have written something like this
import Board from "../components";
import Result from "../components";

Question: What does 'js' mean over here and how is he able to export two different file using single statement i.e import {Board, Result} from "js/components";

[Question:2] In the same file he have written something like this

this.actions = bindActionCreators(Actions, this.props.dispatch);

Which I thought to be dispatching all redux action together but I seem to be wrong and hence I am unable to comprehend what is inside my this.actions

And hence this line also doesn't make sense

 getChildContext() {

    return {

      actions: this.actions

    };

  }

Question: Can Someone please explain me what's happening above?

javascript reactjs redux

asked Nov 19 '18 at 23:33

NoobieSatan

1,111527

asked Nov 19 '18 at 23:33

NoobieSatan

1,111527

asked Nov 19 '18 at 23:33

NoobieSatan

1,111527

asked Nov 19 '18 at 23:33

NoobieSatan

1,111527

asked Nov 19 '18 at 23:33

NoobieSatan

1,111527

1

Good place to start for #1 stackoverflow.com/a/36796281/1175966 . The "js/" is just a directory path

– charlietfl
Nov 19 '18 at 23:43

@charlietfl There is no directory with name js I went through that article but still couldn't figure out how did he used the word js here

– NoobieSatan
Nov 20 '18 at 7:43

add a comment |

1

Good place to start for #1 stackoverflow.com/a/36796281/1175966 . The "js/" is just a directory path

– charlietfl
Nov 19 '18 at 23:43

@charlietfl There is no directory with name js I went through that article but still couldn't figure out how did he used the word js here

– NoobieSatan
Nov 20 '18 at 7:43

Good place to start for #1 stackoverflow.com/a/36796281/1175966 . The "js/" is just a directory path

– charlietfl
Nov 19 '18 at 23:43

@charlietfl There is no directory with name js I went through that article but still couldn't figure out how did he used the word js here

– NoobieSatan
Nov 20 '18 at 7:43

add a comment |

1 Answer
1

active

oldest

votes

Question #1:

The import statement is not old syntax or deprecated. Its simply another way of importing code from an ES6 module.

import {Board, Result} from "js/components";

and

import Board from "../components/Board";

import Result from "../components/Result";

are both perfectly valid ways of importing code. Its up to you how you want to do it.

Here is a link that explains Named Exports vs Default Exports.

The js/components is just a directory path that points to his file here

Question #2:

Whats inside this.actions is many functions wrapped in dispatch(...) ready to be dispatched to Redux to perform actions on the store upon being called.

In the following method

getChildContext() {

    return {

      actions: this.actions

    };

}

it just returns this.actions, basically.

This code is not old and still used on the Redux site when explaining the bindActionCreators method.

answered Nov 20 '18 at 0:18

Shawn Andrews

945617

Thanks for answering There is no directory with name js I went through that article but still couldn't figure out how did he used the word js here

– NoobieSatan
Nov 20 '18 at 7:43

I'm not sure either, but if you were wanting to replicate this program and it gives you an error that it cant find "js/components" then you can just replace it with "../../components"

– Shawn Andrews
Nov 20 '18 at 18:23

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53384164%2fcomprehending-import-statements-and-someones-else-old-react-code%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Question #1:

The import statement is not old syntax or deprecated. Its simply another way of importing code from an ES6 module.

import {Board, Result} from "js/components";

and

import Board from "../components/Board";

import Result from "../components/Result";

are both perfectly valid ways of importing code. Its up to you how you want to do it.

Here is a link that explains Named Exports vs Default Exports.

The js/components is just a directory path that points to his file here

Question #2:

Whats inside this.actions is many functions wrapped in dispatch(...) ready to be dispatched to Redux to perform actions on the store upon being called.

In the following method

getChildContext() {

    return {

      actions: this.actions

    };

}

it just returns this.actions, basically.

This code is not old and still used on the Redux site when explaining the bindActionCreators method.

answered Nov 20 '18 at 0:18

Shawn Andrews

945617

Thanks for answering There is no directory with name js I went through that article but still couldn't figure out how did he used the word js here

– NoobieSatan
Nov 20 '18 at 7:43

I'm not sure either, but if you were wanting to replicate this program and it gives you an error that it cant find "js/components" then you can just replace it with "../../components"

– Shawn Andrews
Nov 20 '18 at 18:23

add a comment |

Question #1:

The import statement is not old syntax or deprecated. Its simply another way of importing code from an ES6 module.

import {Board, Result} from "js/components";

and

import Board from "../components/Board";

import Result from "../components/Result";

are both perfectly valid ways of importing code. Its up to you how you want to do it.

Here is a link that explains Named Exports vs Default Exports.

The js/components is just a directory path that points to his file here

Question #2:

Whats inside this.actions is many functions wrapped in dispatch(...) ready to be dispatched to Redux to perform actions on the store upon being called.

In the following method

getChildContext() {

    return {

      actions: this.actions

    };

}

it just returns this.actions, basically.

This code is not old and still used on the Redux site when explaining the bindActionCreators method.

answered Nov 20 '18 at 0:18

Shawn Andrews

945617

Thanks for answering There is no directory with name js I went through that article but still couldn't figure out how did he used the word js here

– NoobieSatan
Nov 20 '18 at 7:43

I'm not sure either, but if you were wanting to replicate this program and it gives you an error that it cant find "js/components" then you can just replace it with "../../components"

– Shawn Andrews
Nov 20 '18 at 18:23

add a comment |

Question #1:

The import statement is not old syntax or deprecated. Its simply another way of importing code from an ES6 module.

import {Board, Result} from "js/components";

and

import Board from "../components/Board";

import Result from "../components/Result";

are both perfectly valid ways of importing code. Its up to you how you want to do it.

Here is a link that explains Named Exports vs Default Exports.

The js/components is just a directory path that points to his file here

Question #2:

Whats inside this.actions is many functions wrapped in dispatch(...) ready to be dispatched to Redux to perform actions on the store upon being called.

In the following method

getChildContext() {

    return {

      actions: this.actions

    };

}

it just returns this.actions, basically.

This code is not old and still used on the Redux site when explaining the bindActionCreators method.

answered Nov 20 '18 at 0:18

Shawn Andrews

945617

Question #1:

The import statement is not old syntax or deprecated. Its simply another way of importing code from an ES6 module.

import {Board, Result} from "js/components";

and

import Board from "../components/Board";

import Result from "../components/Result";

are both perfectly valid ways of importing code. Its up to you how you want to do it.

Here is a link that explains Named Exports vs Default Exports.

The js/components is just a directory path that points to his file here

Question #2:

Whats inside this.actions is many functions wrapped in dispatch(...) ready to be dispatched to Redux to perform actions on the store upon being called.

In the following method

getChildContext() {

    return {

      actions: this.actions

    };

}

it just returns this.actions, basically.

This code is not old and still used on the Redux site when explaining the bindActionCreators method.

answered Nov 20 '18 at 0:18

Shawn Andrews

945617

answered Nov 20 '18 at 0:18

Shawn Andrews

945617

answered Nov 20 '18 at 0:18

Shawn Andrews

945617

answered Nov 20 '18 at 0:18

Shawn Andrews

945617

Thanks for answering There is no directory with name js I went through that article but still couldn't figure out how did he used the word js here

– NoobieSatan
Nov 20 '18 at 7:43

I'm not sure either, but if you were wanting to replicate this program and it gives you an error that it cant find "js/components" then you can just replace it with "../../components"

– Shawn Andrews
Nov 20 '18 at 18:23

add a comment |

Thanks for answering There is no directory with name js I went through that article but still couldn't figure out how did he used the word js here

– NoobieSatan
Nov 20 '18 at 7:43

I'm not sure either, but if you were wanting to replicate this program and it gives you an error that it cant find "js/components" then you can just replace it with "../../components"

– Shawn Andrews
Nov 20 '18 at 18:23

Thanks for answering There is no directory with name js I went through that article but still couldn't figure out how did he used the word js here

– NoobieSatan
Nov 20 '18 at 7:43

I'm not sure either, but if you were wanting to replicate this program and it gives you an error that it cant find "js/components" then you can just replace it with "../../components"

– Shawn Andrews
Nov 20 '18 at 18:23

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu