react-(2)开发准备

2019-06-18 本文已影响6人 bugWriter_y

创建项目

安装nodejs

安装create-react-app

npm i -g create-react-app

全局安装create-react-app工具

创建项目my-app

create-react-app my-app

使用create-react-app工具创建一个react项目，并且下载安装所需相关依赖。

wait wait wait...

运行项目

cd my-app
npm start

进入到新创建的新项目中，启动项目，自动打开系统默认浏览器localhost:3000

Snipaste_2019-06-15_17-22-39.png

编辑器设置

安装vscode（推荐）
安装vscode插件（推荐）
- simple react sinppets——react代码模板
- prettier——用于格式化代码
  - 设置保存文件自动格式化

Snipaste_2019-06-15_17-24-33.png

Snipaste_2019-06-15_17-25-56.png

认识react项目

Snipaste_2019-06-15_17-34-41.png

public/index.html

这是一个首页文件，项目启动后打开的页面就是这一个index.html。没错react应用只有一个页面就是index.html，这就是SPA（single page application）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

src/index.js

这是react的入口

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

它的作用是将根组件App渲染到index.html中的<div id='root'></div>处。这样react组件和页面就关联到了一起了。以后我们的主要关注点就在App组件上了

src/App.js

import React from 'react';
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;

App.js就是我们的根组件。

这里采用的是一种组件的简写方式。如果组件没有state也没有方法，只有一个render函数，可以写成这种方式，后面会提到。

jsx语法

App.js中return的代码很像html，但是我们知道js中是不能直接写html的，这个就是所谓的jsx。

但是这种说法也不对，react中返回的并不是html，而是react元素，他们组成了虚拟dom。react创建元素的方法是React.createElement("div")，但是这种方式创建元素明显太复杂，于是使用jsx来代替复杂的元素创建过程。

虽然jsx返回的不是html，但那是就语法而言，对于开发者老说，它，就是html。

安装react-develop-tools for chrome

这个工具能将react应用的组件树展示出来

去应用商店找react develop tools，并安装

Snipaste_2019-06-15_18-20-40.png

打开react项目，打开开发者工具，找到react面板

Snipaste_2019-06-15_18-23-58.png