(1) 初识react 在浏览器中使用 Babel 来编译 JSX 效率是非常低的。所以不建议如此使用

React 有很多的使用方式，其中可以通过script标签直接引用，也可以通过npm使用，以下我将记录我对react学习和使用，在此希望我能坚持下去

npm使用

create-react-app 是来自于 Facebook官方推荐的安装方式

npm install -g create-react-app
create-react-app my-app
# 安装完成后
cd my-app
npm start

如上图安装成功提示，和package.json文件可知，create-react-app 为项目内置了4个命令，start build test eject

start

开始开发服务器, 开启后若没改端口，可访问127.0.0.1:3000，若端口被占，会自动端口+1，并询问你是否开启，感觉很赞

build

打包成静态文件，下图build文件夹为打包后的静态文件，因为目前是一个空项目，没有做任何修改

eject

开启配置文件，复制构建依赖项，配置文件和脚本到app目录中,和与上图的比较中可知，运行yarn eject之后新增了config和script目录

需要注意的是，这里的dev(webpack.config.dev.js)配置,和生产(webpack.config.prod.js)配置的module和plugins是完全分开的，如果需要配置如sass文件处理，需要在两个文件都添加配置，webpackDevServer.config.js文件输出定义的环境变量和项目路径，文件等

.
├── env.js
├── jest
├── paths.js
├── polyfills.js
├── webpack.config.dev.js
├── webpack.config.prod.js
└── webpackDevServer.config.js

直接使用

在浏览器中使用 Babel 来编译 JSX 效率是非常低的。所以不建议如此使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
 
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>
 
</body>
</html>