Develop React components in isolation

You don't have to do any extra work to make Webcodesk to recognize React components as application components. Feel free to write the code in your favorite IDE or code editor - Webcodesk automatically parses the source code files and searches for the correct declarations to add them into the workspace.

Additionally, there is the quite handy feature in Webcodesk - a developing React component in isolation, just like in React Storybook.

This feature allows you to develop the component and see how it works without placing the component onto the page.

Double click on the components name in the Components section on the left panel. You will see the new tab with the component's name and rendered component inside the tab.

Try to change the source code of the component, and you will see that changes are applied almost immediately.

Documenting

There is an About tab on the component view (look at the picture above) that contains the information about the component.

This information is derived by Webcodesk from the source code of the component. If you want to add a description to the component or its properties, please use as the example the following source code:

/~ ... ~ /
/*
SignUpForm provides email and password input for the user.
***Does not provide the entered values checking.***
 */
class SignUpForm extends React.Component {
  render () {
    /~ ... ~ /
  }
}
/~ ... ~ /
SignUpForm.propTypes = {
  // used for indicating the input values errors
  inputErrors: PropTypes.object,
  // used for indicating of loading process
  isLoading: PropTypes.bool,
  // displays a global error text in top of the form
  error: PropTypes.string,
  // fires when the user clicks on the `Create Account` button
  onSubmit: PropTypes.func,
};
/~ ... ~ /
export default SignUpForm;

Webcodesk parses all the comments in the file and displays them on the component view.

Use markdown to make comments readable in the About tab.

Add component stories

Find the Stories tab next to the About tab in the component view.

If you switch to the Stories tab you can see the list of the different stories.

A story is a function that returns React component that can be rendered to screen.

You should only create the file with the equal name to the component name, in the same directory, and with .stories.js extension. Then add to this file your stories, like in the following example:

Component: SignInForm.js Stories: SignInForm.stories.js

import React from 'react';
import SignInForm from './SignInForm';
const containerStyle = {
  display: 'grid',
  alignItems: 'center',
  justifyContent: 'center',
  gridTemplateRows: 'minmax(500px, 1fr)'
};
export default [
  {
    story: 'For publishing',
    renderStory: () => {
      return (
        <div style={containerStyle}>
          <div>
            <SignInForm />
          </div>
        </div>
      );
    },
  }
];

Once you create the stories file, Webcodesk automatically parses it and adds stories to the component view.