web-gm的博客

一位跨界前端的历程

react之hello world

准备本地环境

在heda中引入三个文件,分别是react基础方法,DOM操作方法,以及JSX转码

<head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>

Hello World

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    );
</script>

ReactDOM.render() 向目标元素中插入DOM

注:react 使用了一种JSX语法,是JavaScript的一种扩展语法,script标签需要声明type=‘text/babel’

JSX简单介绍

变量声明


const element = <h1>Hello, world!</h1>;

可以把JSX理解为把JS + HTML语法


可以在HTML中使用‘{}’插入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')
);

类似于ES6的字符川的扩展

`this is a ${str}`

JSX指定属性值

 <img src={user.avatarUrl} />
 <label htmlFor='input'><label>
 <input type='text' className='form-control' id='input' />

注:属性值class 和 for需要写成 className 和htmlFor ,因为class 和 for 是js的关键字,并且JSX更偏向于JS,所以命名采用驼峰式命名

阅读更多
文章标签: 框架 react
个人分类: react
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

react之hello world

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭