@creuna/create-react-app

create-react-app

React app boilerplate

👩‍💻 Usage

We recommend running this from @creuna/cli.

If you want to create a new app from JavaScript, this is the right module for you.

Dependencies

The React app relies on node-gyp which means you might have to install some things to get it running. Please see node-gyp docs for instructions for your OS if you run into trouble.

Requires node >= 7.5.x

Options

🚀 Project name

This will be used in package.json as well as for <title> in the mockup and <h1> on the mockup frontpage.

😸 Your full name

Used in the author field in package.json

💌 Your email address

Used in the author field in package.json

☁️ Include API-helper?

If you select this, source/js/api-helper.js will be included. This is a handy abstraction of fetch that supports automating analytics (optional), showing status messages (optional) and working with mock API responses.

Usage:

api.execute(url, data).then(response => {
  // do something with response
}

💬 Include message helper for API?

If you select this, source/js/messenger.js and source/components/message will be included. Also, the messenger helper is automagically wired up with the API-helper.

Usage:

For the messenger helper to work, API responses have to be formatted as follows:

{
  "success": true,
  "messageToUser": "Your request succeeded!",
  "payload": {
    //actual content of API response
  }
}

If an API response includes a messageToUser, it will tell the Message component to show it. The success property tells the Message component whether to display the message as an error or as a confirmation. The Message component needs to be rendered somewhere in order to work.

When a payload object is present in the response, only the content of payload will be returned from api.execute.

📈 Include Analytics helper?

If you select this, source/js/analytics.js will be included and wired up to work with the API-helper.

Usage:

const analyticsData = {}; // some google analytics data

analytics.send(analyticsData);

This will push analyticsData to window.dataLayer. send supports both objects and arrays.

With API-helper

If you format your API response in the following way (or make another human do so), analytics will be pushed to window.dataLayer automatically.

{
  "analytics": {
    // some analytics data here
  },
  "payload": {
    //actual content of API response
  }
}

When a payload object is present in the response, only the content of payload will be returned from api.execute.

🖼️ Include responsive images helper?

If you select this the following files will be included:

• source/js/responsive-images.js
• source/components/image
• source/components/fluid-image

These are intended to be used with the ImageResizer for .NET plugin. The Image and FluidImage components use responsive-images.js to measure the rendered images and get the URL for an image of appropriate size.