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: ReactJS
I’ve recently been a pretty big fan of React JS and have been building most of my newer projects using it in combination with LESS and Webpack (both of which are awesome, although I hear the former is a little out of fashion in lieu of SCSS these days). Today, I’m going to be writing about how to create a date picker using React. I’ve made the source available and even published a bower package (a-react-datepicker) in the event you want to use it in your fancy new React project. I wouldn’t call it anywhere near production ready, though, so be warned! For those of you who just want to see the date picker in action, I’ve put together a simplistic demo page that shows what you’re getting into. Anyway, on with the show!
While playing around with RxJS, I thought it would be interesting to create a Snake and Ladders game that I played during my childhood days. A typical game is played by 3-4 players with a board size of 100 cells and a dice. The board has snakes and ladders on it. Rules are very simple; when a player ends up in a position where the ladder starts, it gets a lift to a position where the ladder ends and if a player ends up in a position where a snake’s mouth starts, it gets gulped down by the snake and reach the tail as a new position. Otherwise, the player moves to a new position from the old by the throw of a dice. Players take turn at throwing the dice.
In the reactive version using RxJS, lets start with a generator that would push a player (represented as a value starting from 0 for first player, 1 for second player and so on…) every few milliseconds, in my case 100ms. In the increment function, lets bump up the value by 1 and finally in the ‘Return Value’ function where the generated numbers are cast out by the number of players using mod operator. So if there are 3 players, the first player would start at 0 and the third would have number of 2. I’m using Node.js to run this and have imported the RxJS module. Here is what I ended up creating for starters.
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:
Reactive programming is powerful and is becoming increasingly popular with libraries such as RxJS. We can make a stream out of just about anything, including API communication and authentication. Check out the repo for this tutorial to see the code.
Recently we’ve been building part of our internal product using the excellent ReactJS. Along with React, we use flux pattern (Reflux and then changed to Redux) to deal with data flow layer. We are by no means experts in React & Flux but we would like to share some of our experience here.
There will be several blog posts talking about some brief intro, practices, pattern and gotchas about React, Flux and Redux. To start with, this posts will talk a bit about React.
I have been using Facebook’s React since v0.9.x in Feb 2014. I am a defector from Backbone.js which initially started after replacing our view layer with React. After understanding the benefits of Flux and it’s unidirectional flow architecture it became pretty evident that I did not need Backbone.js models and collections anymore. I will assume you have some basic knowledge of Flux, Redux, React, and functional programming. I will cover as much as I can in this article.