开始学习react
脚手架去做项目了,Github地址
脚手架
create-react-app
是facebook
推出一款react
的脚手架
安装
npm i -g create-react-app
# 或者使用镜像
npm i -g create-react-app --registry=https://registry.npm.taobao.org
#查看版本
create-react-app --version
创建项目
create-react-app myapp-demo
# 等待初始化
运行项目
npm start
项目结构
├── node_modules
├── package-lock.json
├── package.json
├── public ## 静态资源文件夹
└── src ## 源码目录
├── App.css
├── App.js ## 根组件
├── App.test.js
├── index.css
├── index.js ## 全局的主配置文件
├── logo.svg
├── serviceWorker.js
└── setupTests.js
组件的创建
我们在src
下创建文件夹components
,以后所有的组件全部放入该文件中
cd src
mkdir components
新建一个组件Home.js
,这就是我们的基础模板
import React, {
Component } from "react";
export default class Home extends Component {
render(){
return ( <div>
Home 组件
</div> )
}
}
使用组件,我们在需要的地方使用组件
import React from 'react';
import logo from './logo.svg';
import './App.css';
// 导入我们定义好的组件
import Home from "./componets/home"
function App() {
return (
<div className="App">
你好
<Home></Home>
</div>
);
}
export default App;
图片的引用
在之前说明了,public
是存放静态资源文件的地方,其实我们还可以将文件存储在src/assets
文件夹中,然后在组件里引入文件,把变量赋予图片的src
属性
import React, {
Component } from "react";
// 引用图片
import myLogo from "../assets/mylogo.png"
export default class Home extends Component {
render(){
return ( <div>
Home 组件
<img src = {
myLogo}></img>
</div> )
}
}