react

  • 创建方法

    • 首先确定你的电脑上面已经安装了node和npm
    • 检查方法:window键 输入cmd 输入node -v 或者 npm -v
  • 在全局安装create-react-app这条命令 可以帮助你快速搭建react环境
1. npm i -g create-react-app
  • 创建完成后
create-react-app (你要创建项目的名字)

成功后

cd (你创建项目的文件夹)

npm start

此时你会发现已经有一个react项目打开了在你的浏览器中

那在你构建的项目中有几个文件夹以及文件 比如README,node_moudles,srcc,pubilc 等等。

那么public中的index.html是根目录所有的组件都会汇集于此

那么在src中就是我们构建不同组件等的文件夹 里面必须包含一个index.js文件,你可以把他理解成一个容器, 装什么的呢?是用来一如所有你构建的组件的汇集于此而后导入public中的index.html中

那么下面开始实现以下简单的操作 "hello word"

import React from "react";
import ReactDOM from "reacvt-dom"; ReactDOM.render('hello word',document.getElementById("app"))

此时呢,在你启动的浏览器的页面上不出意外的话就会显示出hello word的字样了

那这是传入一个字符串 ,那么问题来了 组件化 这也没有组件化啊?

那么我们在src文件夹下面在建立几个文件 比如 Hello.js , Word.js , Person.js

在Hello.js中写

import React,{Component} from "react";
// Component 为组件的意思 它是react中的方法 利用es6的方法引入进来
// 那么这个是hello组件 所有就要导出啊
export default Hello class extends Component{
// 这里面有个render方法
render(){
return(
<div>
Hello
</div> )
}
}

这里面的语法是不是很奇怪 在js中写html 这就是react伟大的Jsx语法 为Javascript与xml的结合

在Word.js中写

import React,{Component} from "react";
// Component 为组件的意思 它是react中的方法 利用es6的方法引入进来 export default Word class extends Component{
// 这里面有个render方法
render(){
return(
<div>
Word
</div> )
}
}

在Person.js中写

import React,{Component} from "react";
// Component 为组件的意思 它是react中的方法 利用es6的方法引入进来 export default Person class extends Component{
// 这里面有个render方法
render(){
return(
<div>
Person
</div> )
}
}

那么好 现在我们的组件已经算是写完了 我们也exprot default 默认导出了,那么谁引入呢?对 就是src下的index.js文件

import React from "react";
import ReactDOM from "react-dom";
//在这里我们将引入 我们刚刚写的三个组件
// 组件的文件首字母必须大写
import Hello from "./Hello.js";
import Word from "./Word.js";
import Person from "./Person.js";
//ok 现在已经引入了 然后呢 ? ReactDOM.render(
<div>
<Hello/>
<Woed/>
<Person/>
</div>
document.getElementById('root')
) //这里呢 就是若是多个组件的情况下 最外层必须有且只有一个父级盒子包裹

这时候在你的浏览器页面上就会输出了

Hello

Word

Person

也就是你三个组件中的内容了。

react-1的更多相关文章

  1. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  2. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  3. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  4. React 入门教程

    React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...

  5. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

  6. 2017-1-5 天气雨 React 学习笔记

    官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...

  7. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  8. React在开发中的常用结构以及功能详解

    一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...

  9. React的使用与JSX的转换

    前置技能:Chrome浏览器   一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...

  10. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

随机推荐

  1. java引用传递,值传递

    2个interger的引用对象传给一个swap方法在方法内部进行交换 1.1 java中方法参数传值方式 java中方法传参数都是值传递的,只不过根据参数的类型是引用类型还是非引用类型 引用类型传递的 ...

  2. chrome浏览器重新安装不了

    1.打开注册表方法1. windows键 + R-->输入regedit-->回车方法2.开始-运行里输入regedit方法3.单击任务栏中windows图标,在搜索程序和文件中输入reg ...

  3. 如何在调用Marketing Cloud contact创建API时增加对扩展字段的支持

    需求:扩展字段"微信ID"是我创建出来的extension field,我想用Marketing Cloud提供的contact creation API,在创建contact时也 ...

  4. 在线p图网址

    在线P图网址 如果你是简易的P图,不用那么麻烦的去下载安装Photoshop,可以使用以下网址在线编辑 https://www.uupoop.com/ps/?hmsr=ps_menu

  5. delphi Tidhttp 发送json格式报文

    type TwmsThreadpostJson = class(TThread) private Furl: string; Fpostcmd: string; FResult: string; FB ...

  6. okhttp初识拦截器

    拦截器流程: 简单回顾同步 / 异步: 同步请求就是执行请求的操作是阻塞式,直到HTTP响应返回. 异步请求就类似于非阻塞式的请求,它的执行结果一般都是通过接口回调的方式告知调用者. okHttp拦截 ...

  7. HDU 4085 斯坦纳树+DP

    https://cn.vjudge.net/problem/HDU-4085 给你n,m,k ,分别表示有n个点,m条边,每条边有一个权值,表示修复这条边需要的代价 从前k个点中任取一个使其和后k个点 ...

  8. CSS基础学习 20.CSS媒体查询

  9. Elasticsearch:运用search_after来进行深度分页

    在上一篇文章 "Elasticsearch:运用scroll接口对大量数据实现更好的分页",我们讲述了如何运用scroll接口来对大量数据来进行有效地分页.在那篇文章中,我们讲述了 ...

  10. linux基础_使用指令3

    时间日期类 1.date指令 功能:显示当前日期 语法: date:显示当前时间 date +%Y:显示当前年份 date +%m:显示当前月份 date +%d:显示当前是哪一天 date &quo ...