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. ASE19团队项目alpha阶段model组 scrum6 记录

    本次会议于11月8日,19时整在微软北京西二号楼sky garden召开,持续15分钟. 与会人员:Kun Yan, Lei Chai, Linfeng Qi, Xueqing Wu, Yutong ...

  2. 第一章、VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01

    目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...

  3. 嵌入式Linux应用开发完全手册读书笔记——常用的命令

    嵌入式开发中常用的命令 grep命令 用法:grep [option] PATTERN [FILE...] 例如: 在内核目录下查找包含"request_irq"字样的文件 gre ...

  4. config.json读取和存储

    json格式的配置文件的读取和存储 public class ConfigHelper { public static T GetConfig<T>(string path) { if ( ...

  5. 按照教程自动安装RFNoC时.在使用pip安装pybombs时出现报错,解决办法

    $ sudo apt-get install git $ sudo apt-get install python-setuptools python-dev python-pip build-esse ...

  6. Vue项目中的文件导出

    项目中涉及到文件导出,分xml和excel导出.不同的文件导出格式不同,需要根据文件类型判断导出格式. exportAllData(val){ //全部导出 if(!val){ this.export ...

  7. 如何在Google Maps 添加多个标记

    JS如下: (function() {     window.onload = function() {         // Creating an object literal containin ...

  8. Kafka集群---分布式消息系统

    概念: kafka是一种消息中间件 作用: 解耦.冗余.提高扩展性.缓冲 保证顺序.灵活.削峰填谷 异步通信 kafla角色 producer: 生产者,负责发布消息 consumer: 消费者,负责 ...

  9. Codeforces Round #402 (Div. 2) D题 【字符串二分答案+暴力】

    D. String Game Little Nastya has a hobby, she likes to remove some letters from word, to obtain anot ...

  10. BZOJ3514 Codechef MARCH14 GERALD07加强版 LCT+可持久化线段树

    自己独自想出来并切掉还是很开心的~ Code: #include <bits/stdc++.h> #define N 400005 #define inf 1000000000 #defi ...