5. Full React Tutorial #5 - Multiple Components

TBD

01

In Tutorial #1 we installed Simple React Snippets. Create a new js script called Navbar.js and type

sfc

This will auto create an arrow function for the Navbar() component

02

Create the html for the Navbar() component 

const Navbar = () => {
return ( 
    <div className="navbar">
        <h1>The Dojo Blog</h1>
        <a href="/">Home</a>
        <a href="/create">New Blog</a>
    </div>
);
}

export default Navbar;

03

Import the Navbar() into App.js and insert the App() component return function 

import './App.css';
import Navbar from "./Navbar";

function App() {
const title = 'Welcom to the new blog'
const googleLink = 'https://google.com'
return (
<div className="App">
    <Navbar/>
    <div className="content">
        <h1>{title}</h1>
        <a href={ googleLink }>google</a>
    </div>
</div>
);
}
export default App;

04

Put the html from the App() component's return function, inside <div className="content"... into its own script called Home.js 

const Navbar = () => {
return ( 
    <div className="navbar">
        <h1>The Dojo Blog</h1>
        <a href="/">Home</a>
        <a href="/create">New Blog</a>
    </div>
);
}

export default Navbar;

05

like the Navbar() component, import it into App.js and insert the Home() component where the original content was 

import './App.css';
import Navbar from "./Navbar";
import Home from './Home';
function App() {
const title = 'Welcom to the new blog'
const googleLink = 'https://google.com'
return (
<div className="App">
    <Navbar/>
    <div className="content">
        <Home/>
    </div>
</div>
);
}
export default App;