Building a site from scratch. Part 2 - First routing

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. My App.js is only importing the Layout component

App.js

render() {
    return (
      <Layout />
    );
  }

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>

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>
        )
    }
}

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.

    Alex

    Published 21 Jan 2020

    works in the little Brno making web apps and sites for work and passion. Self-taught
    Alex Buaiscia on Twitter