1.通过node环境创建react工程插件
npm install -g create-react-app
2.指定目录创建React工程
create-react-app <工程名>
3.进入目录启动项目
cd <工程根目录>
yarn start
4.创建第一个组件
创建welcome.js
import React, {Component} from 'react';
class Welcome extends Component {
render() {
return <h1> Hello, World! </h1>
}
}
export default Welcome
并将新组件引入到主页面中
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Welcome from './Welcome';
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>
<Welcome/> {/* 引入新组件 */}
</header>
</div>
);
}
export default App;
刷新页面
5.打包
yarn build
其他
1.目录介绍
- README.md :对项目的说明。
- package.json: 这个文件是
webpack
配置和项目包管理文件,项目中依赖的第三方包(包的版本)和一些常用命令配置都在这个里边进行配置。 - package-lock.json:这个文件用一句话来解释,就是锁定安装时的版本号,并且需要上传到git,以保证其他人再
npm install
时大家的依赖能保证一致。 - gitignore : 这个是git的忽略上传的配置文件,比如一会要介绍的
node_modules
文件夹,就需要配置不上传。 - node_modules :项目的依赖包。
- public :公共文件,里边有公用模板和图标等一些东西。
- src : 主要代码编写文件。
public文件夹介绍
- favicon.ico : 这个是网站或者说项目的图标,一般在浏览器标签页的左上角显示。
- index.html : 首页的模板文件,我们可以试着改动一下,就能看到结果。
- mainifest.json:移动端配置文件。
src文件夹介绍
- index.js : 这个就是项目的入口文件。
- index.css :这个是
index.js
里的CSS文件。 - app.js : 这个文件相当于一个方法模块,也是一个简单的模块化编程。
- serviceWorker.js: 这个是用于写移动端开发的,PWA必须用到这个文件,有了这个文件,就相当于有了离线浏览的功能。
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!