一、概述

参考地址: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.html You 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-app cd 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入门概述的更多相关文章

  1. React入门学习

    为了获得更好的阅读体验,请访问原地址:传送门 一.React 简介 React 是什么 React 是一个起源于 Facebook 的内部项目,因为当时 Facebook 对于市场上所有的 JavaS ...

  2. 【React】学习笔记(一)——React入门、面向组件编程、函数柯里化

    课程原视频:https://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.React 概述 1.1.R ...

  3. react入门(3)

    在第一篇文章里我们介绍了jsx.组件.css写法  点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环  点击查 ...

  4. react入门(1)

    这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...

  5. react入门(2)

    接着上一次的讲,如果没有看过上一篇文章的小伙伴可以先看一下http://www.cnblogs.com/sakurayeah/p/5807821.html React事件 可以先看一下官网讲解的内容h ...

  6. react入门(4)

    首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...

  7. React 入门实例教程(转载)

    本人转载自: React 入门实例教程

  8. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  9. NoSQL入门概述

    入门概述 1 NoSQL是什么? NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL",泛指非关系型的数据库.随着互联网web2.0网站的兴起,传统的关 ...

  10. React入门 (1)—使用指南(包括ES5和ES6对比)

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

随机推荐

  1. 不要把<a href="">当作按钮用

    代码如下: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> < ...

  2. linux 查找文件并移动

     find . -name '10-*.dat' -exec mv {} ../ \; 这里:  => -exec mv {} /mnt/mp3 \; - 运行mv命令.  => {} ...

  3. Oracle面试题目及解答

    这里的回答并不是十分全面,这些问题可以通过多个角度来进行解释,也许你不必在面试过程中给出完全详尽的答案,只需要通过你的解答使面试考官了解你对ORACLE概念的熟悉程度. 1. 解释冷备份和热备份的不同 ...

  4. CSS学习笔记(2)--html中checkbox和radio

    checkbox复选,radio单选 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. java对象实现深复制的方法

    p2 = (Person)org.apache.commons.lang3.ObjectUtils.cloneBean(p); Person p2 = new Person(); p2 = (Pers ...

  6. Alluxio部署(集群模式)

    下载(pre-build for Hadoop 2.7) http://www.alluxio.org/download` 解压 tar -xvf alluxio-1.3.0-hadoop2.7-bi ...

  7. 微信小程序2 - 扩展Page参数

    官方默认的Page初始代码为 var option = { /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 * */ onLoad: function ...

  8. 【vijos】1892 树上的最大匹配(树形dp+计数)

    https://vijos.org/p/1892 这个必须得卡评测机+手动开栈才能卡过QAQ 手动开栈我百度的... int size=256<<20; //256MB char *p=( ...

  9. [ppurl]从”皮皮书屋”下载电子书的姿势

    (欢迎转载,转载请注明出处:http://blog.csdn.net/hcbbt/article/details/42072545) 写在前面的扯皮 为什么标题的"皮皮书屋"加上了 ...

  10. HTML特殊字符的html、js、css写法汇总

    ⇠ 箭头类 符号 UNICODE 符号 UNICODE HTML JS CSS HTML JS CSS ⇠ &#8672 \u21E0 \21E0 ⇢ &#8674 \u21E2 \2 ...