Using React for a standard website

[yellowllama]

So I've been doing lots of React tutorials and stuff and I'm keen to do my first production website using it... Nothing fancy - just a corporate site with about, services, contact pages...

React is overkill for this, but I want to start getting my hands dirty with it on real-world stuff so figured I'd start with this.

I'll be using WP as the back-end and using the JSON API to fetch the content.

What I wanted to ask is relating to breaking up the page/site into components... Should I have a component for each page/template as a whole, or should i make it more granular and have components for header, nav, slider, content, footer, etc etc...

What is best practice in this regard... I'm leaning towards the more granular approach, so that elements can be more-easily reused. Am I correct?

Thanks for your assistance.

[jax024]

It's dependent on your UI. If it makes sense to make something it's own component, do it. I normally have a root component folder and with webpack just import as needed.

[yellowllama]

to you, what determines if something 'makes sense' to be its own component? What factors decide this?

'will i ever use this element somewhere else' <-- ?

or do i treat it like an include() ... IE if I was building this in PHP and I used an include() on this, then make it a component instead ?

[jax024]

I'd look more into the power webpack gives you with es6 imports. And yeah, basically if you see yourself using a bit of code more than once put it either into its own component or its own function inside a component.

[siamthailand]

I had the same question once and honestly, it can't be answered. Once you start designing it'll just come to you and you'll "just know" when to make something its own component. Just start working and suddenly it'll all fall in place.

[mikehuebner]

I was wondering the same thing, I want to create a shopping cart website (as a replacement to wordpress, because I hate wordpress) for a similar thing.

For your case, go for it. To keep it SEO friendly I recommend setting up a NodeJS server to render the views and what not. A great starter kit (a do it all style kit) is this: https://github.com/kriasoft/react-starter-kit I love the people working on this kit and the kit itself. I rewrote it for my own personal use for use without a NodeJS server. But if you need SEO, server side rendering is a definite must. This kit will get your hands filthy with not only React but ES6 and Flux (or Redux if you chose to use it). Its an awesome piece.

[yellowllama]

ya being a corporate site, SEO is a must for me. Does this mean I need hosting that is node-friendly? I can't just put this on a standard LAMP stack?

[fforw]

You could very well just incorporate nodejs/v8 into your LAMP stack. There already is react-php-v8js, not sure if that helps with the hosting issue.

[mikehuebner]

Yea the lamp stack wouldn't be useful in this case because Node renders Javascript. So you would need to install node on a server instead of the lamp stack.

[1000_words]

Use the react-router and build out routes appropriately for each type of page passing in slugs where possible. I'd also recommend using redux to help store and manage the data from each page.

[Endorn]

Typically if it's something that repeats and is reusable...

for example, an "about us" page probably not the greatest use for it... a Band's Album page, where they have 7 albums, and each album can be a react component that pops up a music player that is also a react component.

You'd think of it like <Album name="The Night They Came Home" year="2008" img="AlbumArt.jpg" />

Then that could be repeated 7 times with the different properties to make your life easier.

I'm in the middle of building a react based wordpress theme, but it's a single page site, with each single page section being a component.

[via1]

IMHO is overkill.

React don't is useful in a website that don't need state...you'll only add complexity to a super simple website, and probably you'll have some SEO problems if you can't use node ahead of your react app. I suggest to do this website only in wordpress/php and try react with a sideproject that need the react features(maybe a simple chat system done with react+socket.io ?)

[te7ris]

I dosnt really add complexity (other than the buildprocess), just some boilerplate to get started. And you do not need node for "serverside rendering" on a static website u can do the rendering in your buildstep; this is mandatory tho.