Tag Archives: JSX

Using Dynamic Element Names With The JSX Transpiler In ReactJS

via Using Dynamic Element Names With The JSX Transpiler In ReactJS.

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.

Learn Raw React — no JSX, no Flux, no ES6, no Webpack…

via Learn React By Itself — no JSX, no Flux, no ES6, no Webpack..

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:

React, JSX and ES6: The Weird Parts

via React, JSX and ES6: The Weird Parts.

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.

Server-side React Layout & Side Effects

via Server-side React Layout & Side Effects.

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!

React State

via React State — React Tutorials — Medium.

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.

Thanks to Pete Hunt, Ben Alpert and Christopher Chedeau for helping to improve this!

JSX Looks Like An Abomination

via JSX Looks Like An Abomination — JavaScript Scene — Medium.

JSX is like a healthy vegetable that tastes like decadent chocolate cake. You feel guilty, but it’s good for you. (Tweet this).

ReactJS Tutorial Part 1: A Comprehensive Guide to Building Apps with React.js

via Tyler McGinnis » React.js Tutorial Pt 1: A Comprehensive Guide to Building Apps with React.js.

Pt II: Building React.js Apps with Gulp, and Browserify.

Pt III: Architecting React.js Apps with Flux.

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 you’ve started to learn React you’ve probably ran into this problem. You read facebook’s documentation, read a few tutorials, maybe even watched some Egghead videos. You started feeling pretty comfortable with React. Then you realized “I feel comfortable with React, but I still don’t think I can actually build anything meaningful with it”. I think that’s a thought that everyone learning React has. This goes back to the point of React. If you just learned the “V” in MVC, you would still feel pretty worthless. This React.js tutorial series is going to focus on addressing that concern. We’re going to first start off learning about the fundamentals of React. You’ll get comfortable with React itself from props to state to JSX and everything in between. After learning about the fundamentals of React we’re going to jump into all of the other components (pun slightly intended) that are needed to build a full web application using React.js. We’ll cover how to use Gulp to set up a nice build process for converting React’s HTML like syntax called JSX to JavaScript. We’ll talk about using Browserify to tie all of our components together. We’ll then dive into the Flux architecture and see how Flux can help us structure and architect our React application in an efficient manner. Next we’ll talk about persisting our data with Firebase and using React Router for, you guessed it, introducing routing into our app. After that, we’ll put it all together and build a “Github Note Taker” app, an app that allows you to save notes and see a snapshot of a developers Github account (potentially useful for tech interviews where you want to take notes on a particular candidate). I realize this is a lot, but when I first started learning React I was frustrated with the lack of tutorials focused on putting all the pieces of React together. This tutorial series hopes to fill that gap.

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)