004-React入门概述
一、概述
参考地址:https://reactjs.org/docs/try-react.html
1.1、本地快速体验
<!DOCTYPE html> <html><head><meta charset="UTF-8" /><title>Hello World</title><script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script></head><body><div id="root"></div><script type="text/babel">ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));</script><!--Note: this page is a great way to try React but it's not suitable for production.It slowly compiles JSX with Babel in the browser and uses a large development build of React.To set up a production-ready React build environment, follow these instructions:* https://reactjs.org/docs/add-react-to-a-new-app.html* https://reactjs.org/docs/add-react-to-an-existing-app.htmlYou can also use React without JSX, in which case you can remove Babel:* https://reactjs.org/docs/react-without-jsx.html* https://reactjs.org/docs/cdn-links.html--></body> </html>
1.2、完整的开发环境
包括linting,测试和内置优化;
1.2.1、新建
使用全功能入门工具包创建新应用程序。
idea工具方式参看:http://www.cnblogs.com/bjlhx/p/8968382.html
npm命令【node6+】
npm install -g create-react-app create-react-app my-appcd my-app npm start
1.2.2、添加一个已存在
将React添加到构建系统或更大的应用程序。
idea工具方式参看:http://www.cnblogs.com/bjlhx/p/8968382.html
npm方式:
npm init npm install --save react react-dom
目录结构
node_modules: 这里面包含了react项目中会用到的一些组件,install的时候下载下来的,你可以进去看看,有一些如base64之类的我们可能会用到的组件;
public:里面包含了我们项目中的启动页面;
src:里面包含了一些我们自己使用的js文件,css文件,img文件等等
1.3、hello
默认启动是一个图
编写Hello word,在 index.js中作如下修改
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')); ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('root') ); registerServiceWorker();
此时运行项目预览
1.4、提前熟悉es6语法
熟悉箭头函数,类,模板文字,let和const语句。等
004-React入门概述相关推荐
- React入门(一)之基本语法(内容较多)
React入门(一) 一.介绍React 1.1.简介 1.2.特点 1.3.与其他框架对比 二.搭建环境 2.1.通过引入文件的方式 2.2.通过官方脚手架的方式 2.3.第三方脚手架 三.JSX ...
- react入门代码_如何在React中构建温度控制应用程序-包括提示和入门代码
react入门代码 我们正在建立的 (What we're building) In this beginner React project, we're going to learn how to ...
- React入门看这篇就够了
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所 ...
- 《慕课React入门》总结
React 入门与实战 react组件 虚拟DOM的概念 这是React性能高效的核心算法 React为此引入了虚拟DOM(Virtual DOM)的机制.基于React进行开发时所有的DOM构造都是 ...
- React入门指引与实战
React是Facebook公司推出的前端组件化解决方案,目的在于解决前端开发中存在的各个痛点.目前,前端框架与库层出不穷,形成了异常繁荣的局面,那么Facebook为何还要重复造轮子呢?究其原因,F ...
- React 入门手册
大家好,我是若川.推荐这篇可收藏的React入门手册.也推荐之前一篇类似的文章<如何使用 React 和 React Hooks 创建一个天气应用>. 点击下方卡片关注我.加个星标 Rea ...
- React 入门学习笔记2
摘自阮一峰:React入门实例教程,转载请注明出处. 一.获取真实的DOM节点 组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM).只有当它 ...
- 容器编排技术 -- Kubernetes入门概述
容器编排技术 -- Kubernetes入门概述 简介 Kubernetes是一个开源的,用于管理云平台中多个主机上的容器化的应用,Kubernetes的目标是让部署容器化的应用简单并且高效(powe ...
- 第一章:React入门
第一章:React入门 1.1. React 1.1.1. 官网 英文官网: https://reactjs.org/ 中文官网: https://doc.react-china.org/ 1.1.2 ...
- react入门(1)之阮一峰react教程
阮一峰老师的github地址:React Demos React 入门实例教程 1.HTML模板 <!DOCTYPE html> <html><head>// re ...
最新文章
- python中gil锁和线程锁_Python线程——GIL锁、线程锁(互斥锁)、递归锁(RLock)...
- 并发 线程交替执行_并发与并行的区别
- 云计算比本地计算机可靠,1-云计算复习题
- android 访问服务器sql_XSS 攻击、CSRF 攻击、SQL 注入、流量劫持(DNS 劫持、HTTP 劫持)—— 浏览器安全
- php有几种数据结构,PHP数据结构有几种_后端开发
- c比java运行快的原因_C/C++比JAVA快的原因
- SQLite剖析之事务处理技术
- cron表达式解析生成网站
- CrossPHP 1.5.5 发布了
- 如何用python下载图片_Python之如何优雅的下载一堆小哥哥图片
- pt和字号的对应关系
- 熵权法STATA程序(第二版修正)
- 学生结构体,学生有姓名 学号 三门成绩 班级人数为五人 。实现 1:第一门成绩的平均分;2:找出两门以上不及格的学生,输出他们的姓名学号及三门成绩; 3:找出平均分在90分以上或者全部成绩在85分以上
- 揭秘:游戏开发的薪资情况和发展前景!
- Claymore挖矿软件参数说明
- 图形数据库Titan-学习笔记
- 【观察】让数字化转型之路越走越宽,DXC Technology释放新价值
- Database---Access Methods
- 毕达哥拉斯素数的王伟猜想的简要证明
- Hurst指数python实现
热门文章
- php smarty框架案例,php封装的smarty类案例
- 66319d电源使用说明书_矿用防爆交换机如何正确安装调试和使用?
- CH0805 防线 (二分值域,前缀和,特殊性质)
- 微信小程序--页面传参
- 判断listview是上滑还是下滑的方法
- entity framework5 sqlserver2005 事务(TransactionScope)报未启用MSDTC错误解决办法
- linux分文件编程、静态库与动态库
- sklearn 安装_初识sklearn
- Linux中mysql的卸载和重装,在Linux下面卸载与重新安装Postgresql
- 基于使用AspectJ实现AOP,注解AOP开发(基于xml文件、基于注解)