react.js从入门到精通（一）

2024-05-14 08:26:11

web端三大框架react、vue和angular，下面是对react.js的一些总结。

一、环境搭建

1、npm搭建项目

推荐使用npm搭建项目环境，如果网速过慢，可是使用cnpm进行项目的搭建（cnpm是淘宝的npm镜像，与npm有些差异，有些模块无法下载或无法正常使用）。

cnpm install -g create-react-app
create-react-app my-app
cd my-app
npm start

1
2
3
4

打开浏览器，输入http://localhost:3000可以看到系统默认生成的页面了。

2、推荐使用的项目结构

https://git.coding.net/yibingCoding/ReactLearn.git
可以通过git clone方式下载项目结构。

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

1、目录结构

1、index.html文件为项目的总入口，CDN引入的资源可以放在此文件中。
2、package.json文件是模块功能配置，使用npm install可生成node_modules文件夹，所有模块功能所需要的资源都存储在这个文件夹中。
3、routes.js文件是路由配置文件，路由功能是三大前端框架的特色（具体用法下面会详细说）。
4、Home.js文件是项目结构初始化放上去的界面。

三、react.js的第一个dome

在Home.js中编写代码，代码如下：

import React,{ Component } from 'react'
import demo1Image from '../../image/demo1Image.jpg'; class Home extends Component { render() { return ( <div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}}> 这是第一个demo <img src={demo1Image} style={{width:"300px",height:"300px"}} alt=""/> </div> ) } } export default Home

1
2
3
4
5
6
7
8
9
10
11
12
13

效果如下：

转载于:https://www.cnblogs.com/xukun588/p/9458667.html

react.js从入门到精通（一）相关推荐

react.js从入门到精通（六）——路由的使用
对路由的理解在pc端页面之间的切换,我们大多使用a链接.location等操作. 在react.js开发中,我们采用组件化操作,一个页面就是一个组件.所以页面和页面之间的跳转就相当于是组件和组件之 ...
视频教程-最新完整react教程从入门到精通包教包会-ReactJS
最新完整react教程从入门到精通包教包会 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开发项目.百余客 ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
#[2022.3]尚硅谷Vue.js从入门到精通基础笔记(理论+实操+知识点速查) 前言本文完全基于参考资料:加工整理而成,包括其代码,案例,资源等.前置知识是学习尚硅谷的视频教程,本文配合其教程 ...
【JS从入门到精通】08-构造函数与原型对象
笔记来源:尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)_哔哩哔哩_bilibili 文章目录构造函数与原型对象 1.使用工厂方法创建对象 2.构造函数构 ...
js 移动端滑块验证码插件_VUE技术详解，Vue.js从入门到精通
[Vue.js简介] Vue.js是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue采用自底向上增量开发的设计.Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
React.js 基础入门四--要点总结
JSX语法,像是在Javascript代码里直接写XML的语法,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,React 官方推荐使用JSX, 当然你想 ...
【尚硅谷】Vue.js从入门到精通笔记
目录第1章:Vue核心 1-1.Vue简介 1-1-1.什么是Vue 1-1-2.Vue的特点 1-1-3.搭建Vue开发环境 1-1-4.创建Vue对象 1-2.模板语法 1-3.数据绑定 1-4 ...
学习 | egg.js 从入门到精通
快速初始化使用脚手架,对项目进行快速初始化 $ mkdir egg-example && cd egg-example $ npm init egg --type=simple $ ...

最新文章

热门文章