Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »

TildeATH: Oct 21, 2010; by Lowtax

Kobayashi posted:

Not that you shouldn't play around with other frameworks, but removing jQuery as a dependency is on the Ember roadmap:

Oh, I had no idea. It seemed like in the docs that they were pretty wedded to it.

I don't know why I've been avoiding jQuery more and more, but I'm definitely doing it.

# ? Jan 22, 2015 20:59

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 07:44

xpander: Sep 2, 2004

I'm working on a project where there are 4 select inputs, each of which represent a part of an address(village, commune, district, province). My job is to link them to each other, for which I'm planning to use Knockout and possibly a jQuery plugin that is needs-suiting(budget isn't high, so I'm trying to not re-invent the wheel). The complexity arises from the amount of data involved: the first task I did was write some backend code to import census data to fill out the tables for each of those fields. Now that the dataset is Much Larger, it's taking 15 seconds to load the page(in my local dev environment). What I'm wondering is, what should I be doing to cache this data between visits? Is this what HTML5 local storage was made to do, or is there another more appropriate tool? I'm mostly a backend guy, and I don't really know the lay of the land in this regard. Any advice is appreciated.

# ? Jan 23, 2015 12:33

HaB: Jan 5, 2001; What are the odds?

xpander posted:

I'm working on a project where there are 4 select inputs, each of which represent a part of an address(village, commune, district, province). My job is to link them to each other, for which I'm planning to use Knockout and possibly a jQuery plugin that is needs-suiting(budget isn't high, so I'm trying to not re-invent the wheel). The complexity arises from the amount of data involved: the first task I did was write some backend code to import census data to fill out the tables for each of those fields. Now that the dataset is Much Larger, it's taking 15 seconds to load the page(in my local dev environment). What I'm wondering is, what should I be doing to cache this data between visits? Is this what HTML5 local storage was made to do, or is there another more appropriate tool? I'm mostly a backend guy, and I don't really know the lay of the land in this regard. Any advice is appreciated.

If I am understanding what you want, I am envisioning something similar to a site where you select say - a car: First you select a Year, which populates a Make dropdown, then a Make, which populates Model, then a Model which populates Trim Levels. So each selection must be done in order. If that IS what you're building - do you have a reason for loading all the data at once?

Seems like the user could select a Province, then some sort of ajax call to grab the districts for that province, then they select a district, etc. So each selectbox's data is filtered by the previous one.

Might require some reengineering on your backend. The upside is that it's much easier to validate. ie - a user can't select a district that's not IN a particular province, etc. and you are NEVER loading the entire dataset. Each step filters it down. So your backend calls, assuming something RESTful might look like:

pre:

GET /provinces
GET /districts/<province>
GET /commune/<district>
GET /village/<commune>

So you call GET /districts/Alberta and get a list of all the districts in that Province and so forth.

# ? Jan 23, 2015 12:54

xpander: Sep 2, 2004

HaB posted:

If I am understanding what you want, I am envisioning something similar to a site where you select say - a car: First you select a Year, which populates a Make dropdown, then a Make, which populates Model, then a Model which populates Trim Levels. So each selection must be done in order. If that IS what you're building - do you have a reason for loading all the data at once?

Seems like the user could select a Province, then some sort of ajax call to grab the districts for that province, then they select a district, etc. So each selectbox's data is filtered by the previous one.

Might require some reengineering on your backend. The upside is that it's much easier to validate. ie - a user can't select a district that's not IN a particular province, etc. and you are NEVER loading the entire dataset. Each step filters it down. So your backend calls, assuming something RESTful might look like:
pre:
GET /provinces
GET /districts/<province>
GET /commune/<district>
GET /village/<commune>
So you call GET /districts/Alberta and get a list of all the districts in that Province and so forth.

Yeah, that sounds like what I had in mind for the most part. My only concern was if for some reason the user wanted/needed to pick the village first, then that whole plan would be moot. However, I just got confirmation from the client that I can start at the top(province) and work my way down. Should be fairly straightforward! Thanks for helping crystallize the idea.

p.s. Alberta goons represent?

# ? Jan 23, 2015 14:18

HaB: Jan 5, 2001; What are the odds?

xpander posted:

Yeah, that sounds like what I had in mind for the most part. My only concern was if for some reason the user wanted/needed to pick the village first, then that whole plan would be moot. However, I just got confirmation from the client that I can start at the top(province) and work my way down. Should be fairly straightforward! Thanks for helping crystallize the idea.

p.s. Alberta goons represent?

No worries.

And ha - no - I had to google "Canadian Provinces" to make sure Alberta was a province and not a city. So obviously I'm an American. :v:

# ? Jan 23, 2015 15:34

streetlamp: May 7, 2007; Danny likes his party hat
He does not like his banana hat

TildeATH posted:

So I finally jumped into MVC and built a small app with Ember and Ember-CLI but, I don't know, it just seems too over engineered to me. I don't work on a big team, and for some reason I don't like the jQuery dependency and so I'm going to play around with React, which looks interesting. I'm a little leery of JSX, though, and prefer writing out the vanilla JavaScript. Does that make sense?

Check out Flight, I just discovered it recently and really enjoy it. This sort of event based system and where each component is its own little island makes a lot more sense to me.

https://github.com/flightjs/flight

# ? Jan 23, 2015 16:52

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

HaB posted:

No worries.

And ha - no - I had to google "Canadian Provinces" to make sure Alberta was a province and not a city. So obviously I'm an American.

Lair. A real American would have had to google to make sure Canada was a country.

# ? Jan 24, 2015 03:29

thathonkey: Jul 17, 2012

I'm done using big app development frameworks like Angular and Backbone. I've reverted back to either writing just plain JS or using a more Unix-style philosophy of chaining lots of small, single purpose libraries together (that are also robust and mature because they do only one thing and do it well) instead. Web tech is just too loving fickle at the moment to do anything else I feel...

# ? Jan 24, 2015 04:03

pigdog: Apr 23, 2004; by Smythe

aBagorn posted:

Angular ui-router question from someone who clearly has no idea what's going on.
...
I started to writeup my router like the demo and realized i have no idea how to inject the route-ception here

So what exactly was your question? :v:

# ? Jan 24, 2015 20:12

pigdog: Apr 23, 2004; by Smythe

xpander posted:

I'm working on a project where there are 4 select inputs, each of which represent a part of an address(village, commune, district, province). My job is to link them to each other, for which I'm planning to use Knockout and possibly a jQuery plugin that is needs-suiting(budget isn't high, so I'm trying to not re-invent the wheel). The complexity arises from the amount of data involved: the first task I did was write some backend code to import census data to fill out the tables for each of those fields. Now that the dataset is Much Larger, it's taking 15 seconds to load the page(in my local dev environment). What I'm wondering is, what should I be doing to cache this data between visits? Is this what HTML5 local storage was made to do, or is there another more appropriate tool? I'm mostly a backend guy, and I don't really know the lay of the land in this regard. Any advice is appreciated.

If you have that kind of flexibility for backend, then Apache Solr (and probably Elasticsearch) do that kind of drill-down filtering really well, on serverside of course but representing the data as JSON. Particularly if your client soon says "oh btw I want to full text search for the names of villages/streets/etc, also with search suggestions and all the :pcgaming:

# ? Jan 24, 2015 20:17

aBagorn: Aug 26, 2004

pigdog posted:

So what exactly was your question?

I felt like I needed some direction on how to build the routes out that nested and deep, but I've got it sorted now.

I'm sure I'll be back with many more dumb babby Angular questions.

# ? Jan 24, 2015 21:02

TildeATH: Oct 21, 2010; by Lowtax

Oh, wow, I like React--I don't even know why. I guess this is how it works? Play with MVCs until one matches your own particular flavor of js Stockholm Syndrome?

What's the best way to handle routing and slugs with this? I've been told to use Express on the Server, but that sounds like quite an investment, and I want to make sure that permalinks are being made whenever the user adjusts their various settings (I build data dashboard kinda things and I want a link that a user can share with another user that recapitulates their various settings).

# ? Jan 25, 2015 02:07

NovemberMike: Dec 28, 2008

TildeATH posted:

Oh, wow, I like React--I don't even know why. I guess this is how it works? Play with MVCs until one matches your own particular flavor of js Stockholm Syndrome?

What's the best way to handle routing and slugs with this? I've been told to use Express on the Server, but that sounds like quite an investment, and I want to make sure that permalinks are being made whenever the user adjusts their various settings (I build data dashboard kinda things and I want a link that a user can share with another user that recapitulates their various settings).

If I were making a react app that can work with permalinks I'd probably use Flux to encapsulate the state and then have a portion of the bootstrapping javascript build the flux state based off the url parameters.

# ? Jan 25, 2015 03:03

TildeATH: Oct 21, 2010; by Lowtax

NovemberMike posted:

If I were making a react app that can work with permalinks I'd probably use Flux to encapsulate the state and then have a portion of the bootstrapping javascript build the flux state based off the url parameters.

Is there a good pattern for that which you could point me to? I'd assumed I'd use Flux like that, but I wasn't sure where to translate from permalink to state would go in this setup.

# ? Jan 25, 2015 04:41

NovemberMike: Dec 28, 2008

TildeATH posted:

Is there a good pattern for that which you could point me to? I'd assumed I'd use Flux like that, but I wasn't sure where to translate from permalink to state would go in this setup.

There's a place where you first call React.render(). Just make sure it gets done before that happens. You'll have to decide on how you do routing and you'll have to figure out your Flux implementation and both of those will change things slightly. I'll be on a plane tomorrow so I'll have some time, I might try to whip up an example app while I'm bored.

# ? Jan 25, 2015 05:42

Pollyanna: Mar 5, 2005; Milk's on them.

I've actually have a bit of trouble reconciling React and Backbone/Ampersand/M-whatever. As I understand it, with React applications, you pass in data and receive rendered HTML:

JavaScript code:

var pollyanna = {
    name: "Pollyanna",
    age: 24
};

var Hello = React.createClass({
    render: function() {
        return (
            <div>
                <h1>
                    Hello, {this.person.name}!
                    You are currently {this.person.age} years old.
                </h1>
            </div>
        );
    }
});

React.render(<Hello person={pollyanna}/>, document.body);

If I were to, say, create a button that changed my name to uppercase when I clicked it, I would make a method like this:

JavaScript code:

    handleButtonClick: function() {
        var newName = "POLLYANNA";
        this.person.name = newName;
        // or, with a framework like Backbone:
        this.person.set('name', newName);
    },

However, this is apparently discouraged, since the React component has to know implementation details about the data storage/Model in order to modify it. So, React expects there to be some sort of event distribution system or somesuch in order for it to work properly. Which means you have to do something like this:

JavaScript code:

    handleButtonClick: function() {
        var newName = "POLLYANNA";
        EventDispatcher.trigger('nameChange', newName);
    }

where you now have to add at least one new method to your Model:

JavaScript code:

    registerCallback: function() {
        EventDispatcher.register(this.handleNameChange, 'nameChange');
    },
    handleNameChange: function(name) {
        this.set('name', name);
    },

The problem I see with this is that React really isn't a drop-in solution for a View layer at all. Using React means you have to restructure your application to use event dispatching, which if you're making something in Backbone or Ampersand is handled directly by the View and is therefore a core functionality of the framework. That's not easily changed. Not to mention that you still have to manually update your React component using forceUpdate() when your Model or Collection has changed - if React really is just "pass in data, get HTML out", how come it doesn't update itself when that data changes? It's bizarre.

# ? Jan 26, 2015 03:56

NovemberMike: Dec 28, 2008

TildeATH posted:

Is there a good pattern for that which you could point me to? I'd assumed I'd use Flux like that, but I wasn't sure where to translate from permalink to state would go in this setup.

I felt lazy on the plane but if you look up Fluxible there should be some examples that do similar things. It tries to be an isomorphic framework so it does a few more things but it should give you some ideas.

# ? Jan 26, 2015 04:28

geetee: Feb 2, 2004; >;[

Pollyanna posted:

The problem I see with this is that React really isn't a drop-in solution for a View layer at all. Using React means you have to restructure your application to use event dispatching, which if you're making something in Backbone or Ampersand is handled directly by the View and is therefore a core functionality of the framework. That's not easily changed. Not to mention that you still have to manually update your React component using forceUpdate() when your Model or Collection has changed - if React really is just "pass in data, get HTML out", how come it doesn't update itself when that data changes? It's bizarre.

You shouldn't have to use forceUpdate under most circumstances. The render method should only be using this.props and this.state for any data that can change. The render method will be called if new properties are passed down into the component, or if you call setState/replaceState from within the component. You would call either of those two state changing methods in response to data changing in your model (or store if we want to use flux terminology).

I had been using Facebook's implementation of Flux, but recently switched over to Reflux. Has less boilerplate and some handy shortcuts.

As a generality for anyone interested in React, I highly recommend reading all the documentation on the official site. It's rather concise and full of good examples.

# ? Jan 26, 2015 05:42

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Pollyanna posted:

I've actually have a bit of trouble reconciling React and Backbone/Ampersand/M-whatever. As I understand it, with React applications, you pass in data and receive rendered HTML:
JavaScript code:
var pollyanna = {
    name: "Pollyanna",
    age: 24
};

var Hello = React.createClass({
    render: function() {
        return (
            <div>
                <h1>
                    Hello, {this.person.name}!
                    You are currently {this.person.age} years old.
                </h1>
            </div>
        );
    }
});

React.render(<Hello person={pollyanna}/>, document.body);
If I were to, say, create a button that changed my name to uppercase when I clicked it, I would make a method like this:
JavaScript code:
    handleButtonClick: function() {
        var newName = "POLLYANNA";
        this.person.name = newName;
        // or, with a framework like Backbone:
        this.person.set('name', newName);
    },
However, this is apparently discouraged, since the React component has to know implementation details about the data storage/Model in order to modify it. So, React expects there to be some sort of event distribution system or somesuch in order for it to work properly. Which means you have to do something like this:
JavaScript code:
    handleButtonClick: function() {
        var newName = "POLLYANNA";
        EventDispatcher.trigger('nameChange', newName);
    }
where you now have to add at least one new method to your Model:
JavaScript code:
    registerCallback: function() {
        EventDispatcher.register(this.handleNameChange, 'nameChange');
    },
    handleNameChange: function(name) {
        this.set('name', name);
    },
The problem I see with this is that React really isn't a drop-in solution for a View layer at all. Using React means you have to restructure your application to use event dispatching, which if you're making something in Backbone or Ampersand is handled directly by the View and is therefore a core functionality of the framework. That's not easily changed. Not to mention that you still have to manually update your React component using forceUpdate() when your Model or Collection has changed - if React really is just "pass in data, get HTML out", how come it doesn't update itself when that data changes? It's bizarre.

You don't have a solid understanding of how React works, I suspect. Here is one way of explaining it:

A component renders itself.
If you have data you want rendered as part of it, you include it in that component's props.
Props should (in general) only come from a parent component.
If data is going to change, that change should take place in the state of the component that "owns" the data.
This means that the component who holds the data and is listening for changes to the data is not the one that renders the data.

So if my simple app has a list of things, my list is a child component of my top-level app component. List has a 'data' prop, which App sets:

code:

var App = React.createClass({
	getInitialState: function () {
		return {items: []}
	},
	render: function () {
		return ( <List data={this.state.items} />);
	}
});

var List = React.createClass({
	render: function() {
		var items = this.props.data.map(function (item) {
			return <li>An Item: {item.name}</li>
		});
		return (
			<ul>{items}</ul>
		);
	}
	// that's it! I don't know squat about the model, I just get a list passed into me
});

Then as the app runs:

App uses Ajax to fetch data from the server: it updates its own state with the new list.
App handles adding a new item. It updates its own state with the new list
App handles removing a new item. It updates it's own state with the new list.

And so on.

Every time App updates its state (specifically the items member) List will "see" the change automatically and re-render what it needs to without you doing anything.

Please note that App does not need to be the thing that actually makes the ajax call or process adding and removing. This could (and for anyting more complex probably should) be in some sort of model: either a Flux store, or a Backbone model, or whatever. Then App would be alerted that a change in the model happened and request the new list from the model, once again setting its state, which cascades down to List.

Here's A Thing� on Backbone and React: http://timecounts.github.io/backbone-react/#1

Lumpy fucked around with this message at 15:28 on Jan 26, 2015

# ? Jan 26, 2015 12:30

Huragok: Sep 14, 2011

thathonkey posted:

I'm done using big app development frameworks like Angular and Backbone ... Web tech is just too loving fickle at the moment to do anything else I feel...

Congratulations, you just won a new framework!

# ? Jan 26, 2015 23:02

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Huragok posted:

Congratulations, you just won a new framework!

Well of course I have, it's a weekday with a "d" in its name.

# ? Jan 27, 2015 09:49

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Wheany posted:

Well of course I have, it's a weekday with a "d" in its name.

The good news is we can ignore this one as its bordering on 24 hrs old, so the new hotness should be coming out in a few minutes. I'm really excited about it, and am going to badmouth that thing I was very excited about last week and switch all my projects to it. I wonder what it will be called...

# ? Jan 27, 2015 12:22

Funking Giblet: Jun 28, 2004; Jiglightful!

Lumpy posted:

The good news is we can ignore this one as its bordering on 24 hrs old, so the new hotness should be coming out in a few minutes. I'm really excited about it, and am going to badmouth that thing I was very excited about last week and switch all my projects to it. I wonder what it will be called...

I just dropped this!
https://github.com/gibletto/ItDoesFuckingNothing

# ? Jan 27, 2015 13:17

Stoph: Mar 19, 2006; Give a hug - save a life.

Funking Giblet posted:

I just dropped this!
https://github.com/gibletto/ItDoesFuckingNothing

Sorry, it looks like you're infringing on the intellectual property of Vanilla JS.

http://vanilla-js.com/

# ? Jan 27, 2015 16:36

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

I thought I'd take a bold new step and write a "unit test"

So I went and read http://www.ember-cli.com/#testing

And surprise surprise, the documentation is real bad.

I can run "ember test" which will magically run all files through jshint, which it does anyway when building. I say magically, because as far as I know, the jshint-test has no file of its own.

"Test filenames should be suffixed with -test.js in order to run."
Sure, but where should I put them?
They even give me source code for a test that I could c&p to a file and run and have fail, if I knew where to save it.

:ssh:

Under <projectdir>/tests/unit :ssh:

# ? Jan 27, 2015 17:42

TildeATH: Oct 21, 2010; by Lowtax

I need to have one of those searchable selection boxes. I always liked chosen.js:

http://harvesthq.github.io/chosen/

But I want something that doesn't rely on jQuery. Does anyone know of anything like that?

# ? Jan 27, 2015 18:10

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

Wheany posted:

I thought I'd take a bold new step and write a "unit test"

So I went and read http://www.ember-cli.com/#testing

And surprise surprise, the documentation is real bad.

I can run "ember test" which will magically run all files through jshint, which it does anyway when building. I say magically, because as far as I know, the jshint-test has no file of its own.

"Test filenames should be suffixed with -test.js in order to run."
Sure, but where should I put them?
They even give me source code for a test that I could c&p to a file and run and have fail, if I knew where to save it.

Under <projectdir>/tests/unit

Doesn't Ember CLI create unit test stubs whenever use generate? You could probably generate a few dummies to see what scaffolding it spits out and where for a more practical example. But overall I agree, the Ember CLI page and documentation sucks. For a long time, it was like "sure pod syntax works out of the box just fine," when in actuality there was an active Github issue to add support. Ugh.

# ? Jan 27, 2015 19:11

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Kobayashi posted:

Doesn't Ember CLI create unit test stubs whenever use generate? You could probably generate a few dummies to see what scaffolding it spits out and where for a more practical example.

Holy poo poo.

# ? Jan 27, 2015 19:48

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Funking Giblet posted:

I just dropped this!
https://github.com/gibletto/ItDoesFuckingNothing

I hate how opinionated Aurelia was. IDFN lets me compose my app the way *I* want to without getting in my way.

# ? Jan 27, 2015 19:50

TildeATH: Oct 21, 2010; by Lowtax

Lumpy posted:

I hate how opinionated Aurelia was. IDFN lets me compose my app the way *I* want to without getting in my way.

I liked it at first, but then I started to notice its lack of support for ES8+ and now I've moved on to IDFA, which was released so recently that you've probably never heard of it.

# ? Jan 27, 2015 21:50

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

TildeATH posted:

I need to have one of those searchable selection boxes. I always liked chosen.js:

http://harvesthq.github.io/chosen/

But I want something that doesn't rely on jQuery. Does anyone know of anything like that?

I can't help you with your no-jquery goal, but everyone I know uses Select2: https://select2.github.io/examples.html

Is there a reason you're avoiding jQuery? There's so much that's built on it, it's kind of hard to get away from.

TildeATH posted:

I liked it at first, but then I started to notice its lack of support for ES8+ and now I've moved on to IDFA, which was released so recently that you've probably never heard of it.

So bleeding-edge it's not even on github yet.

# ? Jan 28, 2015 00:01

TildeATH: Oct 21, 2010; by Lowtax

v1nce posted:

I can't help you with your no-jquery goal, but everyone I know uses Select2: https://select2.github.io/examples.html

Is there a reason you're avoiding jQuery? There's so much that's built on it, it's kind of hard to get away from.

Select2 is also good, for some reason I liked chosen better the last time I looked at the two. As far as jQuery, it just seems weird to load it for one widget when I'm not using it for anything else. I don't need to support old browsers, so I guess I never got into using jQuery all the time.

v1nce posted:

So bleeding-edge it's not even on github yet.

You're still using github?

# ? Jan 28, 2015 00:17

Vulture Culture: Jul 14, 2003; I was never enjoying it. I only eat it for the nutrients.

TildeATH posted:

You're still using github?

loving Verizon only supports IPv4.

# ? Jan 28, 2015 01:11

wwb: Aug 17, 2004

Funnily enough my verizon LTE dongle is the main tool I use when stuck on v4 and needing to test v6 networking.

# ? Jan 28, 2015 02:51

aBagorn: Aug 26, 2004

Ok so I have another (admittedly dumb) angular ui-router issue that is perplexing me.

I have the following in my router:

JavaScript code:

    $stateProvider
        .state('buildings', {
            templateUrl: '/App/Building/_buildingGrid.html',
            url: '/buildings'
        })
        .state('buildings.edit', {
            templateUrl: '/App/Building/_buildingAddEdit.html',
            url: '/:Id/edit'
        })

and I have a button on the building grid with this:

code:

<span class="btn" ui-sref="buildings.edit({Id:dataItem.Id})">Edit</span>

which is hitting the router correctly (I can see the URL change) but the Edit template is not loading (it still shows the grid), and I'm not sure why.

e: \/ thank you! I knew I was doing something dumb. Working perfectly now. Angular is the bees knees

aBagorn fucked around with this message at 18:07 on Jan 28, 2015

# ? Jan 28, 2015 16:40

sim: Sep 24, 2003

Do you have a <ui-view> in _buildingGrid.html? "Child states will load their templates into their parent's ui-view."

# ? Jan 28, 2015 17:20

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

I'm trying to setup a new project in Visual Studio that is going to be MVC 5 with a single page app written in ReactJS. So I follow this guide on the ReactJS website: http://reactjs.net/getting-started/tutorial.html

I've gotten to the very first part where you run the project, and I'm getting a syntax error on account of the JSX syntax being included in the Tutorial.jsx file which looks like this:

code:

var CommentBox = React.createClass({
	render: function() {
		return (
			<div className="comment-box">
				Hello, world! I am a CommentBox.
			</div>
		);
	}
});

React.render(
	<CommentBox />,
	document.getElementById('content')
);

I don't understand - what have I done wrong? I've followed the tutorial to the letter. I'm assuming something needs to be included to transform the JSX into vanilla JS, but the tutorial doesn't seem to mention this.

Update: I was able to remove the error message by including type="text/jsx" in the script tag for Tutorial.jsx so it looks like this now:

code:

<script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>

But the code itself still fails to work - no actual errors, just nothing is rendered. This is my complete HTML:

code:

<!doctype html>
<html>
  <head>
    <title>Hello React</title>
    <style type="text/css"></style>
  </head>
  <body>
    <div id="content"></div>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script type="text/jsx" src="/Scripts/Tutorial.jsx"></script>
  </body>
</html>

I suspect including "text/jsx" in the type just means the browser isn't running the script at all now?

putin is a cunt fucked around with this message at 02:55 on Jan 29, 2015

# ? Jan 29, 2015 02:24

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

The author of that guide links to Facebook's original guide, which includes this line that your guide seems to be missing:

code:

<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.12.2.js"></script>
--> <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>

Browsers don't know what a "JSX" is, so you need to load some code to translate JSX to plain JS.

# ? Jan 29, 2015 03:06

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

bartkusa posted:

Browsers don't know what a "JSX" is, so you need to load some code to translate JSX to plain JS.

Yep, that's what I figured was happening but wasn't sure how to fix it (very new to React). Thanks so much!

On a related note, are there any Visual Studio users here who develop with React? A cursory Google doesn't locate any JSX syntax highlighting solution for Visual Studio, how do you guys handle this? Do you use a separate tool (not ideal, but I can handle it if need be)?

Also, how do you guys handle rendering your JSX files to JS with Visual Studio? Or, again, do you do this with an external tool?

putin is a cunt fucked around with this message at 05:09 on Jan 29, 2015

# ? Jan 29, 2015 05:04

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 07:44

Hanpan: Dec 5, 2004

Stupid React question (time for a separate thread?)

Is there a way to dynamically obtain a reference to a react class from a string? For example, if I had a SomeReactPanel, can I somehow get a reference from the string "SomeReactPanel" using the factory or whatever else?

# ? Jan 29, 2015 10:24

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »