react - 创建 - 基础 - JSX

创建react项目：

react:

npm install -g create-react-app  // 全局安装

create-react-app  project-name

Next.js的创建

Next:

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

 

npx create-next-app project-name

yarn create next-app

 

官方提供的 CDN 地址：

<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>

 

<div id="app"></div>

 

<script type="text/babel">

　　var id = 'demo'

　　var h1 = <h1 data-name="{id}">hello!</h1>

　　ReactDOM.render(h1, document.getElementById('app'));

</script>

 

JSX:

全称 JavaScript XML; 优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

 

 

 

 

 

 

 

组件：