Home

Importing Files

When you use React.js, every JavaScript file in your application is invisible to every other JavaScript file by default.
One .js file cannot see another .js file.

For instance, you may have a React Application that contains...
Main.js
NavBar.js
Directions.js

If you want your main.js to use a variable that’s declared in a different file, such as NavBar.js, then you have to import the variable that you want.

To import a variable, you can use an import statement:
import { Contact } from './NavBar.js';

NOTE
The file extension defaults to .js so you you could just say
import { NavBar } from './NavBar';
and it will know you mean NavBar.js

Example Main.js file

import React from 'react';
import ReactDOM from 'react-dom';
import {NavBar} from './NavBar.js';

class Main extends React.Component {
  render() {
    return (
        <div>
            <NavBar />
            <h1>All NavBar Details are above!</h1>
            <p>...More comments and things are here</p>
        </div>
    );
  }
}

ReactDOM.render(
    <Main />, 
    document.getElementById('app')
);
The above code will give access to the NavBar.js file by the line
import {NavBar} from './NavBar.js';

In this case the file holds a CLASS OBJECT called NavBar and gets used by the line
<NavBar />


Note
Importing more from 'react' - you may see code like
import React, { useState } from 'react'
See my page titled 'React Hooks' for more as this uses it.

Top

Example NavBar.js file

import React from 'react';

export class NavBar extends React.Component {
  render() {
    const name = ['home', 'blog', 'pics', 
        'bio', 'art', 'shop', 
        'about', 'contact'];
    const navLinks = pages.map(page => {
      return (
        <a href={'/' + page}>
          {page}
        </a>
      )
    });

    return <nav>{navLinks}</nav>
  }
}
So the above code creates a class object called NavBar
The RENDER of the class will read thru the array (name) and create a Navigation Bar of the array items.

NOTE
The export in front of the class declaration will allow other files to be able to import it.
If you do not include the export command then it will only be available inside the NavBar,js file itself.

Example index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>Learn ReactJS</title>
</head>

<body>

  <main id="app"></main>

    <script 
        src="/React/react-course-bundle.min.js"
    ></script>
    <script 
        src="/ProfilePage.compiled.js"
    ></script>
</body>

</html>
...I'll add more about this file when I understand it better...'

re...
Not sure about the 2 scripts at the bottom
and also how the app knows to update index.html - it does not seem to matter if I remove the script that refers to ProfilePage.compiled.js

Top

More Information...

In Main.js there is a line (at the bottom) telling it to render the class (Main), see line...

ReactDOM.render(
   <Main />,
   document.getElementById('app')
);

This tells the app to update the element that has an id="app"
in this case, in index.html there is an element called <main>
that has the id="app" associated with it.
(although, at this moment I don't know how it knows to look at file index.html and not a different html file)....UPDATE, apparently the webpack you load on for React does all this and defaults to index.html

I guess one day I'll look into that more.

Top

Importing Classes & Functions

In React, as well as Classes we can also define components as JavaScript functions.
We call them function components to differentiate them from class components.

See below for example code... 

// A component class 
// written in the usual way:
export class MyComponentClass extends React.Component {
  render() {
    return <h1>Hello world</h1>
  }
}

// The same component class, 
//written as a stateless functional component:
export const MyComponentClass = () => {
  return <h1>Hello world</h1>
}

// The same component class, 
//written as a NAMED functional component:
export function MyComponentClass () {
  return <h1>Hello world</h1>
}

// Works the same either way:
ReactDOM.render(
    <MyComponentClass />,
	document.getElementById('app')
);

Passing 'props' to a Function

You can also access the props property but you will not need the this.props command as it will be treated as a parameter being passed to the function, eg... 

import React from 'react';
import ReactDOM from 'react-dom';

export const NewFriend = (props) => {
    return (
      <div>
        <img src={props.src} />
      </div>
    );
}

ReactDOM.render(
  <NewFriend 
    src="./Images/squid.jpg" />,
  document.getElementById('app')
);

Top

Passing 'props' to a Function (pt2)

Instead of creating the function and saving it as an object that contains an anonymous function (like the last pane) you can create it as an actual NAMED function, eg..." 

import React from 'react';
import ReactDOM from 'react-dom';

export function NewFriend (props) {
    return (
        <div>
            <img src={props.src} />
        </div>
    );
}

ReactDOM.render(
  <NewFriend 
    src="./Images/squid.jpg" />,
  document.getElementById('app')
);

Top