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

41次阅读

共计 5647 个字符,预计需要花费 15 分钟才能阅读完成。

一:概念

  • 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 的了解和使用就须要你去真正的我的项目中去磨难了。

正文完
 0