https://github.com/mmircea16/stateless-jsx-loader

Webpack loader for stateless React components
https://github.com/mmircea16/stateless-jsx-loader

jsx react stateless-components webpack

Last synced: 14 days ago
JSON representation

Webpack loader for stateless React components

• Host: GitHub
• URL: https://github.com/mmircea16/stateless-jsx-loader
• Owner: mmircea16
• License: other
• Created: 2018-01-04T17:18:34.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-22T16:37:52.000Z (almost 7 years ago)
• Last Synced: 2024-04-25T11:43:54.314Z (9 months ago)
• Topics: jsx, react, stateless-components, webpack
• Language: JavaScript
• Size: 71.3 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## DEPRECATED - Please use https://www.npmjs.com/package/babel-stateless-jsx instead

## React stateless component loader

This gives the ability to write pure JSX for stateless components, eliminating all the boilerplate needed to write one. Only writing JSX in a file like below is enough to define a stateless component:

```

 Hello {this.props.name}! 

``` 


Using the `.html.jsx` extension can be a way to highlight the files containing stateless components written in pure JSX

See `example` folder and `webpack.config.js` in that folder for an example of usage. 

### Instalation

```bash

npm install stateless-jsx-loader

```

### Usage

Webpack config needs to contain something like:

```javascript

{

    test: /\.html\.jsx$/,

    use: {

          loader: 'stateless-jsx-loader'

    }

}

```

### Testing when using the loader

In order to write tests, webpack loaders need to apply to the code. An example of how to do it:

```shell

"test": "webpack --config webpack.test.config.js && jest"

``` 

and webpack.test.config.js

```javascript

const glob_entries = require('webpack-glob-entries');

const path = require('path');

const webpack = require('./webpack.config');

webpack.entry = glob_entries('./test/*test.js');

webpack.output = {

    filename: '[name].js',

    path: path.resolve(__dirname, 'dist/test')

};

module.exports = webpack;

```