保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

反应材料设计:如何安装?

关于反应材料设计的简介

材料设计是Google在2014年开发的一种设计语言,在网络和移动应用程序中非常流行。 它的灵感来自于物理世界的纹理,包括光的反射方式和阴影的投射方式。材料表面重新构想了纸张和墨水的介质。 通过使用Material-UI-Library,可以很容易地在React Web或移动应用程序中使用Material Design元素。 

的library’s website can be found at //material-ui.com.

 

 设置反应材料项目: 

第一步是设置一个新的react项目,这可以通过以下方式使用create-react-app脚本来完成:

 

$ npx create-react-app 反应-material-ui

 

通过使用npx命令进行安装,我们可以执行create-react-app,而无需先下载并安装它。 

 执行此命令后,将有一个新的项目目录。这称为react-material-ui。 

转到您创建的新项目文件夹,您将找到React starter项目。

 

安装Material-UI库和依赖项

下一步是使用以下命令安装更多依赖关系,这将确保已安装Material-UI-Library。 

$ npm install @ material-ui / core

 

之后,我们需要安装Contentful JavaScript库,以便能够访问Contentful支持的库:

$ npm install 满足的

 

现在,我们需要确保一切工作正常,并通过使用以下命令启动开发Web服务器来做到这一点: 

$ npm开始

 

现在将打开浏览器,并加载默认React应用程序的起始页面。现在,您应该能够在浏览器中看到以下输出:  现在,我们已经完全准备好开始执行示例应用程序。 

 

实施示例应用程序

 

删除默认内容: 

我们需要做的第一件事是删除一些属于默认内容实现的部分。 

      首先打开文件src / App.js并应用以下内容。变化

      删除return语句中可用的JSX代码

      删除从./logo.svg导入的import语句。您也可以删除文件,因为我们不再需要它。 

 

现在,我们可以将自己的代码添加到项目中。 

 

实施导航栏组件:

 

为了添加导航栏,我们需要添加显示导航栏所需的代码。可以使用Material-UI库中的Material Design组件显示此代码,并将其添加到另一个组件中。 

 

要实现新组件,请在目录src中创建一个新的子文件夹组件,并添加一个新文件NavBar.js。 

 

将下面给出的代码插入到新创建的文件中:

 

import 反应from ‘react’

从导入AppBar‘@ material-ui / core / AppBar’

从导入工具栏‘@ material-ui / core /工具栏’

从导入字体‘@ material-ui / core /版式’const NavBar = () => {

    return(

        <div>

        <AppBar position=”static”>

            <Toolbar>

                <Typography variant=”title” color=”inherit”>

                React &Material-UI示例应用程序

                </Typography>

            </Toolbar>

        </AppBar>

        </div>

    )

}导出默认的NavBar;

 

在这里,我们使用Material-UI库中的AppBar,工具栏和版式组件来输出导航栏,如前所示。 

 

为了能够将NavBar包含在我们的主要应用程序组件App中,我们需要确保已导出NavBar。 

 

现在我们准备将NavBar导入src / App.js:

 

从导入React,{组件}‘react’

从导入NavBar‘./components/NavBar’App类扩展了组件{

  render() {

    return (

      <div>

        <NavBar />

      </div>

    )

  }

}导出默认应用

 

的<NavBar />标记会插入JSX代码中,以便导航栏将成为输出的一部分。  

 

实施CourseList组件: 

现在,我们在应用程序中添加了另一个名为CourseList的组件。 

 

我们需要在src / components文件夹内添加一个名为CourseList.js的新文件,并插入以下代码: 

 

从导入React,{组件}‘react’

 

从导入网格‘@ material-ui / core / 格’;

 

从导入TextField‘@ material-ui / core / 文本域’;

 

从*导入*‘contentful’import 课程 from ‘../components/Course’const SPACE_ID = ‘[插入目录ID]’

 

const ACCESS_TOKEN =‘[插入内容访问令牌]’const client = 满足的.createClient({

 

空格:SPACE_ID,

 

accessToken:ACCESS_TOKEN

 

})课程CoursesList扩展了组件{ 状态= {

 

     课程s: [],

 

     searchString:”

 

} constructor(){

 

     超()

 

     this.getCourses()

 

} getCourses =()=> {

 

     client.getEntries({

 

         内容类型:‘course’,

 

         查询:this.state.searchString

 

     })

 

     .then((响应)=> {

 

         this.setState({courses:response.items})

 

         console.log(this.state.courses)

 

     })

 

     .catch((错误)=> {

 

       console.log(“提取条目时发生错误”)

 

       console.error(错误)

 

     })

 

} onSearchInputChange =(事件)=> {

 

     console.log(“Search changed …”+ event.target.value)

 

     如果(event.target.value){

 

         this.setState({searchString:event.target.value})

 

     }其他{

 

         this.setState({searchString:”})

 

     }

 

     this.getCourses()

 

} render(){

 

     返回(

 

         <div>

 

             {this.state.courses吗? (

 

                 <div>

 

                    <TextField style = {{padding:24}}

 

                         id =”searchInput”

 

                         占位符=”Search for 课程s”  

 

                         保证金=”normal”

 

                         onChange = {this.onSearchInputChange}

 

                         />

 

                     <网格容器间距= {24}样式= {{填充:24}}>

 

                         {this.state.courses.map(currentCourse => (

 

                             <网格项xs = {12} sm = {6} lg = {4} xl = {3}>

 

                                <课程课程= {currentCourse} />

 

                             </Grid>

 

                         ))}

 

                     </Grid>

 

                 </div>

 

             ):“No 课程s found” }

 

         </div>

 

     )

 

}

 

}导出默认的CoursesList;

 

 

该组件负责从内容后端服务中检索课程数据,并向用户显示课程列表。 

 

的first connection to Contentful is established by using the Contentful JavaScript library. 

为了建立此连接,您需要登录到内容后端 (//be.contentful.com/login), create a new space, insert a 课程 model like you can see in the following screenshot, 和 access Space ID 和 Access Token from the Space settings — API Keys.

 

 

要访问这两个值,您需要通过单击创建API密钥按钮来创建一个新密钥。

空间ID和访问令牌的值都需要复制并插入到分配给SPACE_ID和ACCESS_TOKEN常量的字符串中。 

 

使用以下代码行:

const client = 满足的.createClient({

空格:SPACE_ID,

accessToken:ACCESS_TOKEN

})

 

连接存储在客户端中。为了从此连接中检索课程列表,将getCourses方法添加到组件类中: 

getCourses =()=> {

client.getEntries({

内容类型:‘course’,

查询:this.state.searchString

})

.then((响应)=> {

this.setState({courses:response.items})

console.log(this.state.courses)

})

.catch((错误)=> {

console.log(“提取条目时发生错误”)

console.error(错误)

})

}

 

client.getEntires方法帮助请求从Contentful检索课程列表。此配置对象需要两个属性: 

 

      内容类型

      询问

由于getEntries的调用是异步操作,因此它返回一个promise,使我们能够使用then连接到结果。 在then方法中,课程列表位于 响应项目。这些项目存储在 课程s 组件状态的属性。

的component’s output is defined by the JSX code which is returned by the 渲染方法:

render(){

 

     返回(

 

         <div>

 

             {this.state.courses吗? (

 

                 <div>

 

                     <TextField style = {{padding:24}}

 

                         id =”searchInput”

 

                         占位符=”Search for 课程s”  

 

                         保证金=”normal”

 

                         onChange = {this.onSearchInputChange}

 

                         />

 

                     <网格容器间距= {24}样式= {{填充:24}}>

 

                         {this.state.courses.map(currentCourse => (

 

                             <网格项xs = {12} sm = {6} lg = {4} xl = {3}>

 

                                 <课程课程= {currentCourse} />

 

                             </Grid>

 

                         ))}

 

                     </Grid>

 

                 </div>

 

             ):“No 课程s found” }

 

         </div>

 

     )

 

}

 

在这里,我们利用了两个Material-UI组件: 文本域。仅当课程项目在以下位置可用时,两个组件才添加到输出中 此州课程。在这种情况下,用户可以使用 文本域 启动免费文本搜索。如果文本字段的值更改了方法 onSearchInputChange 被称为 searchString 状态对象的属性将使用该新值进行更新。

Material-UI网格组件用于以与屏幕尺寸相对应的网格布局显示课程。特定课程的输出由定制生成 课程 下一步中实现的组件。当前课程将通过 课程 参数。

同样,我们需要导入并添加 课程清单 App.js中的组件:

从导入React,{组件}‘react’

从导入NavBar‘./components/NavBar’

从导入CoursesList‘./components/CoursesList’App类扩展了组件{

  render() {

    return (

      <div>

        <NavBar />

        <CoursesList />

      </div>

    )

  }

}导出默认应用

 

实施课程组件 

的last step is to implement the 课程 component. 

为此,请在文件夹src / components中创建一个新文件Course.js并插入以下代码:

 

import 反应from ‘react’

从进口卡‘@ material-ui / core / Card’

从导入CardActions‘@ material-ui / core / 卡片动作’

从导入CardContent‘@ material-ui / core / 卡内容’

从导入CardMedia‘@ material-ui / core / CardMedia’

从导入按钮‘@ material-ui / core / Button’

从导入字体‘@ material-ui / core /版式’const 课程 =(道具)=> {

    console.log(props)

    return(

        <div>

            { props.course ? (

                <Card >

                    <CardMedia style = {{height:0,paddingTop:‘56.25%’}}

                    image = {props.course.fields.courseImage.fields.file.url}

                    title = {props.course.fields.title}

                    />

                    <CardContent>

                    <版式装订线底部变体=”headline” component=”h2″>

                        {props.course.fields.title}

                    </Typography>

                    <版式组件=”p”>

                        {props.course.fields.description}

                    </Typography>

                    </CardContent>

                    <CardActions>

                    <Button size=”small” color=”primary”href = {props.course.fields.url} target =”_blank”>

                        Go To 课程

                    </Button>

                    </CardActions>

                </Card>

            ) : null}

        </div>

    )

}导出默认课程

 

这就是我们完成实施的方式。 

 结论:

Material-UI帮助我们增强React应用程序的输出,并帮助从头开始在应用程序中实现实际示例。 

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论 点击这里取消回复

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。