文章82
标签28
分类8

React Hello World

React 目录详解

我们初始化 React 项目后,可以看一下 React 的目录。

  • node_moudules : 用于存放项目的依赖包

  • public : 公共文件

  • src : 平时我们编写的代码就都存储在这个文件夹内

  • .gitignore : 忽略提交文件的配置文件

  • package-lock.json :这个文件用一句话来解释,就是锁定安装时的版本号,并且需要上传到git,以保证其他人再npm install 时大家的依赖能保证一致。

  • package.json : 这个文件是webpack配置和项目包管理文件,项目中依赖的第三方包(包的版本)和一些常用命令配置都在这个里边进行配置,当然脚手架已经为我们配置了一些了,目前位置,我们不需要改动。如果你对webpack了解,对这个一定也很熟悉。

项目开始的时候,可以删除 src 文件夹目录下的所有文件,自己新建一个 index.js 以及 App.js.

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />,document.getElementById('root'))
// App.js
import React, {Component} from 'react'

class App extends Component{
    render(){
        return (
            <div>
                Hello World
            </div>
        )
    }
}
export default App

运行项目,就应该能看到页面上显示的 “Hello World” 了