Creating a Library of React Components using Create React App

Creating a Library of React Components using Create React App

hackernoon.com hackernoon.com3 months ago in #Dev Love25

UPDATE: You can use the npm package create-component-lib to automate all the steps described in this blog post. Create React App is easily the best tool for creating and developing React applications. With a little bit of work, it can also be used to create a library of React components that can be published to npm and used in other React applications. Here’s what you need to do: 1. Create a new project using create-react-app : create-react-app simple-component-library 2. Delete all the files inside src/ , and create a new index.js file with some starter code: import React from “react”; import ReactDOM from “react-dom”; ReactDOM.render(Hello world, document.getElementById(“root”)); 3. Create a new folder src/lib and place your React components inside it. src/lib will serve as the root folder of the module published to npm . Here’s the code for an example component: import React from “react”; import “./TextInput.css”; const TextInput = ({ type = “text”, label, value, onChange }) =( {label && {label}} onChange && onChange(e.target.value)} /); export default TextInput; Styling can be done inline, or in separate CSS files: .simple-form-group { margin-bottom: 1rem; } .simple-text-label { display: block; color: red; } .simple-text-input { display: inline-block; margin-bottom: 0.5rem; font-size: 16px; font-weight: 400; color: rgb(33, 37, 41); } Finally, the component can be exported from src/lib for ease of importing: import TextInput from “./TextInput”; export { TextInput }; Optionally, you can also write tests for the components inside src/lib : import React from “react”; import TextInput from “./TextInput”; import renderer from “react-test-renderer”; describe(“TextInput”, () ={ it(“renders properly”, () ={ const tree = renderer .create() .toJSON(); expect(tree).toMatchSnapshot(); }); }); 4. (Optional) Use the components in src/index.js to create examples for testing and debugging during development. Any code placed outside src/lib will not be published to npm . Here is an example usage of TextInput : import React from ‘react’; import { render } from “react-dom”; import { TextInput } from “./lib”; const App = () =( Hello React ); render(, document.getElementById(“root”)); Run npm start and navigate to http://localhost:3000 to view the result. It works (duh!) Tip: Use react-live to create a live-editable documentation site! 5. Install babel-cli using the command npm i babel-cli –save-dev and create a file  .babelrc in the root of the project with the following contents: { “presets”: [[“react-app”, { “absoluteRuntime”: false }]] } 6. Replace the build script inside package.json with the following: “build”: “rm -rf dist && NODE_ENV=production babel src/lib –out-dir dist –copy-files –ignore __tests__,spec.js,test.js,__snapshots__” The command npm run build will now transpile the code inside src/lib (ignoring tests and snapshots) into the folder dist . 7. Remove the line “private”: true from package.json . Also remove react-scripts , react and react-dom from dependencies, and move them to devDependencies . Additionally, you can also add react and react-dom to peerDependencies .  » Read More

Like to keep reading?

This article first appeared on hackernoon.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply