React-初探(开发环境、目录、组件介绍)官方文档说明前提： You’ll need to have Node >=

1、开发环境

官方文档说明
前提： You’ll need to have Node >= 6 and npm >= 5.2 on your machine
在这里插入图片描述

核心命令：

npx create-react-app my-app
cd my-app
npm start

在这里插入图片描述

2、目录结构

在这里插入图片描述

3、组件

import {Component} from “react”;
等价于
import React from ‘react’;
const Component = React.Component;

import React,{Component} from 'react';

 // import {Component} from "react";
// import React from 'react';
// const Component = React.Component;

// class App extends React.Component {
class App extends Component {
	
	render(){
		return(
			<div>
				hello world
			</div>
		);
	}
}

index.js

import React from 'react';
// ReactDOM 是一个第三方模块，它有个render方法帮我们把组件App挂载在页面的某个节点
import ReactDOM from 'react-dom';
import App from './App';
// 如果你引用了jsx的语法，那么你一定需要引用react,在react中的render函数中的标签也是jsx语法
ReactDOM.render(<App />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>TODO_TEST</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

4、基础的JSX语法

JSX自定义组件的首字母必须大写，h5标签小写开发。