Skip to content

Commit 282773c

Browse files
iansinnottiansinnott
committed
Add example
1 parent 1c1bcdf commit 282773c

File tree

8 files changed

+273
-0
lines changed

8 files changed

+273
-0
lines changed

‎example/.babelrc

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"stage": 0,
3+
"env": {
4+
"development": {
5+
"plugins": ["react-transform"],
6+
"extra": {
7+
"react-transform": {
8+
"transforms": [{
9+
"transform": "react-transform-hmr",
10+
"imports": ["react"],
11+
"locals": ["module"]
12+
}, {
13+
"transform": "react-transform-catch-errors",
14+
"imports": ["react", "redbox-react"]
15+
}]
16+
}
17+
}
18+
}
19+
}
20+
}

‎example/.eslintrc

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"extends": "airbnb",
3+
"parser": "babel-eslint",
4+
"rules": {
5+
6+
// Babel handles strict for us so it should never be manually added
7+
"strict": [2, "never"],
8+
9+
// Single quotes on JSX components
10+
"jsx-quotes": [2, "prefer-single"],
11+
12+
// Indent 2 spaces always
13+
"indent": [2, 2],
14+
15+
// Omitting curly braces is fine as long as there is only one line under the
16+
// statement
17+
"curly": [2, "multi-or-nest"],
18+
19+
// Console can be useful and can also be stripped about by webpack in prod
20+
"no-console": [0],
21+
22+
// Don't require a `new` keyword when calling capitalized functons. Ex:
23+
// Immutable.Map({})
24+
"new-cap": [2, { "capIsNew": false }],
25+
26+
// Having unsed args is allowed b/c its good for consistency and reminding
27+
// what vars are available. Ex: (req, res, next) => res.send(/* ... */)
28+
"no-unused-vars": [1, {"vars": "all", "args": "none"}],
29+
30+
// Allow multiple components in a single file
31+
"react/no-multi-comp": [0],
32+
33+
// Do not require closing brackets to be on same line as opening brackets.
34+
// This is good in theory but often very ugly when applied to a lone closing
35+
// bracket of an opening tag:
36+
// <div
37+
// someProp={true}
38+
// >
39+
// Or
40+
// <div
41+
// someProp={true}>
42+
"react/jsx-closing-bracket-location": [0],
43+
},
44+
}

‎example/.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules/
2+
*.DS_Store
3+
public/
4+
.tmp/
5+
nginx.conf
6+
npm-debug.log

‎example/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Highlight Strings
2+
3+
A simple example of using `reactReplaceString` to highlight numbers in a rendered text string.
4+
5+
**Quick Start:**
6+
7+
* `npm install`
8+
* `npm start` to run at `http://localhost:3000`
9+

‎example/index.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { PropTypes } from 'react';
2+
import { render } from 'react-dom';
3+
4+
import reactReplaceString from '../';
5+
6+
const Highlight = React.createClass({
7+
propTypes: {
8+
content: PropTypes.string.isRequired,
9+
},
10+
11+
render() {
12+
return (
13+
<div>
14+
{reactReplaceString(this.props.content, )
15+
<span className='highlight'>{x}</span>
16+
}
17+
</div>
18+
);
19+
},
20+
});
21+
22+
23+
const content = `Hey my number is 555-555-5555.`;
24+
25+
// Render the app
26+
render(<Highlight content={content} />, document.getElementById('root'));

‎example/package.json

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "react-string-replace-example",
3+
"version": "0.1.0",
4+
"scripts": {
5+
"start": "babel-node ./server.js"
6+
},
7+
"main": "server.js",
8+
"author": "Ian Sinnott <ian@iansinnott.com> (http://iansinnott.com)",
9+
"license": "MIT",
10+
"homepage": "",
11+
"devDependencies": {
12+
"autoprefixer-loader": "^3.1.0",
13+
"axis": "^0.5.2",
14+
"babel": "^5.8.34",
15+
"babel-core": "^5.4.7",
16+
"babel-eslint": "^4.1.6",
17+
"babel-loader": "^5.1.2",
18+
"babel-plugin-react-transform": "^1.1.1",
19+
"css-loader": "^0.23.0",
20+
"eslint": "^1.10.3",
21+
"eslint-config-airbnb": "^2.1.1",
22+
"eslint-plugin-react": "^3.12.0",
23+
"express": "^4.13.3",
24+
"extract-text-webpack-plugin": "^0.9.1",
25+
"file-loader": "^0.8.5",
26+
"history": "^1.17.0",
27+
"normalize.css": "^3.0.3",
28+
"react": "^0.14.3",
29+
"react-dom": "^0.14.3",
30+
"react-router": "^1.0.3",
31+
"react-static-webpack-plugin": "^0.3.0",
32+
"react-transform-catch-errors": "^1.0.0",
33+
"react-transform-hmr": "^1.0.1",
34+
"redbox-react": "^1.2.0",
35+
"rimraf": "^2.4.4",
36+
"rupture": "^0.6.1",
37+
"style-loader": "^0.13.0",
38+
"stylus-loader": "^1.4.2",
39+
"url-loader": "^0.5.7",
40+
"webpack": "^1.12.9",
41+
"webpack-dev-middleware": "^1.4.0",
42+
"webpack-hot-middleware": "^2.6.0"
43+
},
44+
"dependencies": {}
45+
}

‎example/server.js

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/**
2+
* NOTE: This file must be run with babel-node as Node is not yet compatible
3+
* with all of ES6 and we also use JSX.
4+
*/
5+
import url from 'url';
6+
import React from 'react';
7+
import { renderToStaticMarkup } from 'react-dom/server';
8+
import express from 'express';
9+
import webpack from 'webpack';
10+
11+
import config from './webpack.config.dev.js';
12+
13+
const Html = ({
14+
title = 'Rainbow Unicorns',
15+
bundle = '/app.js',
16+
body = '',
17+
favicon = '',
18+
stylesheet = '',
19+
}) => (
20+
<html lang='en'>
21+
<head>
22+
<meta charSet='utf-8' />
23+
<meta httpEquiv='X-UA-Compatible' content='IE=edge' />
24+
<meta name='viewport' content='width=device-width, initial-scale=1' />
25+
<title>{title}</title>
26+
{favicon && <link rel='shortcut icon' href={favicon} />}
27+
{stylesheet && <link rel='stylesheet' href={stylesheet} />}
28+
</head>
29+
<body>
30+
<div id='root' dangerouslySetInnerHTML={{ __html: body }} />
31+
<script src={bundle} />
32+
</body>
33+
</html>
34+
);
35+
36+
/**
37+
* Render the entire web page to a string. We use render to static markup here
38+
* to avoid react hooking on to the document HTML that will not be managed by
39+
* React. The body prop is a string that contains the actual document body,
40+
* which react will hook on to.
41+
*
42+
* We also take this opportunity to prepend the doctype string onto the
43+
* document.
44+
*
45+
* @param {object} props
46+
* @return {string}
47+
*/
48+
const renderDocumentToString = props =>
49+
'<!doctype html>' + renderToStaticMarkup(<Html {...props} />);
50+
51+
const app = express();
52+
const compiler = webpack(config);
53+
54+
app.use(require('webpack-dev-middleware')(compiler, {
55+
noInfo: true,
56+
publicPath: config.output.publicPath,
57+
}));
58+
59+
app.use(require('webpack-hot-middleware')(compiler));
60+
61+
// Send the boilerplate HTML payload down for all get requests. Routing will be
62+
// handled entirely client side and we don't make an effort to pre-render pages
63+
// before they are served when in dev mode.
64+
app.get('*', (req, res) => {
65+
const html = renderDocumentToString({
66+
bundle: config.output.publicPath + 'app.js',
67+
});
68+
res.send(html);
69+
});
70+
71+
// NOTE: url.parse can't handle URLs without a protocol explicitly defined. So
72+
// if we parse '//localhost:8888' it doesn't work. We manually add a protocol even
73+
// though we are only interested in the port.
74+
const { port } = url.parse('http:' + config.output.publicPath);
75+
76+
app.listen(port, 'localhost', err => {
77+
if (err) return console.error(err);
78+
console.log(`Dev server listening at http://localhost:${port}`);
79+
});

‎example/webpack.config.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/* eslint-disable no-var */
2+
var path = require('path');
3+
var webpack = require('webpack');
4+
5+
// Set up dev host host and HMR host. For the dev host this is pretty self
6+
// explanatory: We use a different live-reload server to server our static JS
7+
// files in dev, so we need to be able to actually point a script tag to that
8+
// host so it can load the right files. The HRM host is a bit stranger. For more
9+
// details on why we need this URL see the readme and:
10+
// https://github.com/glenjamin/webpack-hot-middleware/issues/37
11+
var DEV_PORT = process.env.DEV_PORT || 3000;
12+
var DEV_HOST = '//localhost:' + DEV_PORT + '/';
13+
var HMR_HOST = DEV_HOST + '__webpack_hmr';
14+
15+
module.exports = {
16+
devtool: 'inline-source-map',
17+
18+
entry: {
19+
app: [
20+
'webpack-hot-middleware/client?path=' + HMR_HOST,
21+
'./client/index.js',
22+
],
23+
},
24+
25+
output: {
26+
path: path.join(__dirname, 'public'),
27+
filename: '[name].js',
28+
publicPath: DEV_HOST,
29+
},
30+
31+
plugins: [
32+
new webpack.HotModuleReplacementPlugin(),
33+
new webpack.NoErrorsPlugin(),
34+
],
35+
36+
module: {
37+
loaders: [
38+
{
39+
test: /\.js$/,
40+
loaders: ['babel'],
41+
},
42+
],
43+
},
44+
};

0 commit comments

Comments
 (0)