Vincent Orr Cmdv

## 0. intro.md

      
              5 files
            
          
              21 forks
            
          
              18 comments
            
          
              128 stars
            
          
                jquense
                / 0. intro.md
            
            
              Last active
              September 24, 2022 05:10
            
              
                Alternative ways to define react Components
              
          
    The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!
Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&amp;%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

  
## index.html
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.25/rx.all.js"></script>
    <script src="script.js"></script>

  </head>

## script.js
// Code goes here
window.onload = function() {
  var Observable = Rx.Observable;
  var textbox = document.getElementById('textbox');
  var keypresses = Observable.fromEvent(textbox, 'keypress');
  var results = document.getElementById('results');
  var searchButton = document.getElementById('searchButton');
  var searchButtonClicks = Observable.fromEvent(searchButton, 'click');

  function getWikipediaSearchResults(term) {

## workshops-planning.md

      
              1 file
            
          
              10 forks
            
          
              15 comments
            
          
              42 stars
            
          
                1Marc
                / workshops-planning.md
            
            
              Last active
              January 20, 2023 02:34
            
              
                Workshop Planning
              
          
    This gist is no longer in use.

  
## introrx.md

      
              7 files
            
          
              2516 forks
            
          
              468 comments
            
          
              21903 stars
            
          
                staltz
                / introrx.md
            
            
              Last active
              May 3, 2024 13:00
            
              
                The introduction to Reactive Programming you've been missing
              
          
    The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
	<!DOCTYPE html>
	<html>

	<head>
	<link rel="stylesheet" href="style.css">
	<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.3.25/rx.all.js"></script>
	<script src="script.js"></script>

	</head>
	// Code goes here
	window.onload = function() {
	var Observable = Rx.Observable;
	var textbox = document.getElementById('textbox');
	var keypresses = Observable.fromEvent(textbox, 'keypress');
	var results = document.getElementById('results');
	var searchButton = document.getElementById('searchButton');
	var searchButtonClicks = Observable.fromEvent(searchButton, 'click');

	function getWikipediaSearchResults(term) {