Skip to content

React Import Export

Jump to bottom
sergio edited this page Jan 21, 2021 · 6 revisions

What is React?

create-react-app

$ npm start             #starts a server to run the react app on

Knowing React also opens doors to similar frameworks, such as React Native for building mobile apps.

In React apps, we write JSX - it looks like HTML, and uses a lot of HTML syntax. JSX lets us include JavaScript functions right along with the HTML, and also allows us to add in components, which are separate, self-contained chunks of JSX.

class App extends Component {
  render() {

    return (
      // JSX goes here!
    )
  }
}

We will go into greater depth on things like extends Component, but for now, the key thing to understand is that all of the visible content of our app is contained within this App class. Is possible to have multiple files that contain visible content, but App is at the top-most level, the parent component of our React app content.

Newer versions of react (create-react-app version 3.0.0) will have a function rather than a class:

function App() {
  return (
    // JSX goes here!
  )
}

Classes can be added as attributes in JSX, similar to HTML. The one difference to remember is that in JSX, we must use the className attribute, rather than class. Using class will cause an error while testing. Classes are used in this lab to make testing your solution a little easier.

Importing, Exporting, Component Chain

import React, { Component } from 'react'
import moment from 'moment'
import ExampleComponent from './ExampleComponent'
import TestComponent from './TestComponent'

// class blah blah extends whatever, render something etc...

export default App

import pulls in specific content from the packages from the node_modules folder. It also imports files from the same directory, like ./ExampleComponent, which allows it to use in the render() method. With the export line, we are allowing other files to import things from the App.js file. There are different types of exports, like named exports and default exports, but we will dive deeper into this topic later.

The line, export default App denotes that our App class is the main thing we want to export from our App.js file. You can have only one default export per file. If you take a look at one of the other JS files, index.js, you can see that at the top of the file, we are importing App from App.js (the .js is not included, but still implied). This is the syntax to import something that is the default export of another file:

import App from './App';

This structure of importing and exporting allows for files to 'chain' together. ExampleComponent.js has an export statement as well (take the time to locate it), and is imported into App.js. Additionally, App.js is imported into index.js.

The index.js file doesn't have an export. It is the 'top' of this chain.

import React, { Component } from 'react';
import moment from 'moment';
import ExampleComponent from './ExampleComponent'
import TestComponent from './TestComponent'
// Add your code own within the return statement
class App extends Component {
  render() {
    return (
      // JSX goes here!
    );
  }
}
export default App;
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

hint on how index.js and index.html connect to each other.

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title> A React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

Using this structure, a lot of set-up is abstracted away. We do not need to deal with writing the HTML document or connecting it with JavaScript, as it is always the boiler plate code with index.html, index.js, and App.js.


Import Export

import and export enable us to use code from one file in other locations across our projects

default export

can only be used once per file

// src/houses/HagridsHouse.js
import React from 'react';

function whoseHouse() {
	console.log(`HAGRID'S HOUSE!`);
}

export default whoseHouse;

// src/Hogwarts.js
import whoseHouse from './HagridsHouse.js'
import ReactDOM from 'react-dom'

render() {
  return (
    whoseHouse()
    // > `HAGRID'S HOUSE!`,
    document.getElementById('root')
  )
}

If we can export default functions, we can export default components! like so...

// src/houses/Hufflepuff.js
import React from 'react';

export default class Hufflepuff extends React.Component {
	render() {
		return <div>NOBODY CARES ABOUT US</div>;
	}
}

// src/Hogwarts.js
import React from 'react';
import HooflePoof from './houses/Hufflepuff.js';

export default class Hogwarts extends React.Component {
	render() {
		return (
			<div>
				<HooflePoof />
				//> Will render `NOBODY CARES ABOUT US`, even though we renamed `Hufflepuff`
				// to `HooflePoof`
			</div>
		);
	}
}

You will commonly see a slightly different way of writing this:

// src/Hogwarts.js
import React from 'react'
import HooflePoof from './houses/Hufflepuff.js'

class Hogwarts extends React.Component{
  ...
}

export default Hogwarts

named export

With named exports, we can export multiple pieces of code from within a module, allowing us to call on them explicitly when we import.

// src/houses/Gryffindor.js
export function colors() {
	console.log('Scarlet and Gold');
}

function values() {
	console.log('Courage, Bravery, Nerve and Chivalry');
}

export function gryffMascot() {
	console.log('The Lion');
}


// src/Hogwarts.js
import * from './houses/Gryffindor.js'

colors()
// > 'Scarlet and Gold'

gryffMascot()
// > 'The Lion'

values()
// > ReferenceError: values is not defined

We can also move named exports to the bottom of a file:

// src/houses/Gryffindor.js
function colors() {
  console.log("Scarlet and Gold")
}

function values() {
  console.log("Courage, Bravery, Nerve and Chivalry")
}

function gryffMascot() {
  console.log("The Lion")
}

export {
  colors,
  gryffMascot
}

import { function() } from allows us to grab a specific function by name.

// src/Hogwarts.js
import { colors } from './houses/Gryffindor.js';
import { gryffMascot } from './houses/Gryffindor.js';

colors();
// > 'Scarlet and Gold'

gryffMascot();
// > 'The Lion'

...or rename it inside of our import statement:

// src/Hogwarts.js
import { colors } from './houses/Gryffindor.js';
import { gryffMascot as mascot } from './houses/Gryffindor.js';

colors();
// > 'Scarlet and Gold'

mascot();
// > 'The Lion'

Importing Node Modules

// src/Hogwarts.js

import React from 'react';
import Gryffindor from './houses/Gryffindor';
import Ravenclaw from './houses/Ravenclaw';
import Hufflepuff from './houses/Hufflepuff';
import Slytherin from './houses/Slytherin';

export default class Hogwarts extends React.Component {
	render() {
		return (
			<div>
				<Gryffindor />
				<Ravenclaw />
				<Hufflepuff />
				<Slytherin />
			</div>
		);
	}
}

Take a look at the first line of code in this file: import React from 'react'. Here, we are referencing the React library's default export. The React library is located inside of the node_modules directory, a specific folder in many Node projects that holds packages of third-party code.

npm

  • React Routing


Examples

Clone this wiki locally