The JSX transpiler, in ReactJS, uses upper-case and lower-case convention to distinguish between HTML elements and React components; React components are upper-case and HTML elements are lower-case. But, if you look at the interactive JSX compiler, I think the breakdown can be worded a bit differently: lower-case values become inline strings and everything else becomes a variable reference.
Tag Archives: JSX
So you’ve heard all the fuss about React.js – apparently it is the best thing since
XMLHttpRequest. But you’ve spent a couple hours investigating, only to find so many buzzwords that it just feels overwhelming. JSX and flux and ES6 and webpack and react-router and all I want is somebody to just tell me how to useReact already!
Luckily for you, that’s exactly what this series will do! Don’t believe me? That’s OK – you will after you’ve built your first React app in about 2 minutes time. Without downloading anything. Just by following this exercise:
I’ve spent a few days working with JSX and React and I have mixed feelings about them. React is pretty neat, but I find that they made some very unusual choices when it comes to their API design. Then there’s JSX, definitely the weirdest aspect of React – we’ll look into it as well. I’ve really enjoyed the ES6 and Babel experience, although I’ve noticed that there’s a learning curve where you start to decide whether using an ES6 feature is better than its ES5 equivalent or not, something we’ll explore towards the end of the article.
We’ve been hard at work last week analyzing how to build a universal app using React. First we looked at the bare minimum needed to run Babel through Browserify for ES6 and JSX support, as well as how to render a basic app seamlessly in the server and the browser. On friday we added
react-router so that view routing is handled for us on both the server-side as well as the client-side – universally. Today we’ll be making some tweaks to what we have so far.
Particularly, we’ll be moving the server-side layout rendering out of
express-hbs and into another React component, the
<Layout /> component, which will only be rendered on the server. The reason for that change is one of consistency – instead of having to understand (and deal with) two different templating languages in Handlebars and JSX, we’ll only be dealing with JSX.
After making that change we’ll be looking at a couple of
react-side-effect-powered libraries. One of these will enable us to set the
document.title declaratively in our views from anywhere in our JSX templates. The other allows us to define
<meta> tags anywhere in the document as well.
Let’s get on with it!
Last time we looked at how to use properties, to affect the initial rendering of components. Today we’ll take a look at how to use state, how it differs from properties and some things you should consider when using state.
Like properties, state affects how a component behaves and renders. Unlike properties, there’s no way to define what state should be applied to components via JSX…
You can find the accompanying source-code, for this tutorial, at:https://github.com/formativ/tutorial-react-state.
Please post any errors you find, or questions you have as comments on this article or as issues on GitHub.
JSX is like a healthy vegetable that tastes like decadent chocolate cake. You feel guilty, but it’s good for you. (Tweet this).
By now you’ve probably heard about facebook’s React. You’ve probably even heard really good things. There has never been a better time to take the leap and start learning React. The difficulty starting out with React isn’t React itself. It’s important to remember React is “just the V in MVC” or “just the view layer”. Comparing React to Angular or React to Ember is unfair because React isn’t trying to be a full fledged framework. It’s just trying to be the view layer, which it’s really good at. This brings up issues for developers who are trying to learn React. React isn’t difficult to learn; putting all of the pieces together to build a full web application in React is.
As mentioned above, this blog series will have six parts.
Pt I: A Comprehensive Guide to Building Apps with React.js.
Pt II: Building React.js Apps with Gulp, and Browserify. (Coming Soon)
Pt III: Architecting React.js Apps with Flux. (Coming Soon)
Pt IV: Add Routing to your React App with React Router. (Coming Soon)
Pt V: Add Data Persistence to your React App with Firebase. (Coming Soon)
Pt VI: Combining React.js, Flux, React Router, Firebase, Gulp, and Browserify. (Coming Soon)