学习了React很久,一直没有机会总结下,最近打算写一个简单的React,希望让初学者一看就懂,不走弯路,我尽量写的简明点
好了开始吧!
首页我们要利用npm安装 react(当然你也可以用引用方式)跟着下面步骤: npm install -g create-react-app
create-react-app my-app

cd my-app
npm start //这条命令就是启动react这个项目 如果你打开my-app目录跟我上面的一样,那么我们继续
打开App.js,把多余的代码删除了,像我这样就好,react是jxs语法来写

下面开始写组件,我们在div里面:

 import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css'; class App extends Component {
render() {
return (
<div className="App">
组件一
</div>
);
}
} export default App; //现在App就是一个组件,export default会把App暴露出去,让其他组件引入

我们打开index.js文件,你会看到 import App from './App'   (这句话的意思是,引入App.js这个组件)

ReactDom.render(<App/>,document.getElementById("root"))  这句话会把 App这个组件挂载到index.html文件的id为root的div里面

import在es6里面可以引入export default 暴露出来的组件


React教程-初入的更多相关文章

  1. 【Xbox one S】开箱&开机&初入坑心得

    再来一发水贴,先上产品标准照镇贴: 前言 身为一个资深单机游戏玩家,常年混迹在PC平台,但内心深处一直对主机有种迷之向往,感觉那才是单机游戏的正处之地,坐沙发上拿着手柄对着电视跌宕起伏才是正确的游戏姿 ...

  2. Git初入

    Git记录 使用git 也有一段时间了, git的入门级了解也就不再多说, 但平常使用中, 仍然会遇到很多问题, 在此记录一二. 在查资料的过程中, 发现了两个比较好的资料: 特别是第二个, 相当详细 ...

  3. 初入TensorFlow————配置TensorFlow

    能看到这说明你对python已经有一定的了解了,因此很多基础直接跳过. 一.TensorFlow环境配置: TensorFlow的环境配置在网上很多的教程都是用anaconda的方式,但是很容易出现冲 ...

  4. 初入 Ubuntu 的一些操作 · Lei's blog

    查看系统版本 cat /etc/os-release 修改 root 密码 passwd 新建用户 新建用户: adduser username 将新用户加入 sudo 组,这样就可以用 sudo 命 ...

  5. Scala初入

    何为Scala物 Scala为基于JVM虚拟机中的面向对象与函数式编程思想并且完全兼容Java的混合编程语言,可以是Scala与Java是同根同源的,既然Scala与JAVA都是基于JVM之上的编程语 ...

  6. 初学HTML5、初入前端

    学习HTML5是一个漫长的过程,当中会遇到很多技术与心态上的变化.刚开始学习,我们不能发力过猛,需要一个相对稳定的状态去面对.多关注一些自己感兴趣的网站和技术知识,建立自己的信心与好奇心,为以后的学习 ...

  7. 0x00linux32位汇编初入--前期准备

    0x00汇编初入--前期准备 一.汇编工具 在linux平台下常用的编译器为as,连接器为ld,使用的文本编辑器为vim,汇编语法为att 以下是一些工具: addr2line 把地址转换为文件名和行 ...

  8. 初入职场的建议--摘自GameRes

    又开始一年一度的校招了,最近跑了几个学校演讲,发现很多话用短短的一堂职业规划课讲还远远不够,因为那堂课仅仅可能帮大家多思考怎样找到一份合适的工作,并没有提醒大家怎样在工作中发展自己的职业. 见过这么多 ...

  9. SuperMap iClient for JavaScript初入

    SuperMap iClient for JavaScript初入 介绍SuperMap for Js的简单使用. 推荐先看下这篇文档:SuperMap iClient for JavaScript ...

随机推荐

  1. python装饰器,其实就是对闭包的使用。

    装饰器 理解装饰器要先理解闭包(在闭包中引用函数,可参考上一篇通过例子来理解闭包). 在代码运行期间动态增加功能的方式,称之为“装饰器”(Decorator). 装饰器的实质就是对闭包的使用,原函数被 ...

  2. js媒体查询设置根字号

    !function(n){var e=n.document,t=e.documentElement,i=750,d=i/50,o="orientationchange"in n?& ...

  3. 最常用的15大Eclipse开发快捷键技巧【转】

    引言 做java开发的,经常会用Eclipse或者MyEclise集成开发环境,一些实用的Eclipse快捷键和使用技巧,可以在平常开发中节约出很多时间提高工作效率,下面我就结合自己开发中的使用和大家 ...

  4. UVa 1606 两亲性分子

    https://vjudge.net/problem/UVA-1606 题意:平面上有n个点,每个点为白点或者黑点.现在需放置一条隔板,使得隔板一侧的白点数加上另一侧的黑点数总数最大.隔板上的点可以看 ...

  5. go语言 变量类型

    package main import "fmt" func main() { //这是我们使用range去求一个slice的和.使用数组跟这个很类似.创建数组 nums := [ ...

  6. Goroutines和Channels(四)

    如果说goroutine是Go语言程序的并发体的话,那么channels则是它们之间的通信机制. 一个channel是一个通信机制,它可以让一个goroutine通过它给另一个goroutine发送值 ...

  7. net网站发布-允许更新此预编译站点 及修改发布后内容

    我们可以通过如下的方法发布VS2010的网站: “生成”→“发布网站”:弹出对话框! 在打开的对话框中,有一个选项是至关重要的,那就是“允许更新此预编译站点”: “允许更新此预编译站点”这一项,默认情 ...

  8. 使用 CSS 选择器从网页中提取数据

    在 R 中,关于网络爬虫最简单易用的扩展包是 rvest.运行以下代码从 CRAN 上安装:install.packages("rvest")首先,加载包并用 read_html( ...

  9. mint18

    ubuntu16.04用了一段时间,果然遇到祖传内部错误.然后虚拟机遇到2次重启后卡死在黑屏闪光标位置.但是用系统盘准备重装,执行到分区这步放弃,重启,居然有能启动. 作为开发机,实在有点胆战心惊,虽 ...

  10. 【Golang 接口自动化03】 解析接口返回XML

    上一篇我们学习了怎么发送各种数据类型的http请求,这一篇我们来介绍怎么来解析接口返回的XML的数据. 解析接口返回数据 定义结构体 假设我们现在有一个接口返回的数据resp如下: <?xml ...