React october2017

React october2017

• 1.
  React.js The BASICS!!! David Greenfield- Senior Architect Consultant
• 2.
  About Me... Senior Architectfrom Creospan. A consulting firm assisting enterprises in taking the next step in software delivery. “Many years” designing and developing software for: ● Financials (trading) ● Telephony ● Insurance ● IOT ● Airline ● Credit Card Languages - Java, Python, Scala, Javascript, C, C++ Platform - Weblogic, Websphere, Tomcat, VSphere, AWS, PCF, Kubernetes, Mesos/Marathon Frameworks - Spring, AKKA, Play Databases - Every flavor of relational, Mongo, Cassandra Infrastructure - Hazelcast, Kafka, Rabbit, Docker
• 3.
  Goals for today ●High level understanding of the technology ● Provide a foundation for the audience to learn advanced concepts (The opposite of a quick-start guide)
• 4.
  The Development Toolchain ●Node - runs javascript outside the browser. We will leverage as a dev tool. ● NPM - dependency manager (and task runner). Think Maven/Gradle/SBT/PIP - for javascript ● Babel - transpiles JSX to javascript and ES6 to ES5 ● Webpack - creates a distribution bundle
• 5.
  NPM NPM dependency managementand task executor. All local dependencies live in /node-modules npm install npm install <package-name> --save npm install <package-name> --save-dev
• 6.
  Webpack Builds a dependencygraph of your import / export statements. Then it will bundle them up and compile them into one giant bundle.js file then add the script tag to your html This includes running Babel to transpile from es6 to es5
• 7.
  Create a REACTapp $ npm install create-react-app $ create-react-app $ npm start
• 8.
  What have Icreated? npm config index.html index.js App.js - top level component
• 9.
  package.json Package.lock.json lists theexact versions of each dependency and it’s sub-dependencies. Snippet ….
• 10.
  index.js Used to usecache in case off line. Out of scope. Render Main Component
• 11.
  Building and Bundling Html,css react.js files NPMTask Webpack Babel Bundle
• 12.
  The Component Model Props- immutable input to the component State - When the component calls “setState(...)” it triggers a call to render. Data flows down. Think Acyclic Graph.
• 13.
  Data Flow App.js MyNewComponent Banner
• 14.
  The Component Lifecycle constructor() componentWillMount() render()- also called when props change componentDidMount()
• 15.
  Testing ● Tools ○ Jest ○Enzyme ● Types of tests ○ Snapshot ○ Dom Testing
• 16.
  JSX XML formatted elementsthat get transpile to javascript The following renders “ComponentName” into the enclosing component. <ComponentName prop1=’prop1Value’ prop2=’prop2Value’ />
• 17.
  es6 ● String templates: ○By using backticks and ${} -> `Hello my name is ${name}` ● Default arguments: ○ Function add(x, y=5) ● Rest ● Spread (opposite of Rest) ● Arrow functions ● Deconstructing
• 18.
  Es6 continued ● modules ○import moduleName from ‘library’ (instead of var moduleName = Require(‘library) ○ For non-default exports use import{moduleName} from ‘library’ ○ export & export default ● Classes ○ syntactic sugar that basically translates to a function ○ Constructor function defines class variables ○ “This” is the context, but context gets lost if you assign a member function outside the object. ● Promises ○ Wrapper around async processes ○ chainable
• 19.
  Get the sample https://github.com/davidkgreenfield/react-intro-demo
• 20.
  What else? ● Proptypes- prop validation ● Understanding JSX ● Reactive State Management using Flux or Redux