react开发环境

react

一、开发环境:(两种方式)

1、引用文件方式
2、脚手架环境(三个包)
   [
    yarn add React
    yarn  add React-dom
    yarn add babel-standalone
    ]

    1、 umd包—>React.develoment包放到自己文件夹
    2、yarn add React-dom (安装第二个包,用于网页开发)
        将react-dom develoment文件导入到js文件下
    3、新建test.html,将上面两个文件引入,核心包放在最上面
        <script>console.log(ReactDom)</script>
        ReactDom.render("hello,,world",挂载(document.getElementById('box')))

3、安装babel(es5=>es6) 将文件放入 js中引入
    <script type="text/babel"></script>

二、什么是 jsx?

1、是一种语法糖,js扩展的意思,相当于js+xml
2、jsx的原理是:
    React.createElement(标签,属性,内容)
    (不是必须的,但是可以提高可开发效率)
3、注意事项
    1、对象不能直接渲染
    2、数组可以直接渲染
    3、标签内的class需改成className
    4、绑定事件首字母大写onClick={()=>{alert(111)}}
    5、react的插值表达式是一个{}
4、行内样式的书写
    var a = <p style={{color:'blue'}}></p>
    两个大括号,
        第一个属于插值表达式,
        第二个表示为一个对象
5.创建的节点都放在内存中,虚拟Dom中,渲染时才会从内存中调出

1.yarn 和npm 命令对比表格
https://yarn.bootcss.com/docs/migrating-from-npm/
2.脚手架自带的服务器是webpack-dev-server

项目的目录/node_modules/react-scripts/scripts/start.js

改端口 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 5000;

本章主要介绍react的环境搭建,jsx的简单实用,jsx的原理
posted @ 2020-02-18 22:46  痞子不说情话  阅读(146)  评论(0编辑  收藏  举报