文章目录
NPM安装React
检查是否安装Node.js和npm
node -v
npm -v
检查拉取仓库是否使用国内并设置国内
npm config get registry
npm config set registry https://resistry.npmmirror.com
使用create-react-app快速构建React开发环境
//安装create-react-app
npm install -g create-react-app
//创建react项目
create-react-app appName
//进入项目并启动
cd appName/
npm start
项目结构
appName
-- node_modules
-- public
-- src
.gitignore
package-lock.json
package.json
README.md
- node_modules/:存放所有项目的依赖包，由npm或yarn自动生成。
- public/:存放静态文件，Webpack不会对这个目录中的文件进行处理。public目录下的文件会被直接复制到构建目录。
- src/:存放应用源代码，开发主要区域
- .gitignore:列出Git应该忽略的文件和目录
- package.json:项目的配置文件，包含项目信息、脚本、依赖项等。
- README.md:项目的自述文件，包含项目的基本信息和使用说明。
- yarn.lock或package-lock.json:锁定文件，记录了确切的依赖版本，确保在不同环境中安装的依赖一致。
src下的index.js和index.css
index.js为入口文件，可以在里面挂载不同的页面
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
function Hello(props){
return <h1>Hello {props.name}</h1>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello name="World"/>) //将Hello做为首页
//root.render(
// <React.StrictMode>
// <App />
// </React.StrictMode>
//);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
index.css是index.js的样式，也是项目全局样式
src下的App.js和App.css
App.js为项目首页，App.css为首页样式
App.js挂载新组件
- 写一个Hello.js
import React from "react";
function Hello(){
return <h1>Hello from a new component!</h1>
}
export default Hello;
- 在App.js中挂载Hello组件
import logo from './logo.svg';
import './App.css';
import Hello from './Hello';
function App() {
return (
<div className="App">
<div className="App-header">
{/* <h1>Hello,React</h1> */}
<Hello/>
</div>
</div>
);
}
export default App;