From ab18ca65a169e923bab6a2fb1235090f997d089b Mon Sep 17 00:00:00 2001 From: Haz Date: Thu, 29 Jun 2017 10:11:53 -0300 Subject: [PATCH 1/2] Add Generating new Component section to User Guide --- packages/react-scripts/template/README.md | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 5775028406e..0da69ffee24 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -20,6 +20,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Formatting Code Automatically](#formatting-code-automatically) - [Changing the Page ``](#changing-the-page-title) - [Installing a Dependency](#installing-a-dependency) +- [Generating new Component](#generating-new-component) - [Importing a Component](#importing-a-component) - [Code Splitting](#code-splitting) - [Adding a Stylesheet](#adding-a-stylesheet) @@ -345,6 +346,28 @@ yarn add react-router This works for any library, not just `react-router`. +## Generating new Component + +Instead of creating component files by hand, you can use [`generact`](https://github.com/diegohaz/generact) to generate new components based on existing ones. + +<p align="center"> + <img src="https://user-images.githubusercontent.com/3068563/27687316-bb5bd832-5cac-11e7-9761-c489e5a3a9f0.gif" alt="Showing generact usage" width="640" /> +</p> + +Optionally, you can add it to `devDependencies` (`yarn add --dev generact`) and add an npm script to easily generate new components based on another specific one (e.g. `src/components/MySimpleBaseComponent/MySimpleBaseComponent.js`): + +```diff + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject", ++ "component": "generact src/components/MySimpleBaseComponent/MySimpleBaseComponent.js" + } +``` + +Then, just run `yarn component`. + ## Importing a Component This project setup supports ES6 modules thanks to Babel.<br> From aba6294c8aec5fff2be39c70aa8987cd65d4c93d Mon Sep 17 00:00:00 2001 From: Diego Haz <hazdiego@gmail.com> Date: Thu, 29 Jun 2017 10:15:28 -0300 Subject: [PATCH 2/2] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 0c428ef65cf..7b3936845ab 100644 --- a/README.md +++ b/README.md @@ -120,6 +120,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast - [Debugging in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-in-the-editor) - [Changing the Page `<title>`](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#changing-the-page-title) - [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency) +- [Generating new Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-new-component) - [Importing a Component](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#importing-a-component) - [Code Splitting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) - [Adding a Stylesheet](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-stylesheet)