React入门_上手Javascript的前端交互库

最近做区块链DAPP小项目，使用React做前端网页，快速介绍一下React入门。其过程如下：

1、使用npm或者yarn创建React-App都可以。在cmd中输入如下命令执行：yarn add create-react-app

2、在cmd中使用如下命令，创建React应用模板：create-react-app newfolder

3、cd到此新文件夹，使用：yarn start。这将创建一个本地环境并打开一个基础网页。

这是我创建的基础网页的效果：

为实现此页面，首先修改App.js如下，重点在注释中说明：
import React, {Component} from 'react';

import {Layout, Header, Drawer, Content, Navigation, HeaderRow, Textfield} from 'react-mdl';

import './App.css';

import 'react-mdl/extra/material.css';//使用react-mdl库模板，yarn add react-mdl

import 'react-mdl/extra/material.js';

import Main from './components/main';

import {Link} from 'react-router-dom';//使用react-router-dom模块，yarn add react-router-dom

class App extends Component {

    render() {

        return (

        <div style={{height: '800px', position: 'relative'}}>

    <Layout fixedHeader>

        <Header title={<span><span style={{ color: '#ddd' }}>Do the right / </span><strong>Vote now for John Snow!</strong></span>}>

            <Navigation>//使用mdl库的各个组件

                <Link to="/resume">Resume</Link>//创建指向各子页面的超链接

                <Link to="/aboutme">KnowJohnSnow</Link>

                <Link to="/projects">Projects</Link>

                <Link to="/contacts">Contacts</Link>

            </Navigation>

        </Header>

        <Drawer title="Vote for John!">//设定页面文字内容

            <Navigation>

                <Link to="/resume">Resume</Link>

                <Link to="/aboutme">KnowJohnSnow</Link>

                <Link to="/projects">Projects</Link>

                <Link to="/contacts">Contacts</Link>

            </Navigation>

        </Drawer>

        <Content>

            <Main/>

        </Content>

    </Layout>

        </div>

    )}}

export default App

子页面的修改在Src文件夹中创建子文件夹，然后编写js文件并import,以projects页面为例：

import React, {Component} from "react";

import image1 from './image1.jpg';

class Project extends Component{

    render() {

        return(

            <div>

                <h3> Project Information here </h3>

                <img src={image1} />//图片素材应放在同一个文件夹

            </div>

        )

    }

}

export default Project;

按照同样的操作即可搭建完成一个miniReact网页。