react之脚手架安装
程序员文章站
2022-07-02 23:21:57
...
环境要求
- nodejs
- git
脚手架选择
这里选择推荐的官方出品的脚手架,在github上有52kstar,
react脚手架 create-react-app地址
在git中使用npm全局安装create-react-app脚手架
npm install -g create-react-app
查看帮助
create-react-app -h
Usage: create-react-app <project-directory> [options]
Options:
-V, --version output the version number
--verbose print additional logs
--info print environment debug info
--scripts-version <alternative-package> use a non-standard version of react-scripts
--use-npm
-h, --help output usage information
Only <project-directory> is required.
A custom --scripts-version can be one of:
- a specific npm version: 0.8.2
- a custom fork published on npm: my-react-scripts
- a .tgz archive: https://mysite.com/my-react-scripts-0.8.2.tgz
- a .tar.gz archive: https://mysite.com/my-react-scripts-0.8.2.tar.gz
It is not needed unless you specifically want to use a fork.
If you have any problems, do not hesitate to file an issue:
https://github.com/facebookincubator/create-react-app/issues/new
使用脚手架初始化项目
//新建一个myapp文件夹
mkdir
//用脚手架构建一个react app
create-react-app myapp
//完成初始化之后cd到项目根目录启动
npm start
项目结构
index.js
//引入依赖
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//引入主模版
import App from './App';
//引入注册缓存和热更新服务 这一段注释可以在registerServiceWorker中看到
import registerServiceWorker from './registerServiceWorker';
//ReactDOM系统将App主模版渲染到绑定ID为root的元素上面
ReactDOM.render(<App />, document.getElementById('root'));
//注册服务
registerServiceWorker();
App.js
//引入依赖
import React, { Component } from 'react';
import logo from './logo.svg';
//公共样式
import './App.css';
//继承于Component的构造函数并渲染返回一个模版
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to My React App</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
//导出
export default App;
持续更新。
下一篇: 指令跳转