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

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