React脚手架创建与内置文件介绍

怀着一股喜悦的心情，开始了React的自学之路，因为往往前端工程师接触的第一个开发框架往往不是React,我第一个接触的开发框架是Vue,使用Vue做了一些项目之后，相对比较了解项目的制作流程之后，我又跑到了Vue的官网看完了一整个官网的api组件，以及vuex的使用场景，vue-router的使用。因为手头没有太多的Vue项目可做，以及对于自己而言，总觉得自己已经把整个官网的内容全部都过了一遍。就想着前端开发工程师的知识面也是需要广泛的学习主流框架，于是我开始了React的学习。

React脚手架搭建项目

第一步：全局安装 npm i -g create-react-app

第二步：切换到准备创建项目的目录，使用命令: create-react-app my-react(这个属于自己随便取的一个名字)

第三步：进入项目文件夹 ：cd  my-react

第四步：启动项目： npm start / yarn start

这几步命令过后，你创建的空文件夹内就变成了一个React脚手架项目

React脚手架文件的介绍

public————静态资源文件夹

favicon.icon————网站页签图标

index.html————主页面

manifest.json————应用加壳的配置文件

robots.txt————爬虫协议文件

src————源码文件夹

App.css————App组件的样式

App.js————App组件

App.test.js————用于给App做测试

index.css————样式

index.js————入口文件

index.html文件：这是项目的入口文件，所有的代码运行都是从这个文件开始的，React框架代码，也是从这个文件中载入的

index.js文件：这是框架的入口文件，React是组件形式的，所有组件都会通过index.js文件载入，

App.js文件：这是React框架给我们的组件示例代码，一般也作为加载其他组建的主入口文件

这三者的关系是这样的：index.html作为项目入口文件加载index.js；index.js文件作为框架的入口文件加载App.js；App.js作为组件的主入口文件加载其他文件

JSX语法

React.render(React.createElement("div",{

id:"aaa",

className:"bbb"

},"content123456789"),document.getElementById("root"))

等同于我们看到的

ReactDom.render(

content123456789

,document.getElementById("root"))

接下来就需要大家去学习主要的相关语法，与了解内置的一些组件，与相关的第三方模块，最终到项目实战这一块，多练习一些项目的功能制作，请多给React框架一些耐心，也给自己一些耐心，当你觉得这个东西很难，你要坚持不下去的时候，那么这个时候React的难度也快被攻克了。

希望和大家一起共同进步，过上自己想要的生活！