reactjs

The ReactJS training course provides a beginner's introduction to the powerful and ever-more popular ReactJS JavaScript framework. It has been designed for anyone who is already familiar with HTML and JavaScript, and perhaps already using another JavaScript framework, but wanting to understand the basics of ReactJS. ReactJS is quite a significant departure from most other JavaScript frameworks and it can be tricky to "get it". Key to "getting" ReactJS is understanding its key underlying concepts, so that's what this short course will focus on, through a mixture of diagrams and the creation of a simple working application.

  • Participants should be familiar with HTML, CSS and JavaScript
  • Familiarity with Node.js will also be an advantage

  • This course is designed for anyone who wants to get a basic understanding of the ReactJS JavaScript framework
  • It is not designed for people who already understand the underlying concepts of ReactJS
  • It is also not designed for anyone wanting to learn advanced ReactJS development techniques

By attending ReactJS workshop, Participants will learn to:

  • understand the core concepts behind ReactJS
  • begin to develop simple ReactJS applications

COURSE AGENDA

  • Coding custom components with React.createClass()
  • Generating component output with the render method
  • Composing a JSX component hierarchy
  • Incorporating third-party components
  • Employing React.createElement() and React.DOM.* factories
  • Rendering the application with ReactDOM.render()
  • Constructing the UI on the server with renderToString()
  • Features of React and Flux
  • Benefits of the virtual DOM
  • Configuring the development and build environment
  • Disambiguating component properties and state
  • Inserting properties into rendered output with this.props
  • Passing property values using JSX { } expressions
  • Initializing default values with getDefaultProps()
  • Setting starting state values with getInitialState()
  • Reading application data with this.state
  • Mutating data with this.setState()
  • Harnessing React autobinding and event aggregation
  • Attaching and detaching logic and event handlers in componentDidMount and componentWillUnmount
  • Enhancing performance with componentShouldUpdate
  • Responding to changes with componentWillReceiveProps
  • Working with interactive properties
  • value
  • defaultValue
  • checked
  • selected
  • Capturing form component updates with onChange
  • Comparing controlled and uncontrolled components
  • Applying the onChange / setState() convention
  • Employing the LinkedStateMixin
  • Passing ReactLink objects through the props hierarchy
  • Making Ajax calls from React
  • Mapping CRUD access to REST actions
  • GET
  • POST
  • PUT
  • DELETE
  • Identifying Flux participants
  • Actions
  • Dispatcher
  • Stores
  • Views
  • Harnessing unidirectional data flow
  • Comparing Flux to Model View Controller, Redux and Relay
  • Extending the Facebook Dispatcher
  • Utilizing Node.js EventEmitter with custom stores
  • Integrating REST access with Flux action creators
  • Exploiting the react-router for semantic URLs
  • Mapping URL paths and parameters to components
  • Inspecting React components with browser extensions
  • Identifying and debugging rendering errors
  • Running tests with Jest
  • Simulating event dispatch with ReactTestUtils.Simulate
  • Establishing a baseline
  • Profiling React execution with Perf.start() and stop()
  • Optimizing component reconciliation with key
  • Including the react-css-transition-group add-on
  • Employing the ReactCSSTransitionGroup component
  • Writing CSS transitions and animations