ReactJS见习笔记

最新推荐文章于 2021-12-27 17:22:26 发布

bruce128

最新推荐文章于 2021-12-27 17:22:26 发布

阅读量585

点赞数

分类专栏：前端文章标签： javascript ui node.js

本文链接：https://blog.csdn.net/bruce128/article/details/54638524

版权

前端专栏收录该内容

17 篇文章 1 订阅

订阅专栏

项目组要求用reactJs搭建前端页面，但是对react一点不了解，边推进项目边学习react。

node.js, npm的关系

Node.js 就是运行在服务端的 JavaScript。NPM是随同NodeJS一起安装的包管理工具。

React

React 是一个用于构建UI的 JAVASCRIPT 库。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。也就是说react才3周岁。
React 拥有较高的性能，代码逻辑非常简单.

React 特点

声明式设计 −React采用声明范式，可以轻松描述应用。
高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活 −React可以与已知的库或框架很好地配合。
JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。在React的世界里，一切皆为组件。
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

JSX语法

JSX官方定义

XML-like syntax extension to ECMAScript

意即JSX 是一个看起来很像 XML 的 JavaScript 语法扩展，所以JSX的”X”代表的是“XML” 。

HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写
JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员
React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type=”text/babel” 。
在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代(同Java，C++中的三元表达式)。
React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px

<script type="text/babel">
      var myStyle = {
         fontSize: 90,
         color: '#FF0000',
         margin: 200
      };
      ReactDOM.render(
        <h1 style = {myStyle}>菜鸟教程</h1>,
        document.getElementById('example')
      );
    </script>