Skip to content
This repository has been archived by the owner on Aug 4, 2021. It is now read-only.

Latest commit

 

History

History
164 lines (104 loc) · 2.43 KB

README.md

File metadata and controls

164 lines (104 loc) · 2.43 KB
Raw

React Presentation for Phoenix JavaScript

Prerequisites

  • Know NPM and (above beginner) JavaScript
  • Know command-line
  • Know Git

Contents

Treat each of these folders as it's own web root. Each one will need an npm install. You can run a server if you wish, or each index.html can simply be opened in a browser. Remember to install webpack globally: npm install -g webpack

1. Hello World

  • Webpack (without babel (ES6) or react)
  • Source Maps

Install

cd path/to/example
npm install
webpack
open index.html

Open bundle.js file, scroll to the bottom and see the "Hello World" code wrapped in a bunch of code you didn't write (which came from Webpack)

2. First React Component

  • React
  • ES6 with Babel
  • Concept: React with JSX

Install

cd path/to/example
npm install
webpack
open index.html

What is JSX?

// JSX
<FirstComponent />

// React
React.createElement('div', null, 'Hello World');

// JS
var e = document.createElement('div');
e.innerHtml = 'Hello World'

3. Props

  • Webpack Resolve ./app
  • Webpack Watch (this is implemented via command line, see below)
  • Concept: Sub Components

Install

cd path/to/example
npm install
webpack -w
open index.html

4. React Router

  • React Router
  • Gulp
  • Webpack
  • gulp-server
  • Concept: browserHistory

Install

cd path/to/example
npm install
gulp

Visit http://localhost:8000

5. App Component

  • No new tools, install same as last example
  • Concept: Re-usable layout (App Component)

Visit http://localhost:8000

6. Data without Redux

  • JSON Server (just so we have a RESTful API for demo purposes)
  • Axios (a popular XHR tool using promises)
  • Concepts: Component Containers

Install

cd path/to/example
npm install
gulp

Visit http://localhost:3000 for database

Visit http://localhost:8000 for web app

7. Redux

  • Redux
  • Redux-Thunk
  • Concepts: Stores, Reducers, Actions, Dispatch, Subscribe

Install

cd path/to/example
npm install
gulp

Visit http://localhost:8000

8. react-redux

  • react-redux
  • Concepts: Provider, storeSelector, connect

Install

cd path/to/example
npm install
gulp

Visit http://localhost:8000

Resources