创建项目
- 安装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
网友评论