react---create-react-app搭建项目

1.项目搭建步骤

• 安装react脚手架create-react-app 【npm i create-react-app -g】
• 新建项目【create-react-app react_first_app】
• 进行项目目录【cd react_first_app】
• 启动【npm start]

2.项目目录

react_first_pro
├─ .gitignore               // 自动创建本地仓库
├─ package.json             // 相关配置文件
├─ public                   // 公共资源
│  ├─ favicon.ico           // 浏览器顶部的icon图标
│  ├─ index.html            // 应用的 index.html入口
│  ├─ logo192.png           // 在 manifest 中使用的logo图
│  ├─ logo512.png           // 同上
│  ├─ manifest.json         // 应用加壳的配置文件
│  └─ robots.txt            // 爬虫协议文件
├─ src                      // 源码文件夹
│  ├─ App.css               // App组件样式
│  ├─ App.js                // App组件
│  ├─ App.test.js           // 用于给APP做测试
│  ├─ index.css             // 样式
│  ├─ index.js              // 入口文件
│  ├─ logo.svg              // logo图
│  ├─ reportWebVitals.js    // 页面性能分析文件
│  └─ setupTests.js         // 组件单元测试文件
└─ yarn.lock

3.hello_react

【index.html】--应用入口文件

%PUBLIC_URL%代表public目录

【index.js】--将APP组件渲染到页面

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
ReactDOM.render(,document.getElementById("root"))

【App.jsx】

import React, { Component } from "react"
import Hello from "./components/Hello/Hello"
import Welcome from "./components/Welcome/Welcome"
export default class App extends Component{
    render(){
        return(
            

                
                
            
        )
    }
}

【Hello组件/Welcome组件】