Resource Overview

A project of react developing template

1. Javascript(ES6 or ECMAScript 6 or ECMAScript 2015, ES2016, ES2017 syntax)
2. Nodejs and npm
3. Reactjs
4. babel 7.x
5. Webpack and webpack module loaders
6. Sass

• To generate distribution(dist) folder: Run > npm run build
• To start project in webserver: Run > npm start

What is React?

• A library for user interfaces
• Create at Facebook and Instagram
• React Native for mobile
• React Website
• github repo
• Virtual DOM

Efficient rendering with React:

• DOM Diffing
  • Compares rendered content with the new UI changes
  • Makes only the minimal changes necessary
  • Compares JavaScript objects
  • Is faster than writing to or reading from DOM

Pure React:

• React.createElement(type, [props], [...children])
• ReactDOM.render(element, container[, callback])
• httpster webserver

Refactoring elements using JSX:

• JSX: JavaScript XML and its a tag base syntax.
• JSX is use to create React elements
• JSX expression wrap by carly braces {}
• JSX code is transpiled by babel.

Install react:

• react: Run > npm install react
• react-dom: Run > npm install react-dom

Babel inline transpiling:

• Babel is a JavaScript compiler, which is transpiling unsupported javascript and make the js code browser compatible.
• ECMAScript 6/es6, also known as ECMAScript 2015
• es2016, es2017
• babel in the browser

Babel static transpiling with babel-cli 7.x:

• Babel cli and core: Run > npm install --save-dev @babel/core @babel/cli
• Create .babelrc configuration file where all of preset and plugins are enabled
• Presets
  • @babel/preset-env: Run > npm install --save-dev @babel/preset-env
  • @babel/preset-react: Run > npm install --save-dev @babel/preset-react
• Output file generate command npm run babel [source file path] --out-file [destination file path]: Run > ./node_modules/.bin/babel ./src/index.js --out-file ./dist/bundle.js

Building with webpack:

• Is a module bundler
• Creates static files
• Automates processes
• Used current version Webpack 4.x and webpack-cli: Run > npm install --save-dev webpack webpack-cli
• webpack configuration sample
• webpack-dev-server: Run > npm install --save-dev webpack-dev-server
• Loaders:
  • babel-loader: Run > npm install --save-dev babel-loader
  • html-loader: Run > npm install --save-dev html-loader
  • style-loader: Run > npm install --save-dev style-loader
  • css-loader: Run > npm install --save-dev css-loader
  • postcss-loader: Run > npm install --save-dev postcss-loader
  • sass-loader and node-sass: Run > npm install --save-dev sass-loader node-sass
  • image loading and optimizing
  • font loading
• Plugins:
  • Generate index.html: Run > npm install --save-dev html-webpack-plugin
  • Write to disk the html file: Run > npm install --save-dev html-webpack-harddisk-plugin
  • Clean output files: Run > npm install --save-dev clean-webpack-plugin
  • Extracts CSS into separate files: Run > npm install --save-dev mini-css-extract-plugin
  • JS minimizer: Run > npm install --save-dev terser-webpack-plugin
  • CSS minimizer: Run > npm install --save-dev optimize-css-assets-webpack-plugin
• Build command: Run > npm run build
• Start webserver: Run > npm start

React App:

Create components:

• Create a React Component by extending React.Component rather than using React.createClass since its deprecated from version 16.0 onwards and has been moved to a separate package 'create-react-class'.
• Adding Props to components. Props of React is being an object and every props is a key.
• Class has additional features such as local state and lifecycle methods.
• Stateless functional components
• Added react-icons: Run > npm install --save react-icons
• Composition vs Inheritance
• The Component Lifecycle
• Random Users Demo Data
• isomorphic-fetch is used for fetching data from API: Run > npm install --save isomorphic-fetch es6-promise

Props:

• Provide props default value.
• Validating or typechecking with PropTypes
• ProTypes: Run > npm install --save prop-types

State:

• State and Lifecycle

React Router:

• Declarative routing for React
• react-router: Run > npm install --save react-router
• DOM bindings for React Router: Run > npm install --save react-router-dom
• React Native bindings for React Router: Run > npm install --save react-router-native

Form Component:

• In most cases, React team recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
• Legacy API: String Refs is deprecated.
• Using refs in class components.
• Refs and the DOM
• Forwarding Refs
• Two-way function binding by using Refs.
• All Supported HTML Attributes
• Adding a autocomplete component for dropdownlist.

Useful Links:

• State management by Redux
• Data management solution by Relay
• Data management solution by Falcor
• Data management solution by GraphQL

License

Single license MIT