web端三大框架react、vue和angular,本篇教程介绍react的从入门到精通。
如果您之前未曾使用过 create-react-app,请先通过如下命令全局安装(假定您本机已经安装了 Node.js):
npm install -g create-react-app
然后,通过如下命令构建一个新的项目my-app:
npx create-react-app my-app
通过cd my-app命令进入项目文件夹,执行npm run start命令启动程序,成功运行,则实验环境准备完毕。
最终目录结构
├─ node_modules
├─ public
├─ src
├─ .gitignore
├─ package.json
├─ README.md
└─ yarn.lock
打开浏览器,输入http://localhost:3000
可以看到系统默认生成的页面了。(看到如下页面标识安装成功)
如果你对上面的一无所知的话可以访问追梦猪git下载demo实现快捷开发,省掉安装的步骤
追梦猪react项目demo实例(https://github.com/jiawenguang/React-demo.git)
可以通过git clone方式下载项目结构。
1、index.js文件为项目的总入口,CDN引入的资源可以放在此文件中。
2、package.json文件是模块功能配置,使用npm install可生成node_modules文件夹,所有模块功能所需要的资源都存储在这个文件夹中。
3、routers.js文件是路由配置文件,路由功能是三大前端框架的特色(具体用法下面会详细说)。
4、home.js文件是项目结构初始化放上去的界面。
5、components文件夹是存放组件使用。
6、assets文件夹存放静态资源
7、views文件夹存放页面视图
8、router文件夹存放路由
在Home.js中编写代码,代码如下:
import React, {Component} from 'react';
import logo from '../logo.svg';
class Home extends Component {
render(){
return (
<div className="zmz-react">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
我的第一个demo从react初始化开发
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
准备起步
</a>
</header>
</div>
);
}
}
export default Home;
效果如下:
本文地址:https://www.zhuimengzhu.com/details/218.html
转载地址:暂无
转载说明:转载时请在文首注明来源zhuimengzhu.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。zhuimengzhu 保留追究相应责任的权利。