search

iansinnott / react-static-boilerplate

A boilerplate for building static sites with Webpack 2, React and React Router
107 stars 16 forks source link

Separating components #1

Closed DaveyEdwards closed 8 years ago

DaveyEdwards commented 8 years ago

Hey tried to play around with this abit and separate the about component out into its own folder at first. Imported correct path to routes, created a index.js for it, tried different ways to export. But everything I tried I was unable to get the about component to display. (The app does not break, and no errors I can see, the about page just wont display). After that I tried just keeping the About.js inside the main components folder with no luck either. Do you think it is possible without to much configuration to have separate components that work with the static setup? Nice little project btw!

iansinnott commented 8 years ago

Hm, that's odd. Not sure what's going wrong off the top of my head. Could you create a fork or reproduction repository I could check out?

Happy to help you troubleshoot. My guess is that it has something to do with the convention I use when requiring components from the client/components/ directory. Check out the index.js file and make sure that when separating out components you are explicitly exporting them in that file. You'll see that by default only the contents of App.js are exported.

I'm not sure if that's the issue but try it out and let me know.

DaveyEdwards commented 8 years ago

hey you can checkout the fork here https://github.com/DaveyEdwards/react-static-boilerplate

On a side note do you see any problems with having lots of components in a project like this? Was thinking of making a site for someone with it that wants to show their products (but not sell online). Would have contact form, list of product categories, product page, image gallery, specs component, articles component, and some other basic things. Have over 100 images in an assets folder, have the products data passed as props from assets. I was thinking then to leave all the components easy to add/remove with generic data for other people to quickly put together static websites with whatever components they need. I am on discord if you want to talk more about something like that.

iEricKoh commented 8 years ago

@iansinnott Thanks for the solutions to generate the static react project. However, I have a same question with @DaveyEdwards .

I really want to separate the components(About, NotFound...) into different folders. They are currently in the same folder.

But now I'd like to put each component into a folder, like path below. What should I do in this situation? I really like to have this feature, thank you so much.

/client
    /components
        /About
            /About.js
        /NotFound
            /NotFound.js

BTW, there is a warning message 'Warning: validateDOMNesting(...): cannot appear as a child of . See Html > head > span.' in console after starting server.

iansinnott commented 8 years ago

BTW, there is a warning message 'Warning: validateDOMNesting(...): cannot appear as a child of . See Html > head > span.' in console after starting server.

Yeah I get the same thing. For now I've just decided to ignore it since it's a warning. I looked into it briefly but the warning message seems odd. It warns of a <span> tag in the document <head>, but if you look at the code for the default template I don't define any span tags. Check out Html.js if you're interested.

Definitely something that I'd like to fix but it's low priority right now.

iansinnott commented 8 years ago

@DaveyEdwards I see. ES6 module syntax can get a bit harry. The issue was this line

// You have this...
import About from './components/About'

// ...but you want this.
import { About } from './components/About'

The reason is that when you export a variable you need to use destructuring to get at it.

iansinnott commented 8 years ago

@DaveyEdwards @iEricKoh Thanks for the feedback. This makes me realize that I should probably change the boilerplate and update the readme so as not to use this convention. I generally like export * because it let's me make my route imports flat

import {
  App,
  Home,
  NotFound,
} from './components';

Instead of 

import App from './components/App.js';
import Home from './components/Home.js';
import NotFound from './components/App.js';

But this makes it less clear what's actually getting imported, so I'll change the boilerplate to reflect this.

iansinnott commented 8 years ago

I updated the code to not use the export * from convention and moved the About component into its own file. Hopefully it's a bit more clear what exactly is getting imported now.

Let me know if it's still unclear or if there are bugs.

DaveyEdwards commented 8 years ago

@iansinnott Looking good now!

This may be a stupid question but am I able to have any state in a static site like this? When I tried it kept erroring out at componentDidMount. I can pull the data in fine with the import statement but need the params in the url to decide what product page content to pull. Here was my attempt, not sure if there is a simpler way to do this while reusing components

iansinnott commented 8 years ago

@DaveyEdwards you mean a route configuration like product/:id? This is something I have not yet addressed with the react-static-webpack-plugin. I just created an issue (react-static-webpack-plugin#2) to help track this and I've added a note to the readme.

Since that is unrelated to this original issue i'm closing this one out.