• Stars
    star
    120
  • Rank 295,983 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated about 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Using ES6 with React

Using ES6 with React


Summary

The point of this presentation is to:

  • Teach you React. It assumes no prior knowledge.
  • Teach you JSX. It makes writing React so much more pleasant.
  • Teach you (some) ES6. This presentation only assumes ES5 familiarity.
  • Teach you React with ES6. It shows you the newer paradigm of coding React using ES6 classes.
  • Teach you server-side rendering on React using Koa.
  • Not teach you Flux. We won't be going over it during this workshop.

Presented at:

"Conference WiFi Mode"

WiFi at conferences is notoriously 💩ty. This presentation is made with that in mind. In order to switch to offline mode (which doesn't rely on the omdb API but instead serves dummy data) change all references of var omdb = require('omdb-client'); to var omdb = require('./fake-omdb-client');. You may also have to mess with the paths to images a bit. I intend to fix that.

OMDb

The example app makes use of the OMDb API. I'd encourage you to donate to this cool project. I did to hopefully offset some of the costs that this will cost him. 😄

How it works

The completed project lives in the completed/ directory. I've left for you a skeleton of the project to code up in the empty/ directory. You can recreate the presentation without me there using speakersNotes.md.

Also, something tricky is that for the first bit, you'll need to symlink in font-awesome. ln -s node_modules/font-awesome/ empty/fa should work (after you've ran npm install.)

How to Run

  1. cd into completed or empty directory
  2. iojs app.js
  3. Navigate to localhost:3000 in web browser

Contributing

Please feel free to correct spelling errors, leave issues of how certain things are unclear (whether that's listening to me actually present this or just from reading,) or make PRs if you find a better way to teach or say something.

License

The project includes some images and info from Netflix shows and others that I pulled from the web that retain their original licenses. It also depends on varying projects that also retain their own licenses. For whatever code I have written, or whatever code that others commit and are merged into the project, are released under the MIT license.

Project Author

❤️ Brian Holt

More Repositories

1

complete-intro-to-react-v5

The Complete Intro to React, the fifth version
JavaScript
3,636
star
2

complete-intro-to-react-v8

The Complete Intro to React, as taught by Brian Holt on Frontend Masters
JavaScript
1,818
star
3

intro-to-web-dev-v2

Intro to Web Dev, v2
JavaScript
1,572
star
4

complete-intro-to-react-v6

learn React.js with Brian Holt
JavaScript
1,469
star
5

complete-intro-to-web-dev-v3

The Complete Intro to Web Dev v3, as taught on Frontend Masters
JavaScript
1,419
star
6

complete-intro-to-react-v4

The Complete Intro to React, as given for Frontend Masters
JavaScript
1,139
star
7

complete-intro-to-react

A Complete Intro to React, as Given for Frontend Masters
JavaScript
1,059
star
8

citr-v8-project

Steps for the project for the Complete Intro to React v8 and Intermediate React v5
JavaScript
1,015
star
9

complete-intro-to-containers

The Complete Intro to Containers! As taught on Frontend Masters.
JavaScript
940
star
10

four-semesters-of-cs

HTML
668
star
11

complete-intro-to-react-v7

The Complete Intro to React v7 and Intermediate React v4 as taught on Frontend Masters
JavaScript
666
star
12

citr-v6-project

Project files for the Complete Intro to React v6, as taught for Frontend Masters
JavaScript
482
star
13

citr-v7-project

Projects for Complete Intro to React v7 and Intermediate v4
JavaScript
375
star
14

complete-intro-to-linux-and-the-cli

🐧 The Complete Intro to Linux and the Command Line, as taught for Frontend Masters
JavaScript
371
star
15

projects-for-complete-intro-to-containers

The projects for the Frontend Masters course, the Complete Intro to Containers
TypeScript
352
star
16

postcss-colorblind

A PostCSS plugin for seeing your site as a colorblind person may.
JavaScript
338
star
17

complete-intro-to-sql

The Complete Intro to Postgres, as taught by Brian Holt for Frontend Masters
JavaScript
333
star
18

complete-intro-to-computer-science

Complete Intro to Computer Science, as taught by Brian Holt for Frontend Masters
JavaScript
329
star
19

project-fox-game-site

A brief course where we use JavaScript, HTML, and CSS to make a digital pet staring our little fox friend.
JavaScript
296
star
20

sfo

DEPRECATED: Instant build process
JavaScript
228
star
21

algorithms-exercises

Created with CodeSandbox
JavaScript
201
star
22

complete-intro-to-databases

Complete Intro to Databases, as taught for Frontend Masters! 🌲
JavaScript
161
star
23

gatsby-course-starter

a gatsby starter project to help you create educational materials
JavaScript
144
star
24

jsmvc-pres

Choosing your MVC amongst React, Angular, Ember, Vue, and Backbone
JavaScript
140
star
25

loldash

😠 serious javascripts
TypeScript
134
star
26

complete-intro-to-product-management

Complete Intro to Product Management, as taught for Frontend Masters
JavaScript
132
star
27

project-files-for-fox-game

The various steps for the fox project. Feel free to fork or clone this repo.
CSS
122
star
28

realtime-exercises

Exercises for the Complete Intro to Realtime as taught for Frontend Masters
JavaScript
112
star
29

react-redux-workshop

🇮🇸🇵🇱🇺🇸🇨🇭🇮🇱⚛ A workshop to teach you React and Redux in one day!
JavaScript
105
star
30

four-semesters-of-cs-part-two

4 Semesters of Computer in 5 Hours, Part 2!
JavaScript
89
star
31

complete-intro-to-realtime

Come learn how to do realtime events in JavaScript with Brian Holt!
JavaScript
83
star
32

next-course-starter

Starter kit for making courses for Frontend Masters
JavaScript
75
star
33

complete-intro-to-containers-v2

The Complete Intro to Containers version 2 as taught on Frontend Masters
JavaScript
69
star
34

elk-cli

🌲🌲 Run your URL shortener (à la bit.ly) from the CLI using now
JavaScript
62
star
35

graphql-on-azure-functions

Using GraphQL and Azure Functions together to make a pretty sweet recipe API
JavaScript
46
star
36

project-files-for-complete-intro-to-containers-v2

Project files for the Complete Intro to Containers v2 as taught for Frontend Masters
Ruby
44
star
37

db-samples

samples for the Compete Intro to Databases
JavaScript
38
star
38

photo-gallery

Exercise
JavaScript
37
star
39

sql-apps

Apps for the Complete Intro to SQL
JavaScript
35
star
40

complete-intro-to-sqlite

The Complete Intro to SQLite as taught on Frontend Masters
JavaScript
35
star
41

react-hooks-examples

Created with CodeSandbox
JavaScript
33
star
42

intro-to-webdev-app

The app to accompany https://frontendmasters.com/workshops/introduction-web-development/
JavaScript
28
star
43

react-hooks-examples-v3

Hooks examples for Intermediate React v3
JavaScript
26
star
44

future-of-react

Showing off new features of React!
JavaScript
26
star
45

complete-intro-to-web-development-v3

The Complete Intro to Web Development v3, as taught by Brian Holt for Frontend Masters
JavaScript
22
star
46

postcss-flex

PostCSS plugin so you can freely write display: flex code and have it work on IE8
JavaScript
22
star
47

complete-intro-to-react-v1

The first version of the complete intro React, complete with Redux react-router v1, Mocha, and Webpack v1
SCSS
21
star
48

pluralsight

Example app for Falcor, Webpack, Babel, and React. Done for a Pluralsight Play-by-Play
JavaScript
20
star
49

pull-requests

A sample repo for the Intro to Web Dev course for Frontend Masters
JavaScript
19
star
50

complete-intro-to-react-v9

The Complete Intro to React v9 as taught for Frontend Masters by Brian Holt
JavaScript
19
star
51

react-hooks-examples-v5

Created with StackBlitz ⚡️
JavaScript
19
star
52

react-hooks-examples-v4

React hooks exercieses for Intermediate React v4 on Frontend Masters
JavaScript
17
star
53

remix-course-starter

For Frontend Masters instruction
JavaScript
15
star
54

generator-examples

Examples for Unlimited Power talk given at JSConf China 2015
JavaScript
14
star
55

postcss-colors.css

A PostCSS Plugin for mrmrs's Colors.css
JavaScript
13
star
56

citrv6-community

Community Projects for the Complete Intro to React v6
12
star
57

hugo-example

Hugo hello world project for the Complete Intro to Containers
CSS
11
star
58

sqlite-app

The student project app for Brian Holt's Complete Intro to SQLite
JavaScript
10
star
59

azez

deploy to Azure in a snap
TypeScript
9
star
60

next-react-v6

Porting my React course to a new infrastructure
JavaScript
8
star
61

generator-mdpress

A Yeoman generator for creating an mdpress presentation
JavaScript
8
star
62

generator-cordova

A Yeoman generator for Cordova (the upstream of Phonegap.)
JavaScript
7
star
63

uxlab-webapps

UX Lab Repo
JavaScript
7
star
64

ux-lab-time-react

UX Lab for fetching server time
HTML
7
star
65

react-hooks-examples-v5-2

Created with StackBlitz ⚡️
JavaScript
7
star
66

citr-v9-project

The student project app for Brian Holt's Complete Intro to React v9
JavaScript
7
star
67

complete-intro-to-sql-container

Dockerfile
6
star
68

deno-dev-container-example

Example of how to use Deno with a VS Code dev container
TypeScript
6
star
69

grunt-flake8

Lint your Python projects with flake8 using grunt.
JavaScript
6
star
70

ux-lab-time-vanilla

HTML
6
star
71

hhtess

To calculate Epistaxis Severity Score (ESS) for Hereditary Hemorrhagic Telangiectasia
JavaScript
6
star
72

azure-pipelines-gatsby-example

An example of how to build and deploy Gatsby static sites with Azure Pipelines
CSS
6
star
73

reddadore

Example of ES6 style React using the reddit API
JavaScript
5
star
74

fem-example

this is an example for the intro to web dev v2
JavaScript
5
star
75

complete-intro-react-v3.1

HTML
5
star
76

petfinder-client

Petfinder client that uses jsonp
JavaScript
4
star
77

my-first-repo

4
star
78

grunt-pres-php

Example app for grunt-pres for SkiPHP 2014
PHP
4
star
79

node-react-mongo

JavaScript
4
star
80

sample-static-apps

Most basic SPAs with routing
TypeScript
4
star
81

v3

JavaScript
3
star
82

cat-or-penguin

Simple Node.js app
CSS
3
star
83

googlePop

A simple pop up window with a Google Map and a banner. Written in PHP and JavaScript using Google Maps V3 API.
PHP
3
star
84

alfred-workflows

Workflows for Alfred by Brian Holt
3
star
85

react-reddit

A webpacked bundle of reddit React components
JavaScript
3
star
86

node-example-app

The hello world of Node.js apps
JavaScript
3
star
87

sqlite-app-litefs

The student project app for Brian Holt's Complete Intro to SQLite using LiteFS
JavaScript
3
star
88

hapi-example

example repo for cloud deployment demos
JavaScript
3
star
89

oscuro

Read from a list of files and return only the first one
JavaScript
3
star
90

complete-intro-to-react-v2

V2 of the Complete Intro to React Workshop
JavaScript
3
star
91

hi

Python
2
star
92

lap

Simple module to track how long it takes between marks
JavaScript
2
star
93

actions-example

CSS
2
star
94

swa-app

sample Azure Static Web App
JavaScript
2
star
95

test-app

Python
2
star
96

movies-dataset

Python
2
star
97

sqlite-app-libsql

JavaScript
2
star
98

azw

Proof-of-concept
JavaScript
1
star
99

intro-html

A robot powered training repository 🤖
1
star
100

rram.sexy

Ricky needs to live in SLC
JavaScript
1
star