react16.9入门（一）

新建项目

前序工作，安装Node。
版本Node >= 8.10 和 npm >= 5.6前提下，执行（‘my-app’为项目名称，根据喜好自定义）

npx create-react-app my-app

项目初始化完成后执行

cd my-app
npm start

此时项目已启动，启动后浏览器会自动打开。

目录结构

项目新建之后，让我们来看下基本的目录结构：

node_modules： 这里面包含了项目的依赖包；

public：里面包含了我们项目中的启动页面index.html，并且这也是react工程的入口页面;

src：里面包含了一些我们自己使用的js文件，css文件，img文件等等。系统默认将index.html对准了index.js，index.js也就是我们的入口js，他和index.html所对应。

Hello World

修改/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

这段代码的意思可以理解为渲染“ <h1>Hello, world!</h1>”到index.html中id为“root”的标签中

打开调试模式查看DOM元素，h1的确是渲染到了id为root的标签中