一、概述

参考地址：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. linux学习笔记13--命令head和tail

    head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头或结尾某个数量的文字区块,head 用来显示档案的开头至标准输出中,而 tail 想当然尔就是看档案的结尾. 1．命令格式: hea ...

  2. linux-centos jdk安装

    第一步:查看Linux自带的JDK是否已安装 (卸载centOS已安装的1.4) 安装好的CentOS会自带OpenJdk,用命令 java -version ,会有下面的信息: java versi ...

  3. Docker是用来干什么的？【快速入门】

    Docker从去年开始不仅能在Linux下运行 ,还支持windows.osX等主流系统. 下面的例子我自己经常使用,当然你有更好的案例也可以分享给我. 尝试新软件 对开发者而言,每天会催生出的各式各 ...

  4. 常用cms

    最近,朋友要建站让我帮着推荐个好的CMS(内容管理系统),个人认为其实选择哪个CMS并不重要,除了对搜索引擎的亲好外,个人的使用操作习惯和对所选CMS系统的熟悉程度有很大关系. 这里为需要建站但又徘徊 ...

  5. easyui -grid每列绑定tooltip

    /**用法:*/function doCellTip() { $('#dg').datagrid('doCellTip', { 'max-width': '100px' });} /** * 扩展两个 ...

  6. SQLServer 批量备份与还原

    备份与还原是数据库避不开的主题,而作为DBA,经常会面临将一台机器上的所有数据库重新构建到一台新机器上的要求: 在现在都讲究自动化管理的时代,传统的界面操作备份还原的做法不仅浪费时间和精力,而且还很容 ...

  7. Prime triplets (Project Euler 196)

    original version hackerrank programming version 题目大意是定义了一个正整数的表,第一行是1,第二行是1,2,第三行1,2,3...定义prime tri ...

  8. 【BZOJ】2016: [Usaco2010]Chocolate Eating（二分）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2016 这些最大最小显然是二分. 但是二分细节挺多的...这里注意二分的区间,可以累计所有的可能,然后 ...

  9. 怎么用ChemDraw 15.1 Pro绘制彩色结构

    ChemOffice 15是最新的ChemDraw化学工具套件,合理的使用这套软件可以大幅度的提高研究人员的工作效率.也有一些化学老师使用这套化学绘图软件教学,其可以绘制彩色结构有效增强教案说服力并吸 ...

  10. 配置管理之PackageProvider接口

     PackageProvider的开始 从前面几章中我们了解到了一点:想知道如何加载相关配置文件就必须去找StrutsXmlConfigurationProvider类和XmlConfiguratio ...