凯发真人娱乐

[react]react创建app,路由,mobx 全教程 -凯发真人娱乐

2023-08-17,,

1、app,

npx create-react-app my-app

cmd

copy

2、进入项目目录

cd my-app

cmd

copy

3、启用配置文件(默认是不开启配置文件的)

yarn eject

cmd

copy

这时候会报错,意思大概是你要把之前的文件最好提交一下git

git add --all
git commit -m 'up'

cmd

copy

yarn eject

cmd

copy

4、提示 成功

success saved lockfile.
ejected successfully!

cmd

copy

5、启动项目(不启动配置文件也能启项目,但最好把配置打开,这样你可以更多的扩展)

这时候报错:cannot find module xxxx 基本的意思就是什么什么包 没有。

以前是没有这个错的,现在估计新加的,大概意思是新找开了配置(eject)后再需要安装一下

npm install

cmd

copy

此命令是根据package.json重新安装一下包,此命令,如果是别人的项目没有node_modules 是无法启动项目,需要npm install 后 就可以正常打开别人的项目,这主要是因为node_modules太大,一般都不会git上传。

这个时间有点久,可以把npm 改成cpm 自行(搜索,百度、bing、谷歌啥都行)

yarn start

cmd

copy

compiled successfully!
you can now view my-app in the browser.
  local:            http://localhost:3000/
on your network: http://192.168.50.143:3000/ note that the development build is not optimized.
to create a production build, use yarn build.

tip

copy

ok.

接下来,是sass安装,现在没有直接写css的了,(ps:less,postcss都行,此文介绍的是sass)

1、sass 安装

yarn add node-sass-chokidar

cmd

copy

找到package.json中的scripts位置 替换成以下代码

"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "node scripts/start.js",
"start": "npm-run-all -p watch-css start-js",
"build-js": "node scripts/build.js",
"build": "npm-run-all build-css build-js",
"test": "node scripts/test.js --env=jsdom"
},

node

copy

进行src目录,mkdir styles vi index.scss(就是sass 有两个后缀,就是写法不同,我们常用scss后缀)

进行src/index.js

增加以下代码(在原样式文件下)

import './index.css';(原样式文件)
import './styles/index.css';

es6

copy

warn:/bin/sh: npm-run-all: command not found

yarn add npm-run-all
yarn start

cmd

copy

index.scss 增加以下代码

body {
background: red;
}

css

copy

其实这时候你以已经发现了index.scss 一个并列文件index.css 而我们上面import时也是index.css 这就是编译后的文件,虽然写的是scss 但引入的还是css

没看出效果,你需要把原来的app.css 和index.css 的代码注释掉就可以看到

此时sass 已生效。

报错 app.js:5 uncaught referenceerror: react is not defined
在app.js 中添加如下代码
import react, {component} from 'react';

javascript

copy

:router

ctrl c 终止任务

1、添加路由模块

yarn add react-router-dom

cmd

copy

2、添加路由router.jsx(react 中基本都是jsx后缀文件)

代码内容:

import react, { component } from 'react';
import reactdom from 'react-dom';
import { browserrouter, hashrouter} from 'react-router-dom';
import app from './app.js'; const router = () => ( )
export default router;

react

copy

3、react-hot-loader 凯发真人娱乐官网解释

react hot loader is a plugin for webpack that allows instantaneous live refresh without losing state while editing react components.

按我们理解就是自动更新的

yarn add react-hot-loader

cmd

copy

4、app.js

import react, { component } from 'react';
import { hot } from 'react-hot-loader';
import { withrouter,navlink,switch,redirect,route} from 'react-router-dom';
import home from './views/home/';
import otc from './views/otc/';
class app extends component {
constructor(props) {
super(props);
}
componentdidmount(){
}
render() {
// return this.props.children;
return ( )
}
} export default hot(module)(app);

react

copy

5、index.js

import react from 'react';
import reactdom from 'react-dom';
import './styles/index.css';
import router from './router';
import * as serviceworker from './serviceworker'; reactdom.render(, document.getelementbyid('root'));
// if you want your app to work offline and load faster, you can change
// unregister() to register() below. note this comes with some pitfalls.
// learn more about service workers: http://bit.ly/cra-pwa
serviceworker.unregister();

react

copy

6、mkdir views/home views/otc

views/home/index.jsx

import react, { component } from 'react';
import { withrouter,navlink} from 'react-router-dom';
class home extends component {
constructor(props) {
super(props);
}
render() {
return ( home
otc )
}
}
export default home;

react

copy

views/otc/index.jsx

import react, { component } from 'react';
import { withrouter,navlink} from 'react-router-dom';
class home extends component {
constructor(props) {
super(props);
}
render() {
return ( otc
home )
}
}
export default home;
home 就是路由切换的意思

react

copy

8、yarn start

稍后贴github 代码地址(https://github.com/llqfront/react/tree/master/my-app1 为源码 。稍后上传my-app 为完整)希望你是把按步骤操作一次,没有的代码上github 上取,

mobx 简单、可扩展的状态管理(https://cn.mobx.js.org/)

1、需要安装

yarn add mobx
yarn add mobx-react

cmd

copy

2、需要处理错误,错误代码如下(意思就是不支持这个装饰符)

syntaxerror: /users/hello/workspace/fe.youdeal.io/app/my-app/src/store/otc.js: support for the experimental syntax 'decorators-legacy' isn't currently enabled (3:5):
  1 | import {observable, computed, action} from 'mobx';
2 | class store {
> 3 | @observable tradecfg = {
| ^
4 | 'sadf':'sadf'
5 | };
6 | @observable baseinfo = {};

tip

copy

还有挺爱报错的,可算解决了;

解决参考地址:

1、https://babeljs.io/docs/en/babel-plugin-proposal-decorators

2、https://github.com/babel/babel/issues/8562

3、https://github.com/facebook/react-native/issues/21320

4、https://github.com/mobxjs/mobx-react/issues/506

5、https://github.com/zeit/next.js/issues/5231

6、https://github.com/ant-design/ant-design-pro/issues/2043

7、https://segmentfault.com/q/1010000016473651

这个问题以前是很好解决,现在有点问题,当然不是最优,但也可以。

3、.babelrc 文件 与src 并列

{
"presets": [
["@babel/preset-react"]
],
"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
yarn add @babel/plugin-proposal-decorators
yarn add @babel/plugin-proposal-class-properties
yarn add mobx
yarn add mobx-react

node

copy

文件都有改动,据体看源码(router.jsx app.js home otc 都有修改 就不贴出来了)

当然当然 使用mobx 做项目是非常方便的

yarn start

https://github.com/llqfront/react/tree/master/my-app

mobx 会有以下几个问题

第一是装饰符,那就使用.babelrc(对应模块安装)

当使用.babelrc 后 出提示mobx 找不到,再把mobx mobx-react 安装一下就行了 要打不开,

[react]react创建app,路由,mobx 全教程的相关教程结束。

网站地图