DEV Community

Alex
Alex

Posted on β€’ Edited on β€’ Originally published at buaiscia.github.io

1 1

Building a site from scratch. Part 2 - First routing

Structuring

Having chosen the main categories, I needed to start building the website structure.
The tree is like the following

  • πŸ“‚ src
    • πŸ“„ App.css
    • πŸ“„ App.js
    • πŸ“‚ Components
      • πŸ“‚ About
      • πŸ“‚ Candles
      • πŸ“‚ Ceramics
      • πŸ“‚ Contact
      • πŸ“‚ Gingerbread
      • πŸ“„ Landing.jsx
      • πŸ“‚ Misc
      • πŸ“‚ Woodcarving
    • πŸ“‚ Containers
    • πŸ“‚ HOC
      • πŸ“‚ Layout
    • πŸ“„ index.css
    • πŸ“„ index.js

By the way, I used md-file-tree by @michalbe to generate the tree in my terminal of VSCode.

Routing

My App.js is only importing the Layout component

App.js

render() {
    return (
      <Layout />
    );
  }
Enter fullscreen mode Exit fullscreen mode

The Layout is a HOC (High Order Component) which eventually will include the landing page and the routing to the other pages/components + the navigation (which will be hidden in the landing page):

Layout.jsx

<BrowserRouter>
    <React.Fragment>
        <Switch>
            <Route path='/' exact component={Landing} />
            <Route path='/about' component={About} />
            <Route path='/contact' component={Contact} />
        </Switch>
    </React.Fragment>
</BrowserRouter>
Enter fullscreen mode Exit fullscreen mode

BrowserRouter is the react-router-dom HOC component which is necessary to create the routing. React.Fragment is the Aux component to wrap the children (instead of using the previously-needed divs).
Switch is making sure that once you load a component, it will not check the other routes but will stop at the first found.
Route has the various path to the components/pages (I haven't created all of them)

Then, for now, I just tested if the links on the landing page were working:

Landing.jsx

class Landing extends Component {
    render() {
        { console.log(this.props) }

        return (
            <React.Fragment>
                <h1>Landing page</h1>
                <Link to='/about'>About</Link>
                <Link to='/contact'>Contact</Link>
            </React.Fragment>
        )
    }
}
Enter fullscreen mode Exit fullscreen mode

The Routing props were passed from the Layout to its children, in this case the Landing component. In fact, as I added console log to props, you can see all history, location and match props, that can be used afterwards to run customized functions on them.
Eventually, I will add Suspense for Lazy loading, but now it's useless as the components will just need more time to be loaded.

I think I'll create another component as Container, which will function as Main page out of the landing page and will render the children components. In this way I can separate the root path from the others in a clean way.

Bonus(es)

1 - I started the project with create-react-app...but it was installing only the node modules and package.json, and nothing else. What was wrong?
Well, I found out that I was breaking some flow in having create-react-app installed globally. So I had to:

  • npm uninstall -g create-react-app

  • npm cache clean --force
  • After that I was able to

    npx create-react-app my-app

    without issues

    2 - What's the difference between doing

    npx create-react-app my-app

    and

    npm install create-react-app -g

    ?
    npx is the execution command for npm. So npx is saying, use the create-react-app (CRA) tool to my new app. The global install is not used anymore since npm version > 5. This was used to run the command directly from the terminal, like: create-react-app my-app.
    Also, you probably can check out the CRA templates by Derek Shanks for having added automatically react-router-dom and sass.

    3 - I was wondering, should I create my React files with JS or JSX extension? Here's the discussion about the topic... given that, I decided to opt for .jsx (at least I'll have a nice icon on VSCode ;)

    That's all for today!
    Thanks for reading and if you like it, please share it.

    Original post here on my blog.

    Alex

    Top comments (0)

    Billboard image

    The Next Generation Developer Platform

    Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

    Learn more

    πŸ‘‹ Kindness is contagious

    Please leave a ❀️ or a friendly comment on this post if you found it helpful!

    Okay