react.js从入门到精通(一)——我的第一个react实例demo

react.js从入门到精通(一)——我的第一个react实例demo

web端三大框架react、vue和angular,本篇教程介绍react的从入门到精通。


一、环境搭建

1、npm搭建项目


如果您之前未曾使用过 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可以看到系统默认生成的页面了。(看到如下页面标识安装成功) 


image.png



2、推荐使用的项目结构

如果你对上面的一无所知的话可以访问追梦猪git下载demo实现快捷开发,省掉安装的步骤

追梦猪react项目demo实例(https://github.com/jiawenguang/React-demo.git)

可以通过git clone方式下载项目结构。


二、目录结构与各文件功能

1、目录结构

 image.png

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文件夹存放路由


三、react.js的第一个dome

在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;


效果如下: 

image.png




追梦猪网站致力于前端分享申明:本站内容搜集整理而来请勿商业用途,仅供交流所用,如若侵犯您的权益请邮件站长进行删除!

文明浏览请勿传播非法内容