# Create React Web Component [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Build%20Web%20Components%20using%20React&url=https://github.com/Silind/tslint-config-silind&hashtags=react,webcomponent,frontend)

![NPM Version](https://img.shields.io/npm/v/create-react-web-component.svg)
[![Github License](https://img.shields.io/github/license/Silind/create-react-web-component)](https://github.com/Silind-Software/create-react-web-component/blob/master/LICENSE)
![Build Status](https://github.com/Silind-Software/create-react-web-component/workflows/build/badge.svg)
![Code Coverage](https://img.shields.io/codecov/c/github/Silind-Software/create-react-web-component)

<p align="center">
  <img src="https://www.pe.com/wp-content/uploads/2018/01/rpe-bus-bestlaw-warning.jpg?w=544" />
</p>

<h3 style="text-align: center; color: #6b2c2c">This project has been deprecated, and will no longer be maintained!</h3>
<h1 style="text-align: center">The project is now carried on at <a href="https://github.com/Silind-Software/direflow">Direflow</a></h1>

<br />
<br />
<br />

#### Set up a React App wrapped in a Web Component
> This setup is is based on [*react-scripts*](https://www.npmjs.com/package/react-scripts) from [*create-react-app*](https://create-react-app.dev/docs/getting-started)  
> A thorough description of the principles used in this setup, can be read [in this article](https://itnext.io/react-and-web-components-3e0fca98a593)

<p align="center">
  <img src="https://silind-s3.s3.eu-west-2.amazonaws.com/create-react-web-component-demo/create-react-web-component-demo2.gif" />
</p>

## Getting Started

### Install
Get started by running the command
```console
npx create-react-web-component
```
Or install the package globally

- yarn
  ```console
  yarn global add create-react-web-component
  ```

- npm
  ```console
  npm i -g create-react-web-component
  ```

This will bootstrap a new project for you.  
Now use the following commands:
```console
cd <project-folder>
yarn install
yarn start
```
Your project will start running on `localhost:3000` and your browser opens a new window  

<p align="center">
<img src="https://silind-s3.s3.eu-west-2.amazonaws.com/create-react-web-component-demo/create-react-web-component.png" />
</p>

## Contributing

#### Issues
In the case of a bug report, bugfix or a suggestions, please feel very free to open an issue.

#### Pull request
Pull requests are always welcome, and I'll do my best to do reviews as fast as I can.

## License

This project is licensed under the [MIT License](https://github.com/Silind-Software/create-react-web-component/blob/master/LICENSE)

## Get Help
Read more about using Web Components with React on the [official React Docs](https://reactjs.org/docs/web-components.html)  

- Contact me on [Twitter](https://twitter.com/silindsoftware)
- If appropriate, [open an issue](https://github.com/Silind-Software/create-react-web-component/issues/new) on GitHub