• Learning Pro React including node.js and other stuff

    Learning Pro React including node.js and other stuff

    This post documents my experiences of getting started with React.js. Note: this is a work in progress.

    Background

    In April 2016, because I wanted to learn how to

    build complex front-end applications in a composable way with React

    I bought the book entitled Pro React, by Cássio de Souza Antonio. ISBN 978-1-4842-1261-5

    At the start of September, while a number of people were learning about the WordPress REST API from the Human Made team, I thought I’d actually try out some of the things I’d read about in the book.

    I reckoned it was going to be a bit of a challenge since I’m not very experienced at JavaScript, hadn’t heard of ES6, and didn’t fully understand the book on first reading.

    It took me half a day to get as far as page 11.

    I made quite a few mistakes; I learnt quite a bit on the way.

    Requirements

    One of my requirements is

    to create a single page view for selecting and displaying SB bigrams.

    I’ve raised this as two issues.

    bobbingwide/bigram#10 and bobbingwide/genesis-SB#2

    Basically, the web page will allow the user to make selections of words where the first word starts with an S and the second starts with a B. When the users selection changes the web page will be updated with the words that match the selection. When the user has chosen a word from each side ( one S word and one B word ) then items that match that paired selection will be displayed, if any exist.

    The website on which this React UI will be used is bigram.co.uk. It has over 1900 entries for SB bigramss. There are some duplicates: a few duplicates by mistake, others by design and some which should be duplicates but contain typos.

    First steps – Hello World

    • Get node and npm working, again.
    • Start with the react-app-boilerplate and Chapter 1 source.
    • Fail to get it working, due to a couple of silly errors. See below.
    • Try the sample-code.
    • Find it works fine.
    • Fix the version you made for yourself.
    • Celebrate. Hurrah!
    • Discover your celebration was premature.
    • Find more problems to fix.
    • Celebrate again.
    • Then try to create the production version of bundle.js.
    • Visit the bundle using a real web server.
    • Celebrate properly.

    Stage 2 – hard coded data

    In the next stage, rather than working through the Pro React example I started building my own App, with very simple hard coded data. This gave me the chance to create more problems for myself. My data structure was very simple.

    Words = [ { id:1, first: 'S', letter: 'A', word: 'Sable' } etc];
    

    Stage 3 – Switching to REST

    Rather than completing the solution with dummy hardcoded data I bit the bullet and started integrating the REST API.

    Problem resolution

    aka Things I have/had trouble with

    • Do I need all these dependencies installed locally? It appears so for most of them.
    • Should I bother about all these warnings from npm/webpack?
    • How do you stop the webpack dev server? Ctrl-C.
    • What happens if you attempt to run two webpack-dev-servers.
    • What happens if it can’t find a static file.
    • When does webpack-dev-server generate and save the bundle.js file?
    • Don’t use double slash comments in JSX code

    I’ve started writing up each problem in the react-SB Wiki

    References

    Subject Link
    Pro React book http://www.pro-react.com
    Pro React Sample code pro-react/sample-code
    React Application Boilerplate pro-react/react-app-boilerplate
    webpack module bundler https://webpack.github.io/docs/webpack-dev-server.html
    React.js https://facebook.github.io/react
    Configuring React http://survivejs.com/webpack/advanced-techniques/configuring-react
    React DevTools [https://facebook.github.io/react/blog/2015/09/02/new-react-developer-tools.html]
    https://fb.me/react-devtools
    WordPress REST API with OAuth1 https://www.npmjs.com/package/wordpress-rest-api-oauth-1

    GitHub repos

    joehoyle/wordpress-rest-api-oauth1 [github humanmade

    npm packages

    wordpress-rest-api-oauth1 – qs – oauth-



    Published:

    Last updated:

    September 25, 2016

Today’s word is this:

Friday

Food-le.com

aspic

Foodlewordle.io

ranch

Categories

Tide times from tidetimes.org.uk

Tide Times & Heights for Langstone Harbour on
24th May 2024
00:39 High Tide ( 4.72m )
05:52 Low Tide ( 1.15m )
13:04 High Tide ( 4.63m )
18:10 Low Tide ( 1.25m )

Tide times from tidetimes.org.uk

Tide Times & Heights for Northney on
24th May 2024
00:44 High Tide ( 4.4m )
05:50 Low Tide ( 0.77m )
13:11 High Tide ( 4.31m )
18:05 Low Tide ( 0.97m )