新建一个文件夹，在cmd中打开，运行yarn create react-app 项目名

使用脚手架搭建工程

[传送门](入门教程: 认识 React – React (reactjs.org)
)

官方：create-react-app
第三方：next.js、umijs

凡是使用JSX的文件，必须导入React

在react中可以使用.js文件也可以使用.jsx文件

ReactDOM.render(<h1>Hello World <span>span元素</span></h1>, document.getElementById('root'));

以上代码执行的时候会被转换为:

React.createElement('h1',{},'Hello World',React.createElement('span',{} ,'span元素'));

开发环境搭建

VSCode配置

emmet配置：
打开设置搜索emmet相关的配置，在includes languages一栏中，添加一项:

"javascript": "javascriptreact"

保存以后，就可以在js、或者jsx文件中使用emmet语法了

VSCode插件安装

• ESLint：代码风格检查

快速生成react代码片段:

• ES7 React/Redux/GraphQL/React-Native snippets：快速代码编写
  例如输入rcc回车会生成以下的代码片段:

import React, { Component } from 'react'

export default class demo extends Component {
  render() {
    return (
      <div>
        
      </div>
    )
  }
}

键入rcf，则会生成以下代码片段:

import React from 'react'

export default function demo() {
  return (
    <div>
      
    </div>
  )
}

Chrome插件安装

React Developer Tools,在谷歌应用商店中搜索React Developer Tools，加入开发者工具中即可