Austin Story

Ruby, Rails and Javascript Blog

Powered by Genesis

ES6 Javascript import

March 7, 2016 By Austin Story Leave a Comment

when doing imports in es6 you have two different ways

implicit
[code]
import React from ‘react’;
[/code]

this assigns the entire module react to the value of React. To access anything in it you have to do accessors like so

[code]
class Something extends React.Component
[/code]

You can also import specific libraries from modules and then access them directly by name.

[code]
import { Component } from ‘react’;

class Something extends Component;
[/code]

This syntax also allows you to do more interesting things like define a function in a file, import it and then assign that to a variable for use. Here is an example using a react-redux component function.

[code]
import React from ‘react’;
import { Sparklines, SparklinesLine } from ‘react-sparklines’;

export default (props) => {
return (
<div>
<Sparklines height={120} width={180} data={ props.data }>
<SparklinesLine color={props.color} />
</Sparklines>
</div>
);
}
[/code]

In another file i can now do this to import and use my function

[code]

import SparkChart from ‘../components/chart’;

//Other code, this would go in my render react function
<SparkChart data={temps} color="yellow" />
[/code]

Filed Under: ES6, Javascript Tagged With: ES6, Import, Javascript

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • AngularJS
  • Books
  • Devise
  • Elasticsearch
  • ES6
  • Information Security
  • Integrations
  • Javascript
  • Linux
  • Minitest
  • PhoneGap
  • Programming
  • React
  • Redux
  • Ruby
  • Ruby on Rails
  • Stripe
  • Testing
  • Theory
  • TypeScript
  • Uncategorized
  • Vue
  • Webpack