You need to have a newer version of Node installed, so get started.
- Scaffolding tool
create-react-app
npm install -g create-react-app
create-react-app react-web-demo
cd react-web-demo
yarn start
Copy the codeThe command above, then open http://localhost:3000/ to check the app, you can see
-
Enable custom configuration yarn eject After the create-react-app react-web-demo command, four official commands are provided. Yarn start: Starts the service and views the service in the browser. Yarn Build: Build an application program that can be deployed and published. Yanr ject: Enable custom configuration. Using the IDE to open the project directory, the structure will not be explained too much, as follows:
As a basic configuration, it can meet most development requirements, but it needs to add some custom configurations, such as the use of less, etc.
yarn ejectTurn on custom, irreversible. You can see it a lotscriptandconfigDirectory. -
Adding less support starts with installing the required modules for development
npm install --save-dev less
npm install --save-dev less-loader
Copy the codeThen in the config/webpack config. Dev. Js to do the following changes:
{
// modify
test: [/\.css$/, /\.less$/],
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'> 1%'.'last 4 versions'.'Firefox ESR'.'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, }, //add { loader: require.resolve('less-loader'), // compiles Less to CSS } ], },Copy the codeIn the config/webpack config. Prod. Js to do the following changes:
{
// modify
test: /\.(css|less)$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve('style-loader'),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true.sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'> 1%'.'last 4 versions'.'Firefox ESR'.'not ie < 9', // React doesn't support IE8 anyway ], flexbox: 'no-2009', }), ], }, }, { //add loader: require.resolve('less-loader'), } ], }, extractTextPluginOptions ) ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
Copy the codeThe following tests whether the addition is successful. Create a new Component folder under the SRC directory and place the child components, index.js and index.less, as the root components.
//index.js
import React from 'react'
import './index.less'
const Home = () => {
return(
<div className='Home'>
<div>react demo</div>
<div>react demo</div>
<div>react demo</div>
</div>
);
}
export default Home
Copy the code//index.less
.Home {
background: beige;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
}
Copy the codeModify the App. Js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css'
import Home from './component/index'
class App extends Component {
render() {
return (
<div className="App"> <Home /> </div> ); }}export default App;
Copy the codeIf the following figure is displayed, the configuration is successful.
- Develop using ANTD and add the load on demand configuration.
npm install --save antd
npm install babel-plugin-import --save-dev
Copy the codeModify the following files:
//webpack.config.dev.js
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
//add
plugins: [["import", { "libraryName": "antd"."style": true}]]}},Copy the code//webpack.config.prod.js
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
compact: true,
plugins: [["import", { "libraryName": "antd"."style": true}]]}},Copy the codeTest whether the configuration is successful. Modify the index.js file as follows:
import React from 'react'
import './index.less'
import {Button} from 'antd'
const Home = () => {
return(
<div className='Home'>
<Button type="primary">Button</Button>
<Button type="primary">Button</Button>
<Button type="primary">Button</Button>
</div>
);
}
export default Home
Copy the codeIf the following information is displayed on the browser, the configuration is successful.
At last, run NPM run-script build to generate app, and check whether the browser displays the same results as prompted http://localhost:5000/. If yes, the configuration is successful. Note: the browser may have a cache at this stage, it is recommended to clear the browser cache after build
Configuration is complete. See another article on mobx usage.
As mentioned last time, there is another article about RN + MOBx, some of which may not be appropriate.
Story and mobx
Too much content is not described here, please see the link below (can know what and why, very short) how to understand Facebook flux application architecture? React but not Redux. How to understand Redux? MobX vs Redux: Comparing the Undefined Paradigms-React Conf 2017 Notes
(For redux, see Redux 101: React-redux.)
mobx + mobx-react
npm install mobx
npm install mobx-react
Copy the codeYou can use mobx development at this point, and then configure to enable the Decorators decorator.
yarn add babel-plugin-transform-decorators-legacy -D
Copy the codeModify the following configuration in package.json:
"babel": {
"plugins": [
"transform-decorators-legacy"]."presets": [
"react-app"]},Copy the codeThis can be developed with easy to understand decorators. Modify the following files:
//component/index.js
const Home = observer( () => {
return (
<div className='Home'>
<div>{startNum.startNum}</div>
<div>{startNum.startNum}</div>
<div className="buttons">
<Button type="primary" className="btn" onClick={() => {
startNum.inc()
}}>inc</Button>
<Button type="primary" className="btn" onClick={() => {
startNum.dec()
}}>dec</Button>
<Button type="primary" className="btn"onClick={() => startNum.reset()}>reset</Button> </div> </div> ); })export default Home
Copy the code//component/index.less .Home { margin-top: 100px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; .buttons { display: flex; flex-direction: row; margin-top: 20px; .btn { margin: 0 10px; }}}Copy the codeCreate a new mobx/index.js file in the SRC directory as the basic store data source.
class DemoStore {
@observable startNum = 10
@action
inc() { this.startNum += 1 }
@action
dec() { this.startNum -= 1}
@action
reset() { this.startNum = 0 }
}
export default new DemoStore()
Copy the codeAfter yarn start, open the browser. The following figure is displayed and the configuration is successful.
See the official documentation for other uses of Mobx. As the project gets bigger, how to combine mobx’s stores is also something I’m currently working on.