react入门知识点

最新推荐文章于 2024-07-19 12:58:53 发布

AYX!

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量963

点赞数

文章标签： javascript html5 css jquery css3

本文链接：https://blog.csdn.net/anyongxiang/article/details/123977088

版权

安装：

npm i create-react-app -g

1.JSX(babel、browser)
　　JSX：可以把HTML直接写JS里
2.react
　　React特点：虚拟DOM

react主要就是使用jsx语法，是白了就是在js中直接编写html，是不是很方便很溜。。下面直接开始写法：

使用react首先需要引三个文件：
　　browser.js 它的作用是使浏览器支持babel
　　react.js 这个不用说，react主体文件
　　react-dom.js 这个是react的虚拟DOM的文件编译dom的

1.定义组件——组件（这个就用到了ES6中的class的写法）：

class 名字 extends React.Component{
　　constructor(...args){
　　　super(...args);
　　}
　　render(){
　　　return <span>aaa</span>; //return出去你要在页面展示的标签
　　}
}

2.使用组件

就跟标签一样用
　　ReactDOM.render(
　　　<span>111</span>, //可以直接写标签，（渲染什么东西）
　　　oDiv　　（要放到哪里）
　　);

ReactDOM.render(
　　　<Comp/>, //也可以使用class，注意，使用的时候直接把class当做标签来用。
　　　oDiv
　　);

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/browser.js" charset="utf-8"></script>
    <script src="js/react.js" charset="utf-8"></script>
    <script src="js/react-dom.js" charset="utf-8"></script>
    <script type="text/babel">
        class Box extends React.Component{
            constructor(...args){
                super(...args)
            }
            render(){
                return <div> //注意 最外层元素有且只有一个（必须有，而且只能有一个）
                    <span>我的名字是李鹏</span><br/>
                    <span>我今年24岁</span>
                </div>
            }
        }
        window.onload=function(){
            var oDiv=document.getElementById("div1");
            ReactDOM.render(
                    <Box/>, //注意：需要和上面class的名字一样
                    oDiv
                )
        };
    
    </script>
  </head>
  <body>
    <div id="div1">

    </div>
  </body>
</html>

注意：定义的时候 render出去的最外层元素有且只有一个（必须有，而且只能有一个）使用的时候直接把组件名字当做标签来用，需要和上面class的名字一样。

那么有人会说了，那么能往组件身上存放一些数据吗？答案是可以，
使用的时候，直接往组件标签身上加入属性即可，定义的时候使用就直接调用，注意是在this.props的身上：

class Box extends React.Component{
            constructor(...args){
                super(...args)
            }
            render(){
                return <div>
                    <span>我的名字是{this.props.name}</span><br/>
                    <span>我今年{this.props.age}岁</span>
                </div>
            }
        }
        window.onload=function(){
            var oDiv=document.getElementById("div1");
            ReactDOM.render(
                    <Box name="李鹏" age="24"/>,
                    oDiv
                )
        };

那么react比如我往一个元素节点身上加入数据怎么做，正常一个组件中的数据，不可能是不变的吧，肯定是从后台过来的，这就关系到状态的变化。

注意：状态是活的，会变化的，怎么用呢？
　　定义：constructor里面——this.state={};
　　变化：方法里面——this.setState({});

使用的时候：直接用模板即可:{} 注意是单括号。比如：

<span>输入框输入的是：{this.state.value}</span>

AYX!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react入门知识点

安装：npm i create-react-app -g1.JSX(babel、browser)　　JSX：可以把HTML直接写JS里2.react　　React特点：虚拟DOMreact主要就是使用jsx语法，是白了就是在js中直接编写html，是不是很方便很溜。。下面直接开始写法：使用react首先需要引三个文件：　　browser.js 它的作用是使浏览器支持babel　　react.js 这个不用说，react主体文件　　react-dom.js 这个是react的虚拟DO
复制链接

扫一扫