Posts

Showing posts with the label ecmascript-6

nodejs import is always undefined

nodejs import is always undefined It's my first time using Babel transpiler to write ES6 to create a nodejs program. I have the following directory structure: /src/ /modules/ commands.js index.js /app/ .babelrc package.json in my /src/index.js I import my commands.js file, and export a const test : /src/index.js commands.js const test import { commands as commandsModule } from './modules/commands'; export const test = 'some test'; Then, inside my /src/modules/commands/js , I try to do the following: /src/modules/commands/js import { test }from '../index'; console.log(test); Next, I use babel to transpile to es5 so I can run my program with node app/index.js using the following command: node app/index.js ./node_modules/.bin/babel ./src --experimental --source-maps-inline -d ./app && node ./app/index But this seems to always prints undefined! What am I doing wrong, I really don't understand why my imported test variable is undef...

Automatically going to a div element created in React Virtual Dom

Automatically going to a div element created in React Virtual Dom My webpage uses React components. At the render function of one of its components div elements that looks like: <div id='myid'> {/* ... */} </div> are being used. After reloading a page we need to go to one of those divs. For example, after reloading that page we could automatically need to go to the <div> element with id equals to myid . Notice that that <div> is in React virtual DOM so functions like document.getElementById might not work (as it is happening with me). Is this possible? <div> myid <div> document.getElementById 3 Answers 3 The <div> and the id will end up in the document when the component is mounted, so you could scroll there in the componentDidMount hook. <div> id componentDidMount Example (CodeSandbox) class App extends React.Component { componentDid...

Going to a section of a page using java script

Going to a section of a page using java script I have a webpage with several components that looks like: <div id='someId' ...... /> Manually it is possible to go to those sections using <a href="#someId" ..... /> How, using es2015 or react or javascript, could be created a function to go to that <div> component ? <div> 2 Answers 2 You could use the scrollIntoView function. document.getElementById('someId').scrollIntoView(); React Example (CodeSandbox) class App extends React.Component { onClick = () => { this.ref.scrollIntoView(); }; render() { return ( <div> <button onClick={this.onClick}>Scroll down</button> <div style={{ height: 1000 }}>Hello CodeSandbox</div> <div style={{ height: 1000 }} ref={ref => (this.ref = ref)}> Scroll here </div...

seState not working

seState not working In my app component below I want to hide a div based on a function I have defined but it brings an error saying TypeError: Cannot read property 'setState' of undefined Please what may be wrong class Apps extends Component { constructor(props) { super(props); // Don't do this! this.state = { showing: true }; } render() { return ( <div> <div className="container"> <div style={{ display: (this.state.showing ? 'block' : 'none') }}> A Single Page web application made with react </div> </div> <div className="buttons"> <a href='' onClick={this.onclick} >Login</a> <br/> <a href='' >Signup</a> <br /> ...