二手前端入门React项目
个人对ReactJS这门技术比较感兴趣,在基友的帮助下成功创建了一个React标准前端工程,过程中遇到了不少麻烦,今天作为笔记一般记录一下遇到的问题和解决方案。
- 基础环境
手头一台Mac 使用OSX系统,IDE使用WebStorm,装好了npm
- 安装过程
因为没有很深厚的前端基础,所以学习时候采用create-react-app这个官方脚手架搭建,在此之前无论是windows,mac os,linux必须在bash中装有npm。
本人在安装过程中发生灵异现象,安装create-react-app却无法在bash中使用。安装第一步就是在装有npm的bash中输入
npm install -g create-react-app
安装完成之后,一直显示command not found,不知道哪里配置出了问题。
后来在网上找到一个解决方案,在user根目录下创建一个全局包,并把npm的全局命令设置为这个根目录,然后配置.bash_profile
首先创建一个包含全局命令的文件夹
mkdir 文件夹名字
然后配置npm指向
npm config set prefix ‘文件夹路径’
然后配置user根目录~下的.bash_profile
export PATH=文件夹路径:$PATH
接着如果还是not found 就在安装一次,之后检查文件夹有否生成内容,我到此步已经成功装上。然后到你的js工作目录下,创建React项目。
create-react-app 项目名
之后会生成一个标准的react项目
启动就好,启动命令
npm start
- Just go into it
打开index.html,发现它只有一个标签root,而所有的布局和组件全由ReactJS完成。
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker';ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker();
乍一看,宛如Java代码一般。
项目搭建已经完毕,可以尽情地在JSX的世界中surfing(浪)了,可以预见前面还有很多坑。
- 熟悉React组件开发模式
12月16日添加
新前端框架享誉盛名的组件化,今日初探,特地记录一下。
一般React项目只有一个标签,并根据此标签不断的进行拓展,根据Class的组合组成新的页面。
最基础的是Index
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App';import registerServiceWorker from './registerServiceWorker';ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker();
它的页面构造是由App这个标签来拓展的,仔细观察可以看到这个App很像是Java的对象。我们进入App.js查看。
import React, { Component } from 'react'; import './App.css'; import Button1 from './Button1' import Button2 from './Button2' class App extends Component {constrender() {return (<div className="App"><h1>hello world</h1><div><Button1/><Button2/></div></div> );} } export default App;
我将App这个class的render方法改写,嵌入了两个按钮。在最后一行export一个default名字,就像一个单例模型返回对象一样,在index引入的时候使用这个默认的对象名,就可以使用这个组件了。而引入组件的时候,需要使用html的尖括号标签来“调用”对象。
本次写了两个button Demo,点击之后alert一下,表示绑定了点击事件,它的构成和Java的class很像。在处理完组件逻辑之后,render一下生成一个视图。
import React, { Component } from 'react'; import './App.css';class Button1 extends React.Component{handleClick() {alert("this is btn1");}render() {return (<button className="btn1" onClick={this.handleClick}>按钮1</button> );} } export default Button1;
import React, { Component } from 'react'; import './App.css';class Button2 extends Component{handleClick() {alert("this is btn2");}render() {return (<button className="btn2" onClick={this.handleClick}>按钮2</button> );} } export default Button2;
页面上的表现是这样的。css可以根据个人爱好调制。
点击之后
从此Demo和以往的页面构造知识联系起来,可以感悟到一些现代前端的代码设计思想。
- 参考资料
用Facebook的create-react-app快速构建React开发环境
https://segmentfault.com/a/1190000006055973
修复npm安装全局模块权限问题
http://blog.csdn.net/gentlycare/article/details/51279529
转载于:https://www.cnblogs.com/chentingk/p/8011953.html
二手前端入门React项目相关推荐
- EMP微前端-Vue和React项目互相调用
团队原文:https://github.com/efoxTeam/emp/wiki/%E3%80%8AVue%E5%92%8CReact%E9%A1%B9%E7%9B%AE%E5%A6%82%E4%B ...
- 前端《Vue.js从入门到项目实战》PDF课件+《微信小程序实战入门第2版》PDF代码调试
JS进行开发,正如一切的编程语言都立足于电元信号的正负极,即01码,可为什么软件都不采用二进制编码来 进行开发呢?这里面牵扯到一个成本的问题,这正是影响项目领导者进行决策的关键因素.Vue项目与原生J ...
- 前端react项目---全球新闻发布管理系统
一. 项目入门 1. 项目介绍 该项目是一个全球新闻发布管理系统,可供普通游客,超级管理员,区域管理员,和区域编辑四种角色访问,针对不同的角色所展示的页面也不相同,对于游客而言可以访问到新闻展示页面和 ...
- react 阮一峰_React 最简单的入门应用项目
学习一项工具,最快的方式就是边学便用.在学习 GUI 时我会边看API边写一个记事本,学习 web 框架时我会边学边写一个留言板. 学习和工作上一直是在写后端代码,有一点前端基础,但没有用过JS框架, ...
- react项目中的参数解构_一天入门React学习心得
一天入门React学习心得 阅读前必读 本文写的仓促,算是一个学习笔记吧,算是一个入门级的学习文章.如果你刚刚入门,那么可能一些入门的视频可能更加适合你.但如果具备一些知识,比如Vue,那么视频就不适 ...
- react前端显示图片_如何在react项目中引用图片?
如何在react项目中引用图片?本文码云笔记将为大家整理在react项目中插入图片以及背景图片的方法,希望对需要的小伙伴提供一些参考. 在react项目中插入图片以及背景图片的方法共有2种: 1.im ...
- react从零基础入门到项目实战视频教程
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站, 并于 2013年 5 月开源.React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它.这 ...
- 前端—react项目及版本更新对比
介绍: 项目搭建逻辑:1)项目中index.html中渲染的内容.2)看main.js中绑定的组件渲染 React框架 由Facebock开源的一款前端框架. 工作中使用的版本: react:16.2 ...
- 前端React项目部署
前端react项目部署文档 1.下载phpstudy 小皮面板(phpstudy) - 让天下没有难配的服务器环境! 2.找到配置文件 设置-文件位置-nginx-conf 3.修改nginx.con ...
最新文章
- 百度研究院:招聘计算机视觉和生物计算方向实习生
- 深度学习环境配置指南:Pytorch、TensorFlow、Keras
- nyoj1121周期串
- Nhibernate代码生成器v2.1中文版
- H.264中POC类型之探讨
- CentOS7设置自定义开机启动,添加自定义系统服务
- scala入门-07特质类(trait)的使用
- 前端学到什么程度可以找到工作?
- 2021最新Java高频面试题,很适合大厂面试
- 教程:如何使用Java以编程方式打印PDF文件?
- Java后台日常学习环境搭建
- 解决default activity not found办法大全
- 谷歌邮箱SMTP Password:SMTP授权码如何获得
- mysql 数据库健康巡检 报告
- 腹有诗书气自华,新华三交换机大有不同
- ​2020 年大前端技术趋势解读
- linux 查看磁盘寿命,如何确定Linux下SSD的写周期数或预期寿命?
- echarts 之饼形图配置属性
- Java导出多个excel并打包压缩成.zip文件
- puzzle(1036)数邻、多米诺骨牌