快速创建react web 单页面应用

1.用react-cli创建react项目
   https://github.com/facebook/create-react-app
   npx create-react-app my-app
   cd my-app
   npm start
   注意：由于react随版本变化比较大，所以参考多个教程经验的时候，需要注意一下react的版本，掺杂参考会一直报错哦。
   本demo的各工具版本信息
   {
   "name": "my-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
   "element-react": "^1.4.21",
   "element-theme-default": "^1.4.13",
   "jsxhint": "^0.15.1",
   "react": "^16.5.2",
   "react-dom": "^16.5.2",
   "react-router-dom": "^4.3.1",
   "react-scripts": "2.0.4"
   },
   "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
   },
   "eslintConfig": {
   "extends": "react-app"
   },
   "browserslist": [
   ">0.2%",
   "not dead",
   "not ie <= 11",
   "not op_mini all"
   ]
   }
2.单页面应用需要借助路由来完成页面跳转，react-router
   npm install react-router --save 这是安装方法
   https://react-guide.github.io/react-router-cn/ 这是react-router的官方api
   跳转页面用<Link></Link>标签，要放在<Router></Router>标签里面才能用，而且Router标签只能有一个子节点哦，在写导航的时候，导航源和目标页面不在一个Router节点里面不会刷新页面哦，只会改变url的

3.你需要操作页面的DOM结构，需要用到react-dom
   这是安装方法，据说两种安装方法都行，亲测第一种好用，第二种没试过
    npm install --save react-dom
    npm i -S react-dom
   这是用法
   import ReactDOM from 'react-dom';
   var menu = document.getElementById('side-menu').firstChild
   ReactDOM.findDOMNode(menu).style.height = 'calc(100vh - 64px)'

4.你需要一套UI模板来美化页面，本demo里用的是element ui，也有很多用ant Design的
   npm i element-react --save
   npm install element-theme-default --save
   element ui这就安装完了，接着就在index.js里面把它引入进去就好了
   import 'element-theme-default';
   import {Button, Layout, Menu, Dropdown} from 'element-react';
   https://elemefe.github.io/element-react/#/zh-CN/quick-start 这是element ui react版本的api
   https://ant.design/index-cn 这是ant Design的api

5.你会用到组件的
   class BasicView extends React.Component {
       constructor(props) {
   super(props)
   this.state = {
   current: ''
   }
   }
   不写这一堆不能做到组件间传值哦

       componentDidMount () {
           console.log('组件中的方法卸载这个位置')
       }

       render () {
           return (
               <div></div>
           )
       }
   }

如果是一个组件对应一个单独的js文件的话，记得这样写 export default class BasicView extends React.Component {}

6.react用到了jsx的语法，你需要设置一下你的编辑器，来实现代码的高亮显示
   ctrl + shift + p
   输入install
   输入babel
   View –> Syntax –> open context with current extension… –> Babel –> Javascript(Babel)
   视图 -> 语法 -> 第一个 -> Babel -> Javascript(Babel)
   就好了

7.react的生命周期啊，面试时候会有人问你的
   三个状态: {
       Mounting：已插入真实 DOM,
       Updating：正在被重新渲染,
       Unmounting：已移出真实 DOM
   }
   七个方法: {
       componentWillMount 在渲染前调用,在客户端也在服务端,

componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问, 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI),

componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用,

shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用,

componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用,

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用,

componentWillUnmount在组件从 DOM 中移除之前立刻被调用
}

8.摆个demo，整不明白的照着鼓秋去吧

https://github.com/tengxi5290/react-demo.git

快速创建react web 单页面应用

猜你喜欢