乐趣区

关于javascript:react基础知识和搭建一个简单的登陆页面

jiezi

一：概念

  • React 起源于 Facebook 的外部我的项目，因为该公司对市场上所有 JavaScript MVC 框架，都不称心，就决定本人写一套，用来架设 Instagram 的网站。做进去当前，发现这套货色很好用，就在 2013 年 5 月开源了。
  • 用来构建 UI 的 JavaScript 库
  • React 不是一个 MVC 框架，仅仅是视图（V）层的库

二：对于 React 你须要晓得

1: React 根本应用

  • 装置：npm i -S react react-dom
  • react：react 是 React 库的入口点
  • react-dom：提供了针对 DOM 的办法，比方：把创立的虚构 DOM，渲染到页面上
// 1. 导入 react
import React from 'react'
import ReactDOM from 'react-dom'

// 2. 创立 虚构 DOM
// 参数 1：元素名称  参数 2：元素属性对象(null 示意无)  参数 3：以后元素的子元素 string||createElement() 的返回值
const divVD = React.createElement('div', {title: 'hello react'}, 'Hello React！！！')

// 3. 渲染
// 参数 1：虚构 dom 对象  参数 2：dom 对象示意渲染到哪个元素内 参数 3：回调函数
ReactDOM.render(divVD, document.getElementById('app'))

通过下面你就能实现一个 React 的根本渲染。

2: 对于 jsx

因为 createElement()形式，代码编写不敌对，太简单，所以 React 官网为咱们提供了 jsx.

根本应用：

  • 留神：JSX 语法，最终会被编译为 createElement() 办法
  • 举荐：应用 JSX 的形式创立组件
  • JSX – JavaScript XML
  • 装置：npm i -D babel-preset-react（依赖与：babel-core/babel-loader）
/* 1 在 .babelrc 开启 babel 对 JSX 的转换 */
{
  "presets": ["env", "react"]
}

/* 2 webpack.config.js */
module: [
  rules: [{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
  ]
]

/* 3 在 js 文件中 应用 JSX */
const dv = (<div title="题目" className="cls container">Hello JSX!</div>)

/* 4 渲染 JSX 到页面中 */
ReactDOM.render(dv, document.getElementById('app'))

留神：jsx 的代码会最终被编译成 createElement()

3: 对于 React 组件的创立

  • 通过 JS 函数 创立（无状态组件）: 仅仅是为了展现数据，那么此时就能够应用 函数组件
  • 通过 class 创立（有状态组件）: 有肯定业务逻辑，须要操作数据，那么就须要应用 class 创立组件
  • Hooks（高阶组件）: 终极合体，又是无状态组件和能操作数据

应用函数创立一个组件（无状态组件）

function Welcome(props) {
  return (
    // 此处正文的写法 
    <div className="shopping-list">
      {/* 此处 正文的写法 必须要 {} 包裹 */}
      <h1>Shopping List for {props.name}</h1>
      <ul>
        <li>Instagram</li>
        <li>WhatsApp</li>
      </ul>
    </div>
  )
}

ReactDOM.render(
  <Welcome name="jack" />,
  document.getElementById('app')
)

应用 Class 创立一个组件（有状态组件）

//  react 对象继承字 React.Component
class ShoppingList extends React.Component {constructor(props) {super(props)
  }
  // class 创立的组件中 必须有 rander 办法 且显示 return 一个 react 对象或者 null
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
        </ul>
      </div>
    )
  }
}

创立一个高阶组件

4：对于数据 props 和 state

  • props: 给组件传递数据，个别用在父子组件之间
function Welcome(props) {
  // 返回的 react 元素中必须只有一个根元素
  return <div>hello, {props.name}</div>
}

class Welcome extends React.Component {constructor(props) {super(props)
  }

  render() {return <h1>Hello, {this.props.name}</h1>
  }
}
  • state: 用来给组件提供组件外部应用的数据
class Hello extends React.Component {constructor() {super()

    this.state = {gender: 'male'}
  }

  render() {
    return (<div> 性别：{ this.state.gender}</div>
    )
  }
}
  • 受控组件和非受控组件

对于 state 和 props 又繁殖出两个概念，受控组件和非受控组件。相似于 props 这种，他所有的状态都是来自于内部，那么他的显示则齐全由内部感觉，咱们能够说他是一个受控组件。像 state 这种，他有他本人组件的状态，并不受内部的管制，所以咱们能够认为他是一个非受控组件

  • setState

如何更新 state 呢，间接更改 state 其实能够的，不过这样子无奈触发组件视图的更新机制。所以应用setState()api。

import * as React from 'react'

class Child extends React.Component {
  state = {name: '小明'}

  constructor(props) {super(props) 
     this.update = this.update.bind(this)
  }

  update(e) {
      this.setState({name: e.target.value})
  }

  render() {
    return (<div>
      <input onChange={this.update} value={this.state.name}/>
    </div>)
  }
}
  • props 校验

React 为咱们提供了一个对于 props 格局验证的插件：prop-types

// 引入模块
import PropTypes from 'prop-types'

// ... 以下代码是类的动态属性：// propTypes 动态属性的名称是固定的！！！static propTypes = {
  initCount: PropTypes.number, // 规定属性的类型
  initAge: PropTypes.number.isRequired // 规定属性的类型，且规定为必传字段
}

5: 对于生命周期

一个组件从开始到最初沦亡所经验的各种状态，就是一个组件的生命周期

React 生命周期包含：创立阶段（Mounting）、运行和交互阶段（Updating）、卸载阶段（Unmounting）

一下是生命周期的所有钩子函数（*代表罕用的）：

创立阶段：

  • constructor()：获取 props，初始化 state
  • componentWillMount()：组件被挂载到页面之前调用，其在 render()之前被调用，因而在这办法里同步地设置状态将不会触发重渲染。*
  • render()：渲染组件到页面中，无奈获取页面中的 DOM 对象
  • componentDidMount()：组件曾经挂载到页面中 *

运行阶段：

  • componentWillReceiveProps()：组件承受到新的 props 前触发这个办法
  • shouldComponentUpdate()：依据这个办法的返回值决定是否从新渲染组件，返回 true 从新渲染，否则不渲染
  • componentWillUpdate()：组件将要更新 *
  • render()：从新渲染组件，与 Mounting 阶段的 render 是同一个函数
  • componentDidUpdate()：组件曾经被更新 *

卸载阶段：

  • componentWillUnmount()：在卸载组件的时候，执行清理工作 *

6: react-router

根本应用：

// 1 引入
import {
  HashRouter as Router,
  Link, Route
} from 'react-router-dom'

// 2 应用 <Router>
<Router>
  <Switch>
    // exact 示意：相对匹配（齐全匹配，只匹配：/）<Route exact path="/" component={HomeContainer}></Route>
    <Route path="/movie" component={MovieContainer}></Route>
    <Route path="/about" component={AboutContainer}></Route>
  </Switch>
</Router>
  • 对于路由传参
<Route path="/movie/:movieType"></Route>
  • 路由跳转
this.props.history.push('/movie/movieDetail/' + movieId)

7: 对于 Redux(这个不说了，货色太多，有工夫单写一篇介绍这个的博客)

好了，对于 React 的常识就差不太多了，有时候学习一个框架就是这么简略。

三：搭建一个简略登陆页

1: 应用 create-react-app 疾速构建 React 开发环境

npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start

我的项目运行起来之后，你会失去上面的界面。

2: React 中引入 antd

antd 地址：https://ant.design/index-cn

第一步：npm i antd --save
第二步：npm i react-app-rewired -D 后更改 package.json 文件

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

第三步：装置按需加载插件 npm install babel-plugin-import
第四步：npm install customize-cra --save
第四步：在我的项目根目录创立一个 config-overrides.js 用于批改默认配置。

   const {
      override,
     fixBabelImports
   } = require("customize-cra");
   
   module.exports = override(
     fixBabelImports("babel-plugin-import", {
       libraryName: "antd",
       style: "css"
     })
   );

3: 登陆页面代码

革新 app.js 为如下代码

import React from "react";
import "./App.css";

import {Form, Input, Button, Card} from 'antd';

const layout = {
  labelCol: {span: 8,},
  wrapperCol: {span: 16,},
};

const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const App = () => {
  // 提交表单且数据验证胜利后回调事件
  const onFinish = values => {console.log('Success:', values);
  };

  // 提交表单且数据验证失败后回调事件
  const onFinishFailed = errorInfo => {console.log('Failed:', errorInfo);
  };

  return (
  <Card title="登陆页面" className="login-form">
    <Form
      {...layout}
      name="basic"
      initialValues={{remember: true,}}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="用户名"
        name="用户名"
        rules={[
          {
            required: true,
            message: '请输出用户名',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="明码"
        name="明码"
        rules={[
          {
            required: true,
            message: '请输出明码',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          登陆
        </Button>
      </Form.Item>
    </Form>
  </Card>
  );
};

export default App

我的项目级 React 目录构造：

至此，学会下面的货色尽管只是入门，然而曾经能够去上手写我的项目了，更多对于 React 的了解和使用就须要你去真正的我的项目中去磨难了。

退出移动版