React的入门

最新推荐文章于 2024-07-29 15:37:55 发布

xuxu_qkz

最新推荐文章于 2024-07-29 15:37:55 发布

阅读量223

点赞数

分类专栏： react 文章标签：前端框架

本文链接：https://blog.csdn.net/xuxu_qkz/article/details/78608061

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

React 入门

1.react是什么?
是一个用于构造前端界面的JS框架,起源于Facebook,基于组件开发,适用于大型项目(功能多/流量大/用户多)

与Vue ,Angular并称为前端三大框架

2.安装React

方式一:

script标签引入

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>

http://www.reactjs.cn/react/downloads.html
方式二:

使用npm全手动安装
1、新建一个项目（或已有项目）
2、npm init 创建package.json配置
3、安装react需要的依赖包和babel环境
cnpm install –save react react-dom babel-preset-react babel-preset-es2015 babel-loader babel-core

推荐：
cnpm install –save react@15.3.1 react-dom@15.3.1 babel-preset-react babel-preset-es2015 babel-loader babel-core

4、创建babel 配置文件 .babelrc
{
“presets”: [“react”,”babel-preset-es2015”] //react和es2015编译
}

新建一个js文件

//使用npm导入包
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
    <h1>Hello World</h1>,
    document.getElementById("root")
);

方式三:(推荐)

使用yeoman创建react

yeoman是前端开发中的脚手架工具，通过yeoman的模板可以快速的搭建出一个项目。

1.安装yeoman

cnpm install -g yo

2.安装react-webpack模板

cnpm install -g generator-react-webpack

3.使用yo创建项目

  yo react-webpack

4.创建完后立即停止下载,使用cnpm i 安装

cnpm i

5.运行命令

 npm start 运行
 npm run dist 导出项目

6.删除src中多余文件,留下index.html和index.js即可

7.修改cfg文件中的defaults.js

loaders: [
      {
        test: /\.(png|jpg|gif|woff|woff2|ttf)/,
        loader: 'url-loader?limit=8192'
      }
    ]
    //添加加载器字体,支持字体图标

3. JSX

是react提供的一种特殊语法,在JS代码中可以直接写html标签,实现html/css/js的混用,让代码编写更简单

1) JSX的写法

  render:function(){
    return (
      <div>
        <a href="{url}">{str}</a>
      </div>
    );
  }

2)jsx注意事项

书写注意:

a.组件的首字母必须大写
b.HTML标签首字母必须小写
c.原生的class,for,value,checked需转化className,htmlFor,defaultValue…
d.事件名称on+事件名称(首字母大写)
e.使用多个标签,必须用一个顶级标签包裹

4.组件开发

我们把网页的视图层进行细分成一个个的功能组件块, 各个不同的组件进行整合打包,组成完整网页,大大节省后期开发的人力.

//引入核心模块
    var React=require('react');

    //编写组件
    var Hello = React.createClass({
      render :function(){
        return (<h1></h1>);
      }
    });

    //暴露组件
    module.exports=Hello;

  使用:
    //引入组件
    var Hello = require(./hello.js);

    //渲染组件
    ReactDOM.render(<Hello></Hello>,app);

  属性值的传递
    在父组件设置属性,在子组件接收使用属性(从外到内)

    //父组件
    <Father></Father>

    //子组件
    import React,{Component} from 'react';

    class 子组件 extends Component{
    render(){
        return (
            <h1>这里是标题3333</h1>
        );
        }
    }
    export default 子组件;

5.React的状态

React状态
在组件内部进行初始化,获取,修改数据都使用状态实现,整个组件就是一个状态机制

1)初始化状态

  getInitialState:function(){
        return {状态名:值};
    }

2)获取状态值

this,state.状态名;

3)设置,修改状态

 this.setState({状态名:值});

4)state和props的区别

    this.state:用于组件内部传递
    this.props:父组件出入子组件(从外到内),在父设置,在子接收使用
    this.refs: 为标签设置ref属性,通过this.refs.属性名 得到该标签(类似于ID)

生命周期
组件从初始化到销毁的过程

0) 初始化之前（不属性组件的生命周期）
    getDefaultProps 【重点】设置属性的默认值

1) 初始化期： 组件实例化的过程
    getInitialState 【重点】设置状态的默认值
    componentWillMount 组件渲染前
    render          【重点】组件渲染中
    componentDidMount 【重点】组件渲染后
        由于使用AJAX获取远程数据需要时间，是异步的，所以必须渲染以后才能编写获取数据的代码。
        获取到数据以后再通过状态值的改变，重新执行渲染函数，渲染出结果

2) 存在期
    componentWillReceiveProps   属性值被改变时触发，接收新的属性值
    shouldComponentUpdate   确定是否修改属性或状态值，返回true或false
    componentWillUpdate 组件更新（再次渲染）前
    render 组件更新（再次渲染）中
    componentDidUpdate  组件更新后

3) 销毁期
    componentWillUnmount    组件准备被销毁
        组件将要被销毁时执行，可以在这里面回收系统资源

xuxu_qkz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React的入门

React 入门1.react是什么? 是一个用于构造前端界面的JS框架,起源于Facebook,基于组件开发,适用于大型项目(功能多/流量大/用户多) 与Vue ,Angular并称为前端三大框架2.安装React方式一: script标签引入<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Hello Rea
复制链接

扫一扫

专栏目录