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

一：概念

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

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

一：概念

二：对于React你须要晓得

1: React根本应用

2:对于jsx

3: 对于React组件的创立

4：对于数据props和state

5:对于生命周期

6: react-router

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

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

三：搭建一个简略登陆页

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

2: React中引入antd

3:登陆页面代码

我的项目级React目录构造：

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

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

一：概念

二：对于React你须要晓得

1: React根本应用

2:对于jsx

3: 对于React组件的创立

4：对于数据props和state

5:对于生命周期

6: react-router

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

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

三：搭建一个简略登陆页

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

2: React中引入antd

3:登陆页面代码

我的项目级React目录构造：

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复