项目搭建

第一步：安装react

在node已经装好的前提下开始安装react：

npm install -g create-react-app

第二步：创建项目

// web-demo：自定义项目名称
create-react-app web-demo

初始项目的项目结构：

运行项目

cd到所在项目目录下，运行npm run start：

到这，一个初始的react项目就搭建完成了。

其中在package.json中有一句这样的代码：

它的作用是将webpack配置文件暴露出来。

运行完npm run eject，项目结构就多出了webpack相关的配置文件。

package.json中的npm run eject也就没了

build后的项目运行

安装npm install -g serve，然后打包项目npm run build，运行项目serve -s build即可。

项目文件解释

src中的index.js

src是主程序，index.js是项目的入口

src中的APP.js

APP.js类似于vue中的App.vue：

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

其中的ref="noopener noreferrer"是必不可少的，否则项目会出现警告

noopener noreferrer的解释：

rel="noopener"一般都是搭配target="_blank" 同时使用，因为target="_blank"也是一个安全漏洞：新的页面可以通过window.opener访问你的窗口对象，并且它可以使用window.opener.location = newURL将你的页面导航到不同的网址，新的页面将与你的页面在一个进程上运行，如果新的页面正在执行开销极大的JavaScript，你的页面性能可能会受到影响。 noreferrer属性则是为了兼容旧版本的浏览器，功能不受影响。

接下来继续学习react的知识点~

React的学习（一）—— 项目搭建