Dart wrapper library for facebook/react
Getting started
If you are not familiar with the ReactJS library, read this react tutorial first.
To integrate in Dart project add dependency react to pubspec.yaml.
Include the native javascript react and react_dom libraries (provided with this library for compatibility reasons) in index.html and create element where you'll mount the react component you'll create.
If it fits the needs of your application better, you may alternatively load the concatenated minified react and react_dom
libraries in a single file:
Initialize React in our Dart application. Mount simple component into '#content' div.
Inverse method to rendering component is unmountComponentAtNode
Using browser native elements
If you are familiar with React (without JSX extension) React-dart shouldn't surprise you much. All elements are defined as
functions that take props as first argument and children as optional second argument. props should implement Map and children is either one React element or List with multiple elements.
For event handlers you must provide function that take SyntheticEvent (defined in this library).
Defining custom elements
Define custom class that extends Component and implements at least render.
Register this class so React can recognize it.
Use this registered component similarly as native elements.
Warning: registerComponent should be called only once per component and lifetime of application.
Custom element with props
Creating components with richer interface than just props and children and with type control
Using refs and findDOMNode
Proper usage of refs here is a little bit different from usage in react. You can specify
a ref name in component props and then call ref method to get the referenced element.
Return values for Dart components, DOM components and JavaScript components are different.
For a Dart component, you get an instance of the Dart class of the component.
For primitive components (like DOM elements), you get the DOM node. For JavaScript composite components,
you get a ReactElement representing the react component.
If you want to work with DOM nodes of dart or JS components instead, you can call top level method findDOMNode on anything the ref returns.
Geocodes Example
For more robust example take a look at example/geocodes/geocodes.dart.
Life-cycle methods of a component
These are quite similar to React life-cycle methods, so refer to React tutorial for further
explanation/spec. Their signatures in Dart are as:
Testing using React Test Utilities
lib/react_test_utils.dart is a Dart wrapper for the React TestUtils library allowing for tests to be made for React components in Dart.
Here is an example of how to use React TestUtils within a Dart test.
To test the Dart wrapper, take a look at test/react_test_utils_test.dart.