React初识——入门学习

作者: elijah777 | 来源:发表于2020-03-25 20:10 被阅读0次

React初识——入门学习
React 实践（一）
React 学习笔记（一）
React入门学习（1）
入门学习 React 一些实例
React组件学习笔记——慕课网
npx的一个日常使用
React轻松入门(一) ——初识React
React.JS 学习资源汇——持续更新
React学习(一) 初识React

React初识

一、介绍与安装

1、介绍

以上内容均参考慕课网公开课视频 https://www.imooc.com/learn/1045 基于实例的 React16 傻瓜课程

A JavaScript library for building user interfaces

官方网站 https://reactjs.org/

文章主要内容说明

主要技术内容

官网提供的脚手架 my-project
使用命令可直接获取该项目
create-react-app my-project

实现内容介绍

NameCard.js 个人名片 Props属性
LikesButton.js 点赞 State状态
DigitalClock.js 时钟生命周期
CommentBox.js 留言板输入框
CommentList.js 留言列表

2、环境安装

安装node

访问nodejs官网（https://link.jianshu.com/?t=https://nodejs.org/en/），下载安装包，直接安装

终端命令查看

 npm -v
 node -v

看是否安装成功，如果有版本号输入则安装成功

新建一个js文件，test.js , 输入下面的代码, 并保存

var http = require("http");
http.createServer(function(request, response) {
    response.writeHead(200, {
        "Content-Type" : "text/plain"
    });
    response.write("Welcome to Nodejs");
    response.end();
}).listen(8000, "127.0.0.1");
console.log("Creat server on http://127.0.0.1:8000/");

打开终端进入 test.js 所在目录，输入 test 便可以打开浏览器访问

参看链接

Mac 安装nodejs https://www.jianshu.com/p/90c01b7bd3cb

快速构建

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

安装
npm install create-react-app -g

创建项目
create-react-app my-project

启动项目 需要在项目目录下
npm start

3、快速开始

在上述项目中src目录创建文件Welcome.js


import React from 'react'

class Welcome extends React.Component {
    render() {
        const isLogin = true
        return (
            <div>
                 <h1> Hello React . </h1>
            {1+2}
            {isLogin ? <p>您已经登陆</p> : <p>请登陆</p>}
            </div>
           
        )
    }
}

export default Welcome

在src目录下的index.js中修改

添加

import Welcome from './Welcome';

// 两个参数
ReactDOM.render(<Welcome />, document.getElementById('root'));

启动项目变可以看到

image-20200313211343000.png

二、功能介绍

1、JSX语法

类似于HTML
JavaSript的语法扩展
可以使用花括号{}内嵌任何JavaScrip表达式(Expressions)
JSX 熟悉主要保留关键字

render() {
        const isLogin = true
        return (
            <div>
                 <h1> Hello React . </h1>
            {1+2}
            {isLogin ? <p>您已经登陆</p> : <p>请登陆</p>}
            </div>
           
        )
    }

babel编译

https://babeljs.io/repl#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.8.7&externalPlugins=

image-20200313180056670.png

image-20200313175455467.png

BABEL编译效果


<h1 className='inco'> hh
  <spen> BABEL </spen>
</h1>


React.createElement("h1", {
  className: "inco"
}, " hh", React.createElement("spen", null, " BABEL "));

===========================================
<div>
<h1> Hello React . </h1>
 </div>


React.createElement("div", null, React.createElement("h1", null, " Hello React . "));

ReactDOM.render(<Welcome />, document.getElementById('root'));

即实现该效果

JSX是一种语法糖——React.createElement()
ReactElement对象即经常复杂的算法转化成一个Object

2、Props/State/Forms属性和状态

Props属性——名片

属性Props示例——一张名片

Props：示例-名片

Viking

电话：1327897897
外星生物

好像印象：体育健将、单机游戏爱好者

image-20200316092116212.png

安装bootstrap样式

npm install bootstrap --save

代码示例

1、新建NameCard.js，在src目录下


import React from 'react'

class NameCard extends React.Component {
    render() {
        const { name, number, isHuman, tags } = this.props
        return (
            <div className="alert alert-success">
                <h4 className="alert-heading">{name}</h4>
                <ul>
                    <li>电话：{number}</li>
                    <li>{ isHuman ? '人类' : '外星生物'}</li>
                    <hr/>
                    <p>
                        {tags.map(
                            (tag, index) => (
                            <span className="badge badge-pill badge-primary" key={index}>{tag}</span>
                            )
                        )}

                    </p>
                </ul>
            </div>
        )
    }
}

export default NameCard

2、引入到src下的App.js


import NameCard from './components/NameCard';
const tags = ["读书🌆", "吉他🎸", "音乐🎵"]
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>

      {/* 自定义名片 */}
      <NameCard name="Elijah" number={7890567} isHuman tags={tags} />
    </div>
  );
}

3、index.js下引入App.js


import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css'

// 两个参数
ReactDOM.render(<App />, document.getElementById('root'));

展示效果

image-20200316105041647.png

优化函数：

替换NameCard.js的类为函数，该函数上声名式函数，不允许替换变量


const NameCard = (props) => {
    const { name, number, isHuman, tags } = props
    // 给name赋值会报错，只能传即进来值
    return (
        <div className="alert alert-success">
                <h4 className="alert-heading">{name}</h4>
                <ul>
                    <li>电话：{number}</li>
                    <li>{ isHuman ? '人类' : '外星生物'}</li>
                    <hr/>
                    <p>
                        好友印象：
                        {tags.map(
                            (tag, index) => (
                            <span className="badge badge-pill badge-primary" key={index}>{tag}</span>
                            )
                        )}

                    </p>
                </ul>
            </div>
    )
}

State状态——点赞

组件内部的数据可以动态改变
this.setState()是更新state的唯一途径

代码示例

通过点击，增开数字上涨

1、新建LikesButton.js 文件


import React from 'react'

class LikesButton extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            likes: 0
        }
        // 定义方法
        //this.increaseLikes = this.increaseLikes.bind(this)
        // 调用方法 onClick={this.increaseLikes}
    }

    render() {
        return (
            <div className="like-button-component">
                <button type="button" 
                    className="btn btn-outline=primary btn-lg" 
                    onClick="fun()" 
                    //onClick={this.increaseLikes}
                    //声名式函数
                    onClick={ () => {this.increaseLikes()}}
                >
                    👍{this.state.likes}
                </button>
            </div>
        )
    }

    increaseLikes() {
        // alert(777)
        // console.log(this)
        this.setState({
            likes: ++this.state.likes
        })
    }
}

// 类导出
export default LikesButton

2、引入文件到App.js


import LikesButton from './components/LikesButton';

function App() {
  return (
    <div className="App">
      <LikesButton />
    </div>
  );
}

3、展示效果

image-20200316114457701.png

生命周期——时钟

组件初始化
组件更新
组件卸载

用时钟来展示

代码示例

1、新建DigitalClock.js，在src下


import React from 'react'

class DigitalClock extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            date: new Date()
        }
    }

    render() {
        return (
            <div className="digital-clock-component jumbotron">
                <h1>
                    {this.state.date.toLocaleTimeString()}
                </h1>
            </div>
        )
    }

    // 定时器
    componentDidMount() {
        this.timer = setInterval(
            () => {
                this.setState({
                    date: new Date()
                })
            }, 1000
        )
    }

    // 清除时间
    componentWillUnmount() {
        clearInterval(this.timer)
    }

    //打印
    componentDidUpdate(currentProos, currentState) {
        console.log(currentState)
    }
}

export default DigitalClock

代码效果展示

image-20200317095311550.png

控制台打印

image-20200317095251603.png

拓展应用

componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidMount: 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

参考菜鸟教程 https://www.runoob.com/react/react-component-life-cycle.html

Forms表单——留言框

表单元素和其他DOM元素的区别
Controlled Components —— 受控组件

代码示例

CommentBox.js


// 留言框 form 表单
import React from 'react'

class CommentBox extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: ""
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleChange(event) {
        this.setState({
            value: event.target.value
        })
    }

    handleSubmit(event) {
        alert(this.state.value)
        // 重新提交之后页面跳转
        event.preventDefault()
    }

    render() {
        return (
            <form className="p-5"  onSubmit={this.handleSubmit}>
                <div className="form-group">
                    <label>留言内容</label>
                    <input type="text" className="form-control"
                     placeholder="请输入内容" 
                     onChange={this.handleChange}
                     value={this.state.value} />
                </div>
                <button type="submit" className="btn btn-primary">
                    留言
                </button>
            </form>
        )
    }
}

export default CommentBox

更改点击事件方式


  handleSubmit(event) {
        alert(this.textInput.value)
        //   alert(this.state.value)  onChange
        // 重新提交之后页面跳转
        event.preventDefault()
    }

    render() {
        return (
            <form className="p-5"  onSubmit={this.handleSubmit}>
                <div className="form-group">
                    <label>留言内容</label>
                    <input type="text" className="form-control"
                     placeholder="请输入内容" 
                    //  onChange={this.handleChange} value={this.state.value}
                    ref={(textValue) => this.textInput = textValue}
                     
                      />
                </div>
                <button type="submit" className="btn btn-primary">
                    留言
                </button>

            </form>

        )
    }

image-20200319114549115.png

3、综合实例-留言板

image-20200319115239811.png

[]:

状态提升与单向数据流

代码展示

评论列表新建CommentList.js


import React from 'react'

const CommentList =({comments}) => {
    return (
        <div className="comment-list-component">
            <label>评论列表</label>
            <ur className="list-group mb-3">
                {
                    comments.map(
                    (comment, index) => <li key={index} className="list-group-item">{comment}</li>
                    )
                }
            </ur>
        </div>
    )
}

export default CommentList

留言组件


// 留言框 form 表单
import React from 'react'

class CommentBox extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: ""
        }
       // this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleChange(event) {
        this.setState({
            value: event.target.value
        })
    }

    handleSubmit(event) {
        //alert(this.textInput.value)
        //   alert(this.state.value)  onChange
        // 外部传入数据
        this.props.onAddcomment(this.textInput.value)
        // 重新提交之后页面跳转
        event.preventDefault()
        //留言成功之后，清除留言框数据
        
    }

    render() {
        return (
            <form className="p-5"  onSubmit={this.handleSubmit}>
                <div className="form-group">
                    <label>留言内容</label>
                    <input type="text" className="form-control"
                     placeholder="请输入内容" 
                    //  onChange={this.handleChange} value={this.state.value}
                    ref={(textValue) => this.textInput = textValue}
                      />
                </div>
                <button type="submit" className="btn btn-primary">
                    留言
                </button>
                <p>已有{this.props.commentsLength}条评论</p>

            </form>

        )
    }
}

export default CommentBox

主页面 App.js


import React from 'react'
import LikesButton from './components/LikesButton';
import DigitalClock from './components/DigitalClock';
import CommentBox from './components/CommentBox';
import CommentList from './components/CommentList';


class Welcome extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
          comments: ["my frist reply"]
        }
        this.addComment = this.addComment.bind(this)
    }

    addComment(comment) {
        this.setState(
            {
                // 将新的commen添加到comments数组中
                comments: [...this.state.comments, comment]
            }
        )
    }

    render() {
        const isLogin = true
        const test = <h1> Hello React </h1>
        console.log(test)
        const {comments} = this.state
        return (
            <div>
             {/* 时间显示 */}
            <DigitalClock />

            {/* 评论列表 */}
            <CommentList comments={comments}/>

            {/* 留言板 */}
            <CommentBox
             commentsLength={comments.length}
             onAddcomment={this.addComment}
             />
            </div>
           
        )
    }
}

export default Welcome

效果展示

image-20200325111036817.png

React 开发思想以及和其他思想的异同

状态提升（lifting state up）
自上而下的数据流（top-down data flow ）
和双向绑定的区别

4、Context

Context是什么

Props属性是由上到下单向传递的
Context提供了在组件中共享此类值的方法

Context使用

设计目的是共享那些对于组件来说全局的数据
不要仅仅为了避免在几个层级下的组件传递props而实用context

使用props传递属性可能会设计到多文件直接的数据流动，甚至有些文件不需要这个属性如语言，用户信息等，则采用context共享数据。

context实例 ——样式选择器

深色主题与浅色主题的互换

代码示例

选择颜色

新建theme-context.js 在src下


import React from 'react'
const ThemeContext = React.createContext()
export default ThemeContext

颜色展示组件

ThemedBar.js


import React from 'react'
import ThemeContext from '../theme-context'

const ThemeBar = () => {
    return (
        <ThemeContext.Consumer>
            {
                theme => {
                    return(
                        <div className="alert mt=5" style={ {backgroundColor: theme.bgColor, color: theme.color}}>
                            样式区域
                            <button className={theme.classNames}>样式按钮🔘</button>
                        </div>
                    )
                }           
            }
        </ThemeContext.Consumer>
        
    )
}

export default ThemeBar

面板

APP.js


import React from 'react'
import DigitalClock from './components/DigitalClock';
import ThemeContext from './theme-context';
import ThemeBar from './components/ThemedBar';

const themes = {
    light: {
        classNames : 'btn btn-primary',
        bgColor: '#eeeeee',
        color: '#000'
    },
    dark: {
        classNames : 'btn btn-light',
        bgColor: '#222222',
        color: '#fff'
    }
}

class ContextColor extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
          theme: 'light'
        }
        this.changeTheme = this.changeTheme.bind(this)
    }

    changeTheme(theme) {
        this.setState(
            {
                theme
            }
        )
    }

    render() {
        
        return (
            <div>

            {/* 主题切换 */}
            <ThemeContext.Provider value={themes[this.state.theme]}>

                {/* 时间显示 */}
                <DigitalClock />

                <div className="App">
                    <a href="#theme-switcher" className="btn btn-light" onClick={() => {this.changeTheme('light')}} > 浅色主题 </a>
                    <a href="#theme-switcher" className="btn btn-seconday" onClick={() => {this.changeTheme('dark')}} > 深色主题 </a>
                </div>
                <ThemeBar />
            </ThemeContext.Provider>
           
            </div>
           
        )
    }
}

export default ContextColor

页面展示

image-20200325180335495.png

image-20200325180351308.png

总结

简单的react入门知识，对于后端技术或者初学者是个不错的选择。比较现在只会html和js已经不行了。

2020/03/25于许昌

React初识——入门学习
React初识一、介绍与安装 1、介绍以上内容均参考慕课网公开课视频 https://www.imooc.co...
React 实践（一）
参考：《React 入门实例教程--阮一峰》、《React 学习教程--众成翻译》。React 框架入门学习摘录。...
React 学习笔记（一）
笔记参考：阮一峰react入门教程一、初识React 1.特点基于组件，组件里面有自己的state，用组件来做...
React入门学习（1）
先介绍几个学习React入门的博客:1.React 入门实例教程http://www.ruanyifeng.com...
入门学习 React 一些实例
这是几个入门学习 React 的小 Demo，帮助自己学习了解 React 的运行机制，结合 React官方文档，...
React组件学习笔记——慕课网
React组件学习笔记——慕课网 React组件慕课网视频：传送门第1章初识React 1.1 React基本...
npx的一个日常使用
初识npx 学习 react-creact-app 的的时候 npx create-react-app my-re...
React轻松入门(一) ——初识React
发布自Kindem的博客，欢迎大家转载，但是要注意注明出处本文开始前，作者默认你已经拥有html,css,js和...
React.JS 学习资源汇——持续更新
React 学习目标能够熟练运用React框架了解React组建的生命周期入门学习官方文档英文原版http...
React学习(一) 初识React
React介绍 React是一个声明式的，高效的，并且灵活的用于构建用户界面的 JavaScript 库。学...

React初识——入门学习

React初识

一、介绍与安装

1、介绍

文章主要内容说明

主要技术内容

实现内容介绍

2、环境安装

安装node

快速构建

3、快速开始

二、功能介绍

1、JSX语法

2、Props/State/Forms属性和状态

Props属性——名片

属性Props示例——一张名片

代码示例

1、新建NameCard.js，在src目录下

2、引入到src下的App.js

3、index.js下引入App.js

展示效果

优化函数：

State状态——点赞

代码示例

1、新建LikesButton.js 文件

2、引入文件到App.js

3、展示效果

生命周期——时钟

代码示例

1、新建DigitalClock.js，在src下

代码效果展示

拓展应用

Forms表单——留言框

代码示例

CommentBox.js

3、综合实例-留言板

代码展示

评论列表 新建CommentList.js

留言组件

主页面 App.js

效果展示

4、Context

Context是什么

Context使用

context实例 ——样式选择器

代码示例

选择颜色

颜色展示组件

面板

页面展示

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

评论列表新建CommentList.js