锐客网

  1. 首页 > 睿知 > it技术 > >

教程（使用create-react-app脚手架创建React项目）

IT知识脚手架创建Create

花门楼前见秋草，岂能贫贱相看老。这篇文章主要讲述教程：使用create-react-app脚手架创建React项目相关的知识，希望能为你提供帮助。
1、React简介
React起源于Facebook的内部项目，因为该公司对市场上所有javascript MVC框架都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，于是就在2013年5月开源了。
2、脚手架环境搭建
第一步：安装node.jsnode.js下载网址： https://nodejs.org/zh-cn/download/
第二步：安装React脚手架

cnpm install -g create-react-app

更换国内镜像
npm config set registry https://registry.npm.taobao.org -- 配置后可通过下面方式来验证是否成功 npm config get registry -- 如果显示出上述地址的话就是更换成功

第三步：创建项目
create-react-app todolist

进入项目目录 cd todolist
第四步：启动项目
npm start

3、项目目录说明
node_modules ===> npm 下载的相关依赖
package.json ===> node包文件 包括项目的一些介绍 以及 相关文件版本
public文件夹：
?      index.html ===> 项目的首页
?      favico.ico ===> 项目图标
?      mainfest.json ===> 定义网页快捷方式
src 文件夹:
?      index.js ===> 整个项目的入口文件
?      registerServiceWorker.js ===> 离线缓存
代码工程精简
在 src 目录下仅保存 App.js 和 index.js 文件
index.js 是入口文件，精简代码如下：
import React from ‘react‘; import ReactDOM from ‘react-dom‘; import App from ‘./App‘; ReactDOM.render(< App /> , document.getElementById(‘root‘));

【教程（使用create-react-app脚手架创建React项目）】App.js 文件精简代码如下：
import React from ‘react‘; function App() { return ( < div> hello React... < /div> ); }export default App;


    推荐阅读


    上一篇：免信用卡更改Apple ID地区

    下一篇：Android数据持久化储存3