react学习--jsx

最新推荐文章于 2024-08-12 11:35:37 发布

gercke

最新推荐文章于 2024-08-12 11:35:37 发布

阅读量115

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/gercke/article/details/103460745

版权

react 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

准备工作

1.保证电脑上有node.js和npm

2.下载yarn，通过npm install -g yarn 下载好之后查看yarn -v

搭建react开发环境

必须安装node.js稳定版本,Node> = 6和npm> = 5.2
创建项目（可创建多次）

找到项目要创建的目录位置 eg E:/react

npx create-react-app my-app

cd 到项目里运行与生成

cd my-app
npm start 运行项目
npm run build 生成项目

JSX–JavaScript XML

JSX，一种 JavaScript 的语法扩展。我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。

你可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里。

作用：用来创建react虚拟DOM（元素）对象

注意：他不是字符串，也不是HTML/XML标签。他最终产生的就是一个JS对象

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX 其实会被转化为普通的 JavaScript 对象。


function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

bable.js作用

浏览器不能直接解析jxs代码，需要bable转译为纯JS代码才能运行
只要用了JXS，都要加上type=“text/bable”，声明需要bable来处理

JSX 代表 Objects

Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。

 const element = (
   <h1 className="greeting">
     Hello, world!
   </h1>
 );
 
 const element = React.createElement(
   'h1',
   {className: 'greeting'},
   'Hello, world!'
 );
 
 //两种代码的作用是完全相同的：