测开技能--Web开发 React 学习（二）环境搭建
开发环境的搭建，才是学习的第一步，那么我们看看，应该怎么搭建Recat的环境。那么跟着下面的教程，一步步来吧。
通过 npm 使用 React，我们先去下载配置npm，下载地址：https://nodejs.org/en/download/。选择你对应的系统的安装包，即可安装，安装后，在终端测试下是否已经安装成功，我这里之间查看版本来。
安装后，我们先切换到淘宝源，这样下载的速度会加快。切换方式，
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org执行上述两个命令后，就成功切换到淘宝源。我们切换完毕。我们需要安装create-react-app，create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
cnpm install -g create-react-app正常安装完毕后。
这样我们就可以去创建一个React的工程了。
create-react-app my-studay后面是项目的名称，输入后，自动去创建。
然后我们进入my-studay目录，可以先去启动。上面就已经告诉你，怎么去启动这个项目了。
这样就成功了，启动了我们刚才创建的项目了，而且还会自动的打开默认浏览器。
这就是一个默认的工程。那么大家都项知道这里里面的代码，那么我们找一个代码开发工具吧，这里我选择的是visualstudio。大家可以打开https://code.visualstudio.com/ 下载安装即可。安装后，我们去打开对应的工程，就看到了如下的结构。
我们可以通过目录看到，有两个主要的文件，一个是public 一个是src。我们看下在pubilc 存在的 都是公共的文件。src 存放这是脚本，我们可以找到，在App.js下面的就是主要的文件，我们看下代码。
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
这里的代码，就是我们在页面展示的，我们试着去修改下。修改成，图标是雷子说测试开发的，对应的文字展示，我是雷子，这是我学习React的第一个的项目。再增加一个超链接到我的博客园，和我的github，我们去实现下。
我这里主要改的还是app.js的文件，然后增加了图片，当我们去修改文字的时候，默认的对应的页面也会及时刷新，那么我们看下我们改动的代码。
import React, { Component } from 'react';
import logo from './31594444629_.pic.jpg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>雷子说测试开发</h2>
</div>
<p className="App-intro">
我是雷子，这是我学习React的第一个的项目
</p>
<a
className="App-link"
href="https://www.cnblogs.com/leiziv5/"
target="_blank"
rel="noopener noreferrer"
>
欢迎访问北漂的雷子的博客
</a>
<a
className="App-link"
href="https://github.com/liwanlei"
target="_blank"
rel="noopener noreferrer"
>
欢迎关注我的开源的项目
</a>
</div>
);
}
}
export default App;
改造完毕后，我们看下对应的web页面的变化。
腾讯云开发者
