ReactJS: My Getting Started Notes


Main Tools

  • NPM and Yarn
  • Webpack
  • Babel
  • JSX + ES6
  • Flux
  • Guts and Persistence (to avoid giving up or being scared)

 

  1. React JSX at Glance

    REACT-IMG1

    JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors to transform HTML-like text found in JavaScript files into standard JavaScript objects.

    • JSX needs transpilers like Babel to transform it into ES5 js script (link)
    • React Components are the building blocks of React (Maybe just like an Angular Directive / keep in mind that’s React is only V in MVC cmiiw).
    • React Component as a collection of HTML, CSS, JS, and some internal data specific to that component.
    • React Components can have nested components inside of them.
    • React Virtual DOM is JavaScript representation of the actual DOM.
    • React Life Cycle: 1. Signal to notify our app some data has changed 2. Re-render virtual DOM  3. Diff previous virtual DOM with new virtual DOM 4. Only update real DOM with necessary changes (sample).
    • React Virtual DOM is fast

      whenever setState is called, React creates a new virtual DOM, does the diff, then updates the real DOM

    • Life Cycle explained
      1. componentWillMount: Invoked once before the initial render.
      2. componentDidMount – Invoked once after the initial render.
      3. componentWillReceiveProps – This life cycle is not called on the initial render, but is instead called whenever there is a change to props.
      4. componentWillUnmount – This life cycle is invoked immediately before a component is unmounted from the DOM.
    • for transformation  from JSX to JS, we need to set up some sort of transformation phase as you’re developing with Webpack+Babel.
  2. Flux architecture 2.FLUX-LOGO1

    Flux is an application architecture for React utilizing a unidirectional data flow.

    • Flux unidirectional cycles that data can flow through
    • Flux is a pattern for managing data flow in your application.
    • Flux can  structure and architect React application in an efficient way.
    • Flux is great.But you don’t have to use Flux with React.

      Don’t let the complexity of Flux ruin the simplicity of React.

    • Flux Part (link)
      • Dispatcher
        • Dispatcher is used to broadcast payloads to registered callbacks.
      • Store
        • Holds the data of an application.
      • Action
        • Actions are semantic and descriptive of the action taking place.
      • View
        • Data from stores is displayed in views. Views can use whatever framework you want
    • Flux Flow
      • 1. Views send actions to the dispatcher. 2. The dispatcher sends actions to every store. 3. Stores send data to the views.
      • Different phrasing: Views get data from the stores.
        Different phrasing: Views get data from the stores.
    • Flux Sample Application flux-todomvc
      1. $ git clone https://github.com/facebook/flux.git && cd flux
      2. $ yarn install4.install-sample
      3. hmhmhm.. I just realize that ‘git clone https://github.com/facebook/flux.git’ was downloaded all samples applications instead of single todomvc app.
      4. 5.folder-app-structure
      5. Nothing is wrong, lets continue
      6. Add Flux-Shell
      7. $ cp -R examples/flux-shell examples/my-todomvc
      8. 7.new-files
        New Files from flux-shell (my-todomvc is our new flux-todomvc)
      9. $ cd examples/my-todomvc && yarn install9.install
      10. See “Hello world!” on browser (mine is /home/yusuf/test/flux/examples/my-todomvc).10.hellow-world.png
      11. Set up TodoMVC assets
      12. $ cp -R ../todomvc-common todomvc-common
      13. $ vim examples/my-todomvc/index.html (link)
      14. $ vim examples/my-todomvc/src/root.js (link)
      15. $ yarn run watch (under my-todomvc)15.yarn-run-watch
      16. refresh page file:///home/yusuf/test/flux/examples/my-todomvc/index.html

         The page should now have some styling and still say "Hello World!" in the center.
        The page should now have some styling and still say “Hello World!” in the center.
      17. Setting up Flux
        1. Under my-todomvc
        2. $ cd ./src && mkdir ./containers ./data ./views && touch ./containers/AppContainer.js && touch ./data/AppContainer.js ./data/TodoActionTypes.js ./data/TodoDispatcher.js ./data/TodoStore.js && touch ./root.js ./views/AppView.js18.initfiles
        3. Code for files above link
        4. asd
      18. Build
        1. $ yarn build
        2. or $ yarn run build
        3. reload file:///home/yusuf/test/flux/examples/my-todomvc/index.html from browser20.hello-from-flux.png
        4. In case you  are getting following errors while running “yarn run build” or “yarn run watch”:

          ERROR in ./~/flux/utils.js
          Module not found: Error: Cannot resolve ‘file’ or ‘directory’ ./lib/FluxContainer in /home/yusuf/test/flux/examples/my-todomvc/node_modules/flux
          @ ./~/flux/utils.js 10:27-57

          ERROR in ./~/flux/utils.js
          Module not found: Error: Cannot resolve ‘file’ or ‘directory’ ./lib/FluxMixinLegacy in /home/yusuf/test/flux/examples/my-todomvc/node_modules/flux
          @ ./~/flux/utils.js 11:23-55

          ERROR in ./~/flux/utils.js
          Module not found: Error: Cannot resolve ‘file’ or ‘directory’ ./lib/FluxReduceStore in /home/yusuf/test/flux/examples/my-todomvc/node_modules/flux
          @ ./~/flux/utils.js 12:29-61

          ERROR in ./~/flux/utils.js
          Module not found: Error: Cannot resolve ‘file’ or ‘directory’ ./lib/FluxStore in /home/yusuf/test/flux/examples/my-todomvc/node_modules/flux
          @ ./~/flux/utils.js 13:23-49

          ERROR in ./~/flux/index.js
          Module not found: Error: Cannot resolve ‘file’ or ‘directory’ ./lib/Dispatcher in /home/yusuf/test/flux/examples/my-todomvc/node_modules/flux
          @ ./~/flux/index.js 10:28-55

        5. This is how to fix errors above
          1. delete ./node_modules and re-build, is it still error ? try second way
          2. $ yarn add flux

            21.yarn-error1.png
            It will install another missing dependency
        6. $yarn run build   / $ yarn run watch
      19. reload reload file:///home/yusuf/test/flux/examples/my-todomvc/index.html from browser20.hello-from-flux
  3. Reduxredux-react

  4. Persisting  data with server APIs

Setting up Webpack + Babel KONFIGURASI-react-es6-webpack

Webpack gets every module your application needs, then packages all of those modules into one bundle file (if needed — few bundles).

Installation

yarn add webpack --dev

Flag --dev (--save-dev) says that this dependency will be saved in devDependencies in package.json and required only in development.

  • Webpack

    • Webpack is a code bundler. It takes your code, transforms and bundles it.
    • three main things Webpack need to know (basic things to setup).
      1. starting point of your application, or your root of JavaScript file
      2. which transformations to make on your code (SASS to CSS, JSX to JS etc.,)
      3. location it should save the new transformed code.
    • Webpack configurations. Conveniently, this file should be named webpack.config.js
    • webpack.config.js and be located in the root directory of our project.
    • Build example without webpack.config.js
      ./node_modules/.bin/webpack src/index.js dist/bundle.js
    • Build example using webpack.config.js

      Most projects will need a more complex setup, which is why webpack supports a configuration file.

      ./node_modules/.bin/webpack --config webpack.config.js
      
    • Build using npm scriptNPM-SCRIPT
    • webpack terminal commands
      • webpack -w  #watchp
      • webpack -p #minified
    • Webpack vs gulp article
    • Yarn in better NPM article, mgrating from npm to yarn
  • Babel

    Transpilers, or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language. Languages you write that transpiled to JavaScript are often called compile-to-JS languages, and are said to target JavaScript (source).

    In terms of React, Babel is going to allow us to transform our JSX (which you’ll see soon) into actual JavaScript. What’s nice about Babel though is it can be used for much more than just JSX -> JS transformations. You can also opt into “future” versions of JavaScript (ES2015, 2016, etc)

List of transpilers:

Installing Babel

npm install --save-dev babel-core babel-loader babel-preset-react

babel-core is babel itself, babel-loader is the webpack loader we’ll use, and babel-preset-react is to get the JSX -> JS transformation going.

My Steps to the Glorious “Hello World” With ReactJS

HELLO-WORD-REACTJS

  1. $ mkdir blog-hellojs and cd blog-hellojs
  2. $ yarn init
    • 1.yarn-Init
  3. $ yarn add react
  4. $ yarn add react-dom
    1. 4.package.json
    2. Now I have react and react-dom
  5. Now it is time to add babel power to the project
  6. $ yarn add babel-core babel-cli babel-loader babel-preset-es2015 babel-preset-react react-hot-loader –dev (the deps should be under devDependencies instead of dependencies, I made a typo on yarn add command, I wrote -dev instead of dev)
    • 5.install-babel
      check package.json out!
    • 6.test-Babel
      test to run babel using yarn (it’s a magic)
    • Now I have react, react-dom and babel (plus babel required deps for reactjs dev)
  7. Now it is time to add webpack power to the project
  8. $ yarn add webpack webpack-dev-middleware webpack-hot-middleware –dev
    • 7.webpack-json
      Accidentally remove react and react-dom from this file :V
    • The image above is missing react and react-dom, make sure you add that manually by running (somehow I just deleted react and react-dom from it and made error import command):
      • $ yarn add react
      • $ yarn add react-dom
  9. Adding webpack.config.js
    1. Multiple Entry Points
    2. Install uglifyjs-webpack-plugin
      • $ yarn add uglifyjs-webpack-plugin –dev
      • ups, no need to install uglifyjs-webpack-plugin anymore, it’s already in webpack.optimize.UglifyJsPlugin
      • 8.uglify-plugin
    3. $ touch webpack.config.js
    4. $ mkdir ./src
    5. $ touch ./src/index.js    <- ES6 JS(X) entry support
    6. mkdir ./src/assets
    7. $ mkdir ./dist <- public directory where the bundle.js will be placed
    8. $ vim  ./webpack.config.js (development)
    9. vim  ./src/index.js
      • Copy JSX sample code (hello world) from here
    10. Run webpack build using yarn
      1. $ yarn run webpack
      2. wHoAA, I got an Error, fuxk yeah… lets fight!

        ERROR in ./src/index.js
        Module parse failed: /home/yusuf/test/blog-hellojs/src/index.js Unexpected token (5:2)
        You may need an appropriate loader to handle this file type.

        You may need an appropriate loader to handle this file type.
        You may need an appropriate loader to handle this file type. ??????????????
      3. wait… I’m currently Googling right now………………!
      4. Ok, the the problem is because of wrong folder name (I apologize for that, the url https://pastebin.com/edit/nd6N1F2x is updated, so it won’t occur to you for sure :v )
        • in webpack.config.js, change following line:
          • path.resolve(__dirname, ‘app‘) to
          • path.resolve(__dirname, ‘src‘) (actually it was updated from pastebin)
      5. Getting another new error, hmhmh … it looks interesting (I just wanted to smash my laptop right now…)
        1. The next error is………………….. (hmhmhm looks so nasty and stupid!)

          ERROR in ./src/index.js
          Module not found: Error: Can’t resolve ‘react’ in ‘/home/yusuf/test/blog-hellojs/src’
          @ ./src/index.js 3:13-29

          ERROR in ./src/index.js
          Module not found: Error: Can’t resolve ‘react-dom’ in ‘/home/yusuf/test/blog-hellojs/src’
          @ ./src/index.js 7:16-36
          error Command failed with exit code 2.

          error Command failed with exit code 2.
          ERROR in ./src/index.js
        2. The error is still occurring for somehow (even the error is magic) ….
        3. Ladies and Gentlemen …….I’m proudly announce to you that the error is “REACT IS NOT INSTALLED YET”
          • Somehow my prev ‘yarn add react’ and ‘yarn add react-dom’ are not working properly (or I just accidentally removed them from the package.json)
        4. Make sure your /dist/ folder is empty by running following script:
          • $ rm dist/*
        5. Ok now run following code below to transpille the ES6 JSX code from src/index.js to dist/bundle.js
          • $ yarn run webpack
          • yarn run webpack
            yarn run webpack
          • vim dist/bundle.js
            vim dist/bundle.js
        6. Thanks God Babel is working now…
      6. 13.structure-folders
  10. Create HTML File
    • touch ./src/index.html 
    • html code
  11. Install html-webpack-plugin
    $ yarn add html-webpack-plugin --dev
  12.   Update webpack.config.js enable html-webpack-plugin on build
    1. Follow this tutorial to add html-webpack-plugin link
    2. New required line on webpack.config.js on lines 5-10 and 34
      1. 14.config-for-html.png
    3. $ yarn run webpack
      1. 16.index.html.png
      2. Generated ./dist/index.html
        Generated ./dist/index.html
  13. Run server
    1. $ yarn install webpack-dev-server –dev
    2. Add following line to update package.json
    3. "start": "webpack-dev-server"
      • 17.yarn-webpack-run
  14. Run server using
    1. $ yarn start
    2. or $ yarn run start

 

 

Sources:

  1. https://blog.hellojs.org/setting-up-your-react-es6-development-environment-with-webpack-express-and-babel-e2a53994ade
  2. http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/
  3. https://codeburst.io/its-easy-setting-up-react-and-webpack-eb9ecaef5094
  4. https://www.reactenlightenment.com/react-jsx/5.1.html
  5. https://www.slideshare.net/floydophone/react-preso-v2
  6. https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them
  7. https://webpack.js.org/guides/getting-started/
  8. https://www.sitepoint.com/yarn-vs-npm/
  9. https://stackoverflow.com/questions/35062852/npm-vs-bower-vs-browserify-vs-gulp-vs-grunt-vs-webpack?rq=1
  10. https://github.com/facebook/flux/tree/master/examples/flux-concepts
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s