https://github.com/gurumukhi/react-lab

Learn React
https://github.com/gurumukhi/react-lab

react

Last synced: about 1 month ago
JSON representation

Learn React

• Host: GitHub
• URL: https://github.com/gurumukhi/react-lab
• Owner: gurumukhi
• Created: 2017-12-14T20:55:28.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-11-16T13:19:14.000Z (about 6 years ago)
• Last Synced: 2024-11-01T05:25:16.803Z (3 months ago)
• Topics: react
• Language: JavaScript
• Homepage:
• Size: 213 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
1: Simple React code

====================

* Direcotory: src/v0.0.1

* Run: index.html

* Concepts used: babel (for transcripting ES6 into ES5) & react (modern JS library for UI development) from CDN

2: Initial React code using 

====================

* Direcotory: src/v0.0.2

* Run: index.html

* Concepts used: components, props, state & lifecycle

3: Using initial tools

======================

* Directory: src/v0.0.2

* Run: `npm install`, `npm run buildv2` and then `open index.html`

* Tools used:

 * npm -  A package manager, such as Yarn, or npm lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them (dependency management). All below mentioned tools are coming from npm now not from CDN

 * browserify - It lets you write modular code and bundle it together into small packages to optimize load time. It is a bundling library to enable using dependencies using node.js style require() method.

 * npm scripts - To run complex commands, withouth having to remember them and without making tools installed globally

* Dependencies: babel-core babel-preset-react babelify browserify react react-dom

* Tip: Using .babelrc will not need specifying preset from command `browserify -t [ babelify --presets [ react ] ]`

Other useful links

==================

* Step by step building a react app https://codeutopia.net/blog/2016/02/01/react-application-data-flow-where-and-how-to-store-your-data/