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的原理