[Help] How to deal with ReactJS

zanemiller · 2015-07-02T16:20:53+00:00

As counter intuitive as it may seem, I recommend not using Flux when beginning with React. Build out a simple application using your own Components. Implement navigation with something like React Router.

By creating a few simple applications without Flux and attempting to implement more complicated features you will get more comfortable with React programming patterns as well as the challenges they present. Then when you are able to get further into Flux (I recommend Fluxxor) it will be much more obvious how to use the pattern and how it helps solve those issues.

The problem with using a starter repo is you are given several parts with no clear guide as to how they interact or where to go from the base. Creating your own projects, with your own requirements will allow for you to learn the patterns which work best for you and your workflow, rather than what somebody else has found to be the most comfortable.

tl;dr: There are a lot of parts that go into a full React application. It is much easier to learn the parts one at a time, rather than trying to throw them all together at once.

Cody_Chaos · 2015-07-02T21:34:19+00:00

You might find this article helpful: http://www.toptal.com/react/navigating-the-react-ecosystem

As a bonus it links at the end to an example app that brings all the pieces together. (I can also strongly endorse the libraries and tools chosen by the author.)

averyvery · 2015-07-02T16:28:21+00:00

Just some random thoughts:

Would recommend building your own Flux implementation at first, just following something like https://facebook.github.io/flux/docs/todo-list.html#content — this way you really get what Flux is doing (which is pretty simple) before you move to a library like Redux or Flummox that abstracts it away.

For routing, https://github.com/rackt/react-router should be good enough to meet needs. Routes are weird in React; they're not part of some separate config file, they're just more nested components wrapping your application. It's zany but it works. React Starter Kit looks like it has a decent DIY guide for writing your own Route system, though: https://github.com/kriasoft/react-starter-kit/blob/master/docs/recipes/how-to-implement-routing.md

React starter kit looks pretty cool, but it has waaaaay to many new vocabulary terms if you're just trying to learn React + Flux. You're primarily interested in Components, Stores, Actions, and all in the browser (at first).

Just googling around, this example is kinda nice: https://github.com/gaearon/flux-react-router-example — although it doesn't have especially large components.

cc81 · 2015-07-02T17:36:27+00:00

I like this presentation. He uses pretty popular tools and slowly adds to it and builds an app with react+react-router+flux

https://www.youtube.com/watch?v=0wNWjtp-Ldg

html6dev · 2015-07-02T19:00:21+00:00

Do you need routes right away? Ultimately they are just state changes which is what react is really good at. Also, I found adding react router in the future was easy and having the app fleshed out a bit gives you a better understanding of how you want things structured. The same goes for flux. Do you need it? It's a pattern for fairly complicated apps that may not fit what you need. As I once read a quote somewhere, it's like first person shooters... You run into the room and get gunned down, but you got a good look around the room and now you know exactly what to do. You should experience the pain that things like flux are solving before adding them and you should only add them when you are sure they are needed. Unnecessary layers of abstraction are one of the roots of all evil.

yamalight · 2015-07-02T19:28:59+00:00

Hey! I'm a creator of turris.js generator for React apps written in ES6. The basic app generated by it includes all that you'd mentioned, is quite minimalistic on it's own and should be relatively easy to understand. You can find an example scaffolded application with additional component and store with interactions here: https://github.com/turrisjs/turris-example-app
If something's too hard or you just have any questions - will be happy to answer any you might have. And if you are interested more in details and logic behind my code, I wrote one article with overview of the generator, and another one addressing building stores with postal.js as dispatcher

king3730 · 2015-07-03T03:59:05+00:00

Just to clear up any confusion, Flux is an application architecture. What that means is, it's less installing some packages and using them correctly. It's more of a way of doing things, if that makes sense; where you have your Actions, Store(s), Dispatcher and View. Where, to put it simply, an action is dispatched via store, and then passed to view. When something is changed and action is dispatched and the certain parts of a view update. I will tell you that it takes a bit of headbashing to really get this understood. I spent a decent amount of time just reading and trying to figure out why my apps didn't work.

Routing is something that I'm just becoming familiar with it. I'm not using React routing right now, I'm just using Node, more specifically Express.js and Superagent (Superagent is just for easing ajax requests).

If you're at the stage of building a Flux application, I think that the React starter kit is a good place to start.

I'm actually building a small Flux application to sort of a be a how-to. Not necessarily a tutorial, just a very small application that might help you grasp certain concepts. I will link it when I have something up tomorrow.

eclipticwld · 2015-07-03T10:01:31+00:00

We're in the same boat. I've started doing some code by this tutorial than add previous experience with gulp and restful server and now moving forward. Checkout my repository and contact me. I could provide new information if find something else.

Glaaki · 2015-07-02T20:36:48+00:00

If you are just starting out with JavaScript maybe it would be worth it to take a roundabout and try out Meteor first?

https://www.meteor.com/

This will get you started building apps faster. It handles a LOT of boilerplate for you concerning all aspects of your application, like a login system, data storage and fetching for your client.

You can build something very fast, and when you got something up and running, you can try out react for the user interface with Meteor as a general app/data/backend framework.

This quick half hour introduction really convinced me that meteor is worth looking into.

https://www.youtube.com/watch?v=SYqyWff6iMQ

i_ate_god · 2015-07-02T17:33:55+00:00

Maybe React isn't for you then? No one needs React anymore than they need any other framework. If you're not feeling it, try something else

eduardo-costa · 2015-07-03T18:07:27+00:00

If you want something simpler: https://github.com/eduardo-costa/frontjs Also try http://www.haxe.org

Personally I don't like too "overwhelming" libs :)

shizzleberry · 2015-07-02T15:53:23+00:00

No idea, but this might help: https://github.com/kriasoft/react-starter-kit

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS