从零开始搭建React项目以及项目文件介绍
一、项目搭建
首先，还是需要安装有node.js和npm/cnpm。
React官方网站：https://reactjs.org/
直接在需要搭建项目的文件夹目录打开命令行，输入命令，搭建并打开项目。
npx create-react-app my-app
cd my-app
安装依赖。
npm install
或者安装yarn之后，利用yarn安装依赖
npm install -g yarn
yarn install
打开项目
npm start
可选:安装组件
- axios 发起请求
npm install axios --save
- antd UI组件库
https://ant.design/index-cn
npm install antd --save
npm add antd
组件内引入antd组件：
例如：引入DataPicker这个组件
import { DatePicker } from 'antd';
ReactDOM.render(<DatePicker />, mountNode);
index.js中引入样式：
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
- react-router-dom
npm install -S react-router-dom
二、项目文件的介绍
package.json
存储各种依赖信息,配置介绍。
.gitignore
上传到github的时候忽略的文件。
public/favicon.ico
网站标签上的图标。可以自己生成ico图标文件替换
public/index.html
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<title>React Apptitle>
head>
<body>
<noscript>You need to enable JavaScript to run this app.noscript>
<div id="root">div>
body>
html>
public/manifest.json
涉及PWA这个新技术 不用可删除
src/index.js
// 整个项目的入口
// 只有引入React才能支持jsx语法
import React from 'react';
import ReactDOM from 'react-dom';
// 在js里可以引入css文件，这是用webpack实现的，create-react-app这个脚手架工具底层是依赖webpack实现的
import './index.css';
// APP是指APP.js这个文件
import App from './App';
// 实现PWA的一些功能，不用PWA可以删除 同时下面对serviceWorker的调用也可以删除 src目录下serviceWorker.js也可以删除
import * as serviceWorker from './serviceWorker';
// 把App.js生成的html文本，挂载到 document.getElementById('root')这个元素下，并进行页面渲染
// src/index.css
默认的首页的样式。距离浏览器边框为0，规定了一些字体，代码的样式。可以自行更改
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
src/App.js
import React from 'react';
// 引入svg文件，这是项目首页的那个旋转的logo
import logo from './logo.svg';
import './App.css';
function App() {
return (
// 项目默认页面的HTML代码，可以清空。
// 这里也是JSX的语法，正常情况在js里面写html标签，需要带上引号
<div className="App">
<header className="App-header">
// 引用了logo这个变量，生成图片，并在App.css里面对这个图片设置了样式
<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>
);
}
// 之前版本写法
// App这个类继承了Component。 其实Component相当于React.Component
// 我们把继承了Component的类就叫做 React组件
/*
import React from 'react';
import { Component } from 'react';
// 其中{ Component }是解构赋值，相当于
// import React from 'react';
// const { Component } = React;
// 所以不用引入Component，直接 React.Component 替代也可以
class App extends Component{
render() {
return (
hello React
);
}
}
*/
export default App;
src/App.css
首页的默认样式，也可以自行修改或者清空
src/App.test.js
react的自动化测试文件，不需要可以删除掉
最精简的一个Reat项目
