钻牛角尖似的学习React.萌到发蠢的萌新

【推荐阅读】微服务还能火多久？>>>

嗯，，，实习期间一直用的vue,去年为了应付面试，（面试造火箭，工作拧螺丝。。。）但当时react看了一周，简历上都是写的，知道React.笑哭了要。。嗯。。。现在已经忘完了。

1.hello React

要安装三个依赖，具体原因对于只是知道1+1=2的我来说，太难了，不知道，现在，嗯，我的学习方法是温故而知新，等以后“温故”的时候再研究。hahh

1.安装三个必须要安装的

（1)react.js 这是核心包，

安装方式：npm install react --save

(2)react-dom.js 渲染页面中的dom，当前文件依赖react核心文件

安装方式：npm install react-dom ---save

(3)babel.js ES6转换成ES5 JSX语法换成js 现今浏览器兼容

安装方式：npm install babel-standalone --save

2.下载完成，添加引用

参照目录，引入对应的引用

3.创建根节点

<div id="demo"></div>

4.小栗子实现

<body>

<div id="demo"></div>

<script type="text/babel">

// jsx = js xml js的扩展语法

// 优点

// 1，执行效率更快

// 2.类型安全，编译过程能及时发现错误

// 3.使用jsx的时候编写会更加简单和快捷

let myDom = <h1>hello React</h1>;

ReactDOM.render(myDom,document.getElementById("demo"));

</script>

</body>

5.结果

6.总结和补充

写ReactDom.render()的时候，嘻嘻嘻，看出来问题了吗。

要大写啦！

ReactDOM.render()

emmm...我记住了

2.关于注释和多个标签

{/*单行文本注释*/}
有多个标签的时候，必须要有一个父元素包裹起来，最好给父元素加一个括号（暂时不知道为什么）
  <script type="text/babel">        
     let Mydemo = (<div>            
          <div>我是内容1</div>            
          <div>我是内容2</div>
          {/*我是内容3，我被注释了，不能显示出来*/}
         </div>)         
     ReactDOM.render(Mydemo,document.getElementById("demo"))
  </script>
复制代码

来源：oschina

链接：https://my.oschina.net/u/4342092/blog/3235545

标签

javascript

babel

npm

jsx