Styled React Boilerplate
⚛️
��
Minimal & Modern Boilerplate for building apps with React & styled-components
Highlights
- Less complex than create-react-app
- Features styled-components
- Uses React Hooks
- Includes optimized Webpack & Babel configuration
- Perfect Lighthouse score
- Non-blocking CSS & fonts loading
- Friendly errors & warnings
- Ensures clean code with xo & stylelint
- Normalizes default browser style with modern-normalize
- HTML template with social media meta tags
- Targets the latest browsers
- Works offline
- Preconfigured React Refresh using react-refresh-webpack-plugin
File Tree
├── public # Folder for static assets
│ ├── favicon.png # Favicon
│ └── index.html # HTML template
├── src # Main folder
│ ├── components # Subfolder with components
│ │ ├── button.js
│ │ └── container.js
│ │ └── counter.js
│ │ └── header.js
│ │ └── image.js
│ └── app.js # Main page file
│ └── index.js # React DOM, service worker config
├── webpack.config.js # Webpack config
├── babel.config.js # Babel config
Usage
# Install dependencies
$ npm install
# Start webpack-dev-server at port 8080
$ npm start
# Run linters
$ npm test
# Build app for production (gets output in the 'dist' directory)
$ npm run build
FAQ
How to deploy my app?
I recommend to use either Vercel or Netlify for hosting your site.
How to add & use static assets (ex. images)?
Place them in the public directory in the root of the project. You can then use them like in the example below:
// Import files from the `public` directory
import imgSrc from '../../public/favicon.png';
// Then you can reference it like so:
const Image = () => (
<img src={imgSrc} alt="⚡"/>
);
Check out the Image component for a live example.
TODO
- PWA
- Testing
- module & nomodule support
Related
License
MIT
-
react context Let's use the React Context API to change theme in an app! 让我们使用React Context API更改应用程序中的主题！ 但是首先，一些背景 ！ ？ (But first, some context! ?) Ok terrible puns aside let's have a look at what t
-
我最近开始将样式化组件与React一起使用，我不确定我是否正确地处理了一个不断重复出现的特定情况。 假设我有一个非常简单的组件，比如，它只需要非常多的样式和一些给定的内容。我现在要处理的事情如下： 我发现首先定义基本组件，如，只针对样式，然后再定义另一个组件，它接受道具并使用该样式组件。 有没有更短的方法只在一个组件中完成这两个任务？我希望能有一些像... ...但那似乎不起作用。
-
什么是最好的方式有3种风格类型的基础上的道具？
-
问题内容： 我在我的应用程序中使用样式组件在CodeSandbox中。请参考以下网址 https://lrn6vmq297.sse.codesandbox.io/ 每当我进行一些更改时，控制台都会说。 className 而且UI无法按预期呈现。有人知道我为什么遇到这个问题吗？请查看上面的网址。 谢谢 问题答案： 基本上，您需要通过或生成的解构，然后将其手动应用于要设置样式的组件。否则，您不会将应
-
给UILabel的文字加上各种各样的艺术字体效果，包括阴影（内阴影和外阴影）、渐变色彩、彩虹、浮雕效果等等，而且使用十分简单，能够完全代替UILabel。是一个功能十分强大又简单易用的类库。 [Code4App.com]
-
自定义PageControl各种样式，包括形状、大小、颜色、文字等等。 [Code4App.com]
-
styled-class是一个CSS-in-JS库 为什么要在JavaScript里写CSS？ 避免命名全局污染 条件和动态样式（比如选择主题色之类的） 在框架层面进行限制或补充（比如补全供应商前缀），避免业务人员使用奇技淫巧 styled-class的基本用法 import {styled} from "styled-class";@styledclass Div1Style{ backgrou