loading...

Building a site from scratch. Part 2 - First routing

buaiscia profile image Alex Updated on ・3 min read

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

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.

    Original post here on my blog.

    Alex

    Posted on by:

    buaiscia profile

    Alex

    @buaiscia

    I'm an experienced application engineer working with APIs, DBs, webservers, creating automation full-stack web apps using nodeJS / React to operate safe and easy deployments or monitoring.

    Discussion

    pic
    Editor guide