Initialized .NET Core 2.1 App with SPA front end in React, Emotion, Storybook, Jest
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
{ | |
"presets": ["babel-preset-env", "babel-preset-react"], | |
"env": { | |
"production": { | |
"plugins": [ | |
["emotion", { | |
"hoist": true | |
}] | |
] | |
}, | |
"development": { | |
"plugins": [ | |
["emotion", { | |
"sourceMap": true, | |
"autoLabel": true, | |
"labelFormat": "⚡[local]" | |
}] | |
] | |
}, | |
"test": { | |
"plugins": [ | |
["emotion", { | |
"sourceMap": true, | |
"autoLabel": true, | |
"labelFormat": "⚡[local]" | |
}] | |
] | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { | |
Component | |
} from 'react'; | |
import PropTypes from 'prop-types'; | |
import logo from '../assets/images/logo.svg'; | |
import {Container, Header, Image, H1, Text} from './themes/DefaultTheme'; | |
class App extends Component { | |
render() { | |
return ( | |
<Container center> | |
<Header> | |
<Image src={logo} alt="logo" /> | |
<H1>{this.props.welcomeMessage}</H1> | |
</Header> | |
<Text> | |
To get started, edit | |
<code> | |
{this.props.fileLocation} | |
</code> and save to reload. | |
</Text> | |
</Container> | |
); | |
} | |
} | |
App.propTypes = { | |
fileLocation: PropTypes.string.isRequired, | |
welcomeMessage: PropTypes.string | |
} | |
App.defaultProps = { | |
fileLocation: 'src/components/App.js', | |
welcomeMessage: "Welcome to React!" | |
} | |
export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { storiesOf } from '@storybook/react'; | |
import { action } from '@storybook/addon-actions'; | |
import { linkTo } from '@storybook/addon-links'; | |
import App from '../components/App'; | |
storiesOf('App', module) | |
.add('default', () => <App />) | |
.add('with different welcome message', () => <App welcomeMessage="Welcome with a different welcome message" />); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import renderer from 'react-test-renderer'; | |
import { mount } from 'enzyme'; | |
import App from '../components/App'; | |
it('renders without crashing', () => { | |
const div = document.createElement('div'); | |
ReactDOM.render(<App />, div); | |
ReactDOM.unmountComponentAtNode(div); | |
}); | |
it ('matches snapshot', () => { | |
const component = renderer.create(<App />); | |
let tree = component.toJSON(); | |
expect(tree).toMatchSnapshot(); | |
}); | |
it("should render the welcome message", () => { | |
const welcomeMessage = "Welcome to React!"; | |
//'shallow' will not full-render 'react-emotion' components, so use 'mount' to test | |
const wrapper = mount(<App welcomeMessage={welcomeMessage} />); | |
const text = wrapper.find("h1").text(); | |
expect(text).toEqual(welcomeMessage); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// config-overrides.js | |
const {injectBabelPlugin} = require('react-app-rewired'); | |
module.exports = function override(config, env) { | |
//do stuff with the webpack config... | |
config = injectBabelPlugin('babel-plugin-emotion',config) | |
return config; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import PropTypes from 'prop-types'; | |
import styled from 'react-emotion'; | |
export const Container = styled.div(props =>({ | |
'text-align': props.center && 'center', | |
'@keyframes App-logo-spin': { | |
'from': { | |
'transform': 'rotate(0deg)', | |
}, | |
'to': { | |
'transform': 'rotate(360deg)', | |
}, | |
}, | |
})); | |
Container.propTypes={ | |
center: PropTypes.bool.isRequired, | |
} | |
Container.defaultProps={ | |
center: false, | |
} | |
export const Image = styled.img({ | |
'animation': 'App-logo-spin infinite 20s linear', | |
height: '80px', | |
}); | |
export const Header = styled.header({ | |
'background-color': '#222', | |
'height': '150px', | |
'padding': '20px', | |
'color': 'white', | |
}); | |
export const H1 = styled.h1({ | |
'font-size': '1.5em', | |
}); | |
export const Text = styled.p({ | |
'font-size': 'large', | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
yarn global add create-react-app | |
yarn global add @storybook/cli | |
mkdir sampleApp | |
cd sampleApp | |
dotnet new react | |
dot dev-certs https --trust | |
rm -rf ClientApp | |
create-react-app sampleApp | |
mv sampleApp ClientApp | |
cd ClientApp | |
yarn add react-router-dom prop-types emotion react-emotion | |
yarn add -D react-app-rewired babel-plugin-emotion react-test-renderer enzyme enzyme-adapter-react-16 @storybook/addon-storyshots | |
getstorybook |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "clientapp", | |
"version": "0.1.0", | |
"private": true, | |
"dependencies": { | |
"babel-plugin-emotion": "^9.1.2", | |
"emotion": "^9.1.3", | |
"prop-types": "^15.6.1", | |
"react": "^16.4.0", | |
"react-dom": "^16.4.0", | |
"react-emotion": "^9.1.3", | |
"react-router-dom": "^4.2.2", | |
"react-scripts": "1.1.4" | |
}, | |
"scripts": { | |
"start": "react-app-rewired start", | |
"build": "react-app-rewired build", | |
"test": "set NODE_ENV=test && react-app-rewired test --env=jsdom", | |
"eject": "react--app-rewired eject", | |
"storybook": "set NODE_ENV=test && start-storybook -p 9009 -s public", | |
"build-storybook": "build-storybook -s public" | |
}, | |
"devDependencies": { | |
"@storybook/addon-actions": "^3.4.6", | |
"@storybook/addon-links": "^3.4.6", | |
"@storybook/addons": "^3.4.6", | |
"@storybook/react": "^3.4.6", | |
"babel-core": "^6.26.3", | |
"babel-runtime": "^6.26.0", | |
"enzyme": "^3.3.0", | |
"enzyme-adapter-react-16": "^1.1.1", | |
"react-app-rewired": "^1.5.2", | |
"react-test-renderer": "^16.4.0" | |
}, | |
"jest": { | |
"setupTestFrameworkScriptFile": "./src/setupTests.js" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Enzyme from "enzyme"; | |
import Adapter from "enzyme-adapter-react-16"; | |
Enzyme.configure({ adapter: new Adapter() }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import initStoryshots from '@storybook/addon-storyshots'; | |
initStoryshots(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const path = require("path"); | |
const { | |
injectBabelPlugin | |
} = require('react-app-rewired'); | |
module.exports = (baseConfig, env, defaultConfig) => { | |
// Extend defaultConfig as you need. | |
// For example, add typescript loader: | |
// defaultConfig.module.rules.push({ | |
// test: /\.(ts|tsx)$/, | |
// include: path.resolve(__dirname, "../src"), | |
// loader: require.resolve("ts-loader") | |
// }); | |
// defaultConfig.resolve.extensions.push(".ts", ".tsx"); | |
defaultConfig = injectBabelPlugin('babel-plugin-emotion', defaultConfig) | |
return defaultConfig; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment