FAST can be used in React applications. Let's take a look at how you can set up a project, starting from scratch.
Setting up the React project
First, you'll need to make sure that you have Node.js >= 8.2 and npm >= 5.6 installed. You can learn more and download that on the official site.
With Node.js installed, you can use create-react-app to create a new React project.
Next, we'll install the FAST packages, along with supporting libraries. To do that, run this command from your new project folder:
Set the EXTEND_ESLINT environment variable in start, build, and test scripts
eslintConfig field to turn off the 'no-unused-expressions' rule
See configuring eslint for more information.
Using the components
With all the basic pieces in place, let's run our app in dev mode with
npm start. Right now, it displays the React logo and some editing instructions, since we haven't added any code or interesting HTML. Let's change that.
First, open your
src/app.js file and add the following code:
This code imports the
<fast-design-system-provider> component as well as the
<fast-button> components. Once you save, the dev server will rebuild and refresh your browser. However, you still won't see anything. To get some UI showing up, we need to write some HTML that uses our components. Replace the App component in your
src/app.js file with the following:
To add a splash of style, add the following to the
Congratulations! You're now set up to use FAST and React!
FAST makes use of decorators to define components. At this time,
create-react-app does not support decorators. This won't be a problem when using components imported from FAST because they have already been transpiled by TypeScript - but to create components in a
create-react-app application you'll need to do one of the following:
- Define components without decorators
create-react-appand change Babel to support decorators
- Use an intermediary like react-app-rewired
React is capable of rendering custom HTML elements and binding data to them, but it is beneficial to understand how React does this. React will apply all props to a custom HTML element as HTML attributes - including non-primitive types such as arrays and objects. Where some UI libraries provide binding syntaxes to distinguish setting properties, attributes, and events, React does not. This means that it can be very easy to end up with
my-prop="[object Object]" in your HTML. React is exploring solutions in this issue. See the section on interop layers for a work-around for this issue.
React's synthetic eventing system comes with an unfortunate side-effect of being incapable of declaratively applying
CustomEvent listeners. interop layers can be used to address this issue. Alternatively, a
ref can be used on the custom element to imperatively apply the event listener to the HTML element directly.
Interop layers: @skatejs/val and reactify-wc
@skatejs/val is a small library that wraps React's
createElement function and provides the ability direct React props explicitly to HTML attributes, DOM properties, or to declarative event listeners.
Another good option is reactify-wc. It provides similar capabilities as
@skatejs/val but does so by creating component wrappers.
TypeScript and TSX support
If you're using TypeScript, you'll need to augment the
JSX.IntrinsicElements interface to use custom elements in TSX. To do so, create a
custom-elements.d.ts file in your source directory and add the following: