React学习2_运行项目

1.WebStorm中运行

点击package.json中的start箭头即可运行项目。

之后，WebStorm右上角会出现跟Java程序一样的运行按钮。

启动成功后，访问http://localhost:3000/即可运行项目。

2.普通运行

对于一个常见的React项目，我们可以执行以下命令行语句启动。

# 安装依赖,类似于maven的导包.
npm install
# 运行程序
npm start

3.简化项目

项目首页默认为index.js，观察下这段代码。

可以看到，在React标签中加载了一个组件App。

组件：前端中将页面拆分，细分为一个个小模块，由这一个个小模块拼凑出我们想要的整体页面。

3.1 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

3.2 App.js

由于index界面中只放置了App这一个组件，我们首页看到的效果其实就是这段代码。

img、p和a标签。

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;

将它清空，换成必备的Hello World！

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

function App() {
  return (
    <div className="App">
      <h1>Hello World!</h1>
    </div>
  );
}

export default App;

ctrl+s保存后会自动编译，此时打开浏览器就能看到那串熟悉的字符。

3.3 让项目变的干净

删除掉src下除index.js的所有文件，新建pages文件夹存放所有的页面文件。

现在我们知道页面（组件）都放在pages文件夹下，有个默认的规则：

页面文件夹：大写字母开头
路径文件夹：小写字母开头

精简项目后，比如我们要添加一个Info组件用于显示信息。

可以看到，pages下新建了一个Info文件夹，表示这是一个组件，其中/Info/index.js文件就是这个组件的js代码。

下方是两个index文件示例

./yang-react/src/pages/Info/index.js

function Info() {
    return (
        <div>
            <h1>Hello Yang123!</h1>
        </div>
    );
}
export default Info;

./yang-react/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Info from './pages/Info/index';

ReactDOM.render(
  <React.StrictMode>
    <Info/>
  </React.StrictMode>,
  document.getElementById('root')
);

可以看到，App组件被我们替换成了Info组件。

此时打开网页，可以看到最新的效果。

4.其他

4.1 npm run start和npm start的区别

start和npm run start是等效关系。

在一个npm管理项目中，一般默认有start的定义，且会经常使用，所以就在npm执行中简化输入目的设置了npm run start的简写，类似的还有npm stop、npm test等等。

而其他的一些不太通用的命令项则只能通过npm run <命令项>的形式执行啦。

4.2 bulid命令的用处

类似于maven的install，构建项目后，产生可运行的jar包。

build后，产生可运行的静态文件。