【react练习】使用脚手架 create-react-app创建项目（边做边记录）

整理自尚硅谷视频

 

 

一 配置react环境

使用脚手架开发项目的优势：模块化，组件化，工程化

 全局下载包

npm install -g create-react-app

全局下载的特点：所有应用都能看得见；无需反复下载

如何查看全局下载了哪些包：

npm root -g # 查看全局下载的根目录

下载好了（挺花时间的）

 

二 使用create-react-app创建react 项目

在线创建方式：

首先到想要存放项目的路径下。

然后

create-react-app second-react  # second-react是项目名称

这个过程依然很慢（因为要从网络上下载东西）

等待一切完成，之后启动项目

npm run start  # run 可省略

项目即可启动

npm run start执行的是项目的package.json中配置的命令

完成

离线创建方式-未完待续

我所在的网络不允许下载相应的内容，所以在执行create-react-app时失败了┑(￣Д ￣)┍。

那么如何进行离线创建项目呢？

容我去研究一下

 

三 正式填充代码

1 入口函数

在src下新建index.js，作为入口js。写法是固定的。

import React from 'react' //引入react包
import ReactDOM from 'react-dom'
import App from './components/App' //引入自定义的组件。必须要以./或../开头

import './index.css' // 引入样式




ReactDOM.render(<App />, document.getElementById('root'));

这里参照尚硅谷课程做了一个小例子。App是这样写的：

import React, {Component} from 'react'
import logo from '../logo192.png'



export default class App extends Component{
    render (){
        return (
            <div>
                <img className='logo' src={logo} alt='logo'/>
                <p className='title'>这是一个react标签</p>
            </div>
        )

    }
}

CSS文件：

.logo {
    width: 200px;
    height: 200px;
}
.title{
    color: red;
    font-size: 25px;
}

文件结构：

结果就是这样：