Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using...
20
Building A User Interface with ReactJS In the midst of the night, I decided to highlight the features of a powerful Javascript library... React.js... while teaching you to build a user interface within a process. SPONSORS Blog 1.5K Share Share Share Share 29 converted by Web2PDFConvert.com
Transcript of Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using...
Building A User Interface with ReactJS
In the midst of the night, I decided to highlight the features of a powerfulJavascript library... React.js... while teaching you to build a user interfacewithin a process.
SPONSORS
Blog
1.5KShareShare ShareShare 29
converted by Web2PDFConvert.com
Building a user interface using React.JSLet's talk about its features
One-way data flow
Components based
Lightweight Virtual DOM DOM (DocumentObject Model)
Can run on server through Node
JSX JSX
Huge SEO support
React Native
Facebook support
Prerequisite
converted by Web2PDFConvert.com
<!DOCTYPE html><!DOCTYPE html><<htmlhtml>> <<headhead>> <<metameta charsetcharset==""utf-8utf-8"">> <<titletitle>>Basic ExampleBasic Example</</titletitle>> <<linklink relrel==""stylesheetstylesheet"" hrefhref==""../shared/css/base.css../shared/css/base.css"" />/> </</headhead>> <<bodybody>> <<h1h1>>Basic ExampleBasic Example</</h1h1>> <<divdiv idid==""containercontainer"">> <<pp>> To install React, follow the instructions on To install React, follow the instructions on <<aa hrefhref==""https://github.com/facebook/react/https://github.com/facebook/react/"">>GitHubGitHub</</aa>>.. </</pp>> <<pp>> If you can see this, React is If you can see this, React is <<strongstrong>>notnot</</strongstrong>> working right. working right. If you checked out the source from GitHub make sure to run If you checked out the source from GitHub make sure to run <<codecode>>gruntgrunt</</codecode>>.. </</pp>> </</divdiv>> <<h4h4>>Example DetailsExample Details</</h4h4>> <<pp>>This is written in vanilla JavaScript (without JSX) and transformed in the browser.This is written in vanilla JavaScript (without JSX) and transformed in the browser.</</pp>> <<pp>> Learn more about React at Learn more about React at <<aa hrefhref==""https://facebook.github.io/reacthttps://facebook.github.io/react"" targettarget==""_blank_blank"">>facebook.github.io/reactfacebook.github.io/react</</aa>>.. </</pp>> <<scriptscript srcsrc==""../../build/react.js../../build/react.js"">></</scriptscript>> <<scriptscript srcsrc==""../../build/react-dom.js../../build/react-dom.js"">></</scriptscript>> <<scriptscript>> varvar ExampleApplication ExampleApplication == React React..createClasscreateClass(({{ render render:: functionfunction(()) {{ varvar elapsed elapsed == Math Math..roundround((thisthis..propsprops..elapsed elapsed // 100100));; varvar seconds seconds == elapsed elapsed // 1010 ++ ((elapsed elapsed %% 1010 ?? '''' :: '.0''.0' ));; varvar message message == 'React has been successfully running for ''React has been successfully running for ' ++ seconds seconds ++ ' seconds.'' seconds.';; returnreturn React React..DOMDOM..pp((nullnull,, message message));; }} }}));; // Call React.createFactory instead of directly call ExampleApplication({...}) in React.render// Call React.createFactory instead of directly call ExampleApplication({...}) in React.render
varvar ExampleApplicationFactory ExampleApplicationFactory == React React..createFactorycreateFactory((ExampleApplicationExampleApplication));; varvar start start == newnew DateDate(())..getTimegetTime(());; setIntervalsetInterval((functionfunction(()) {{ ReactDOM ReactDOM..renderrender(( ExampleApplicationFactoryExampleApplicationFactory(({{elapsedelapsed:: newnew DateDate(())..getTimegetTime(()) -- start start}})),, document document..getElementByIdgetElementById(('container''container')) ));; }},, 5050));; </</scriptscript>> </</bodybody>></</htmlhtml>>
converted by Web2PDFConvert.com
render()
npm (package manager for Javascript)
.msi NOT
Some basics of React.js
MVC (Model–view–controller)
browserify webpack
react.js react-dom.jsnpm webpack babel 1) Installing webpack:
2) Installing react.js and react-dom.js:
converted by Web2PDFConvert.com
3) Installing babel plugins
4) Creating a folder and files
converted by Web2PDFConvert.com
varvar config config == {{
entry entry:: './main.js''./main.js',, output output:: {{ path path::'./''./',, filename filename:: 'index.js''index.js',, }},, devServer devServer:: {{ inline inline:: truetrue,, port port:: 80808080 }},, module module:: {{
loaders loaders:: [[ {{ test test:: /\.jsx?$//\.jsx?$/,, exclude exclude:: /node_modules//node_modules/,, loader loader:: 'babel''babel',, query query:: {{ presets presets:: [['es2015''es2015',, 'react''react']] }} }} ]] }}}}
modulemodule..exports exports == config config;;
<!DOCTYPE html><!DOCTYPE html><html lang = "en"><html lang = "en"> <<headhead>> <meta charset = "UTF-8"> <meta charset = "UTF-8"> <<titletitle>>React AppReact App</</titletitle>> </</headhead>> <<bodybody>> <div id = "app"> <div id = "app"></</divdiv>> <script src = "index.js"> <script src = "index.js"></</scriptscript>> </</bodybody>> </</htmlhtml>>
converted by Web2PDFConvert.com
importimport React React fromfrom 'react''react';;
classclass AppApp extendsextends ReactReact..ComponentComponent {{ renderrender(()) {{ returnreturn (( <<divdiv>> Hello World Hello World!! <<//divdiv>> ));; }}}}
exportexport defaultdefault App App;;
importimport React React fromfrom 'react''react';;importimport ReactDOM ReactDOM fromfrom 'react-dom''react-dom';;importimport App App fromfrom './App.jsx''./App.jsx';;
ReactDOMReactDOM..renderrender((<<App App //>>,, document document..getElementByIdgetElementById(('app''app'))));;
5) Running the server
webpack.config.js index.html App.jsx main.js
webpack.config.js
index.html
App.jsx render()main.js render()
Some thoughts on JSXrender() <div>
h1 h2h3
converted by Web2PDFConvert.com
You need Components...
App.jsx
importimport React React fromfrom 'react''react';;
classclass AppApp extendsextends ReactReact..ComponentComponent {{ renderrender(()) {{ returnreturn (( <<divdiv>> <<HeaderHeader//>> <<ContentContent//>> <<//divdiv>> ));; }}}}
classclass HeaderHeader extendsextends ReactReact..ComponentComponent {{ renderrender(()) {{ returnreturn (( <<divdiv>> <<h1h1>>HeaderHeader<<//h1h1>> <<pp>>This is the header textThis is the header text<<//pp>> <<//divdiv>> ));; }}}}
classclass ContentContent extendsextends ReactReact..ComponentComponent {{
renderrender(()) {{ returnreturn (( <<divdiv>> <<h2h2>>ContentContent<<//h2h2>> <<pp>>This is the content text This is the content text {{ 33 ++ 22}} <<//pp>> <<//divdiv>> ));; }}}}
render()reactDOM.render() main.js
<app> <Header> <Content>
converted by Web2PDFConvert.com
babel
Some thoughts on states and events...
Building a user interface
Material-UI Belle
Through Material-UI
$npm install material-ui
importimport React React fromfrom 'react''react';;importimport ReactDOM ReactDOM fromfrom 'react-dom''react-dom';;importimport MuiThemeProvider MuiThemeProvider fromfrom 'material-ui/styles/MuiThemeProvider''material-ui/styles/MuiThemeProvider';;importimport RaisedButton RaisedButton fromfrom 'material-ui/RaisedButton''material-ui/RaisedButton';;
constconst App App == (()) ==>> ((
<<MuiThemeProviderMuiThemeProvider>> <<RaisedButton labelRaisedButton label=="Default""Default" //>> <<//MuiThemeProviderMuiThemeProvider>>
));;
exportexport defaultdefault App App;;
converted by Web2PDFConvert.com
importimport React React fromfrom 'react''react';;importimport ReactDOM ReactDOM fromfrom 'react-dom''react-dom';;importimport injectTapEventPlugin injectTapEventPlugin fromfrom 'react-tap-event-plugin''react-tap-event-plugin';;importimport App App fromfrom './App.jsx''./App.jsx';;
injectTapEventPlugininjectTapEventPlugin(());;ReactDOMReactDOM..renderrender((<<App App //>>,, document document..getElementByIdgetElementById(('app''app'))));;
<!DOCTYPE html><!DOCTYPE html>
<html lang = "en"><html lang = "en"> <<headhead>> <meta charset = "UTF-8"> <meta charset = "UTF-8"> <<titletitle>>React AppReact App</</titletitle>> </</headhead>> <<bodybody>> <div id = "app"> <div id = "app"></</divdiv>> <script src = "index.js"> <script src = "index.js"></</scriptscript>> </</bodybody>> </</htmlhtml>>
package.json
converted by Web2PDFConvert.com
{{ "name""name":: "reactapp""reactapp",, "version""version":: "1.0.0""1.0.0",, "description""description":: "app""app",, "main""main":: "1""1",, "scripts""scripts":: {{ "test""test":: "console.""console.",, "start""start":: "webpack-dev-server --hot""webpack-dev-server --hot" }},, "repository""repository":: {{ "type""type":: "git""git",, "url""url":: "0""0" }},, "keywords""keywords":: [[ "0""0" ]],, "author""author":: "danyal""danyal",, "license""license":: "ISC""ISC",, "devDependencies""devDependencies":: {{ "babel-core""babel-core":: "^6.3.26""^6.3.26",, "babel-loader""babel-loader":: "^6.2.4""^6.2.4",, "babel-preset-es2015""babel-preset-es2015":: "^6.3.13""^6.3.13",, "babel-preset-react""babel-preset-react":: "^6.3.13""^6.3.13",, "html-webpack-plugin""html-webpack-plugin":: "^2.7.2""^2.7.2",, "react-hot-loader""react-hot-loader":: "^1.3.0""^1.3.0",, "transfer-webpack-plugin""transfer-webpack-plugin":: "^0.1.4""^0.1.4",, "webpack""webpack":: "^1.12.9""^1.12.9",, "webpack-dev-server""webpack-dev-server":: "^1.14.0""^1.14.0" }},, "dependencies""dependencies":: {{ "material-ui""material-ui":: "^0.15.0""^0.15.0",, "react""react":: "^15.0.1""^15.0.1",, "react-dom""react-dom":: "^15.0.1""^15.0.1",, "react-tap-event-plugin""react-tap-event-plugin":: "^1.0.0""^1.0.0" }}}}
converted by Web2PDFConvert.com
varvar config config == {{ entry entry:: './main.js''./main.js',, output output:: {{ path path::'./''./',, filename filename:: 'index.js''index.js',, }},, devServer devServer:: {{ inline inline:: truetrue,, port port:: 80808080 }},, module module:: {{ loaders loaders:: [[ {{ test test:: /\.jsx?$//\.jsx?$/,, exclude exclude:: /node_modules//node_modules/,, loader loader:: 'babel''babel',, query query:: {{ presets presets:: [['es2015''es2015',, 'react''react']] }} }} ]] }}}}
modulemodule..exports exports == config config;;
$npm install$npm install
$npm start$npm start
1) Download Roboto Font
Link code:
<<linklink hrefhref==''https://fonts.googleapis.com/css?familyhttps://fonts.googleapis.com/css?family==Roboto:400,300,500Roboto:400,300,500'' relrel==''stylesheetstylesheet'' typetype==''text/csstext/css
CSS code:
converted by Web2PDFConvert.com
font-familyfont-family:: 'Roboto''Roboto', sans-serif, sans-serif;;
Short example
<!DOCTYPE html><!DOCTYPE html><<htmlhtml>><<headhead>><<linklink hrefhref==''https://fonts.googleapis.com/css?familyhttps://fonts.googleapis.com/css?family==Roboto:400,300,500Roboto:400,300,500'' relrel==''stylesheetstylesheet'' typetype==''text/csstext/css</</headhead>><<stylestyle>>
h1 h1 {{ font-familyfont-family:: 'Roboto''Roboto', sans-serif, sans-serif;;}}
</</stylestyle>>
<<h1h1>>Roboto Font exampleRoboto Font example</</h1h1>>
</</htmlhtml>>
2) Building components
3) UI example
importimport React React,, {{ComponentComponent}} fromfrom 'react''react';;importimport RaisedButton RaisedButton fromfrom 'material-ui/RaisedButton''material-ui/RaisedButton';;importimport Dialog Dialog fromfrom 'material-ui/Dialog''material-ui/Dialog';;importimport {{deepOrange500deepOrange500}} fromfrom 'material-ui/styles/colors''material-ui/styles/colors';;importimport FlatButton FlatButton fromfrom 'material-ui/FlatButton''material-ui/FlatButton';;importimport getMuiTheme getMuiTheme fromfrom 'material-ui/styles/getMuiTheme''material-ui/styles/getMuiTheme';;importimport MuiThemeProvider MuiThemeProvider fromfrom 'material-ui/styles/MuiThemeProvider''material-ui/styles/MuiThemeProvider';;importimport CircularProgress CircularProgress fromfrom 'material-ui/CircularProgress''material-ui/CircularProgress';;importimport AppBar AppBar fromfrom 'material-ui/AppBar''material-ui/AppBar';;importimport IconButton IconButton fromfrom 'material-ui/IconButton''material-ui/IconButton';;importimport IconMenu IconMenu fromfrom 'material-ui/IconMenu''material-ui/IconMenu';;
converted by Web2PDFConvert.com
importimport IconMenu IconMenu fromfrom 'material-ui/IconMenu''material-ui/IconMenu';;importimport MenuItem MenuItem fromfrom 'material-ui/MenuItem''material-ui/MenuItem';;importimport MoreVertIcon MoreVertIcon fromfrom 'material-ui/svg-icons/navigation/more-vert''material-ui/svg-icons/navigation/more-vert';;importimport NavigationClose NavigationClose fromfrom 'material-ui/svg-icons/navigation/close''material-ui/svg-icons/navigation/close';;importimport Checkbox Checkbox fromfrom 'material-ui/Checkbox''material-ui/Checkbox';;importimport ActionFavorite ActionFavorite fromfrom 'material-ui/svg-icons/action/favorite''material-ui/svg-icons/action/favorite';;importimport ActionFavoriteBorder ActionFavoriteBorder fromfrom 'material-ui/svg-icons/action/favorite-border''material-ui/svg-icons/action/favorite-border';;
constconst CheckStyles CheckStyles == {{ block block:: {{ maxWidth maxWidth:: 250250,, }},,
checkbox checkbox:: {{ marginBottom marginBottom:: 1616,, }},,
}};;
constconst styles styles == {{ container container:: {{ textAlign textAlign:: 'center''center',, paddingTop paddingTop:: 200200,, }},,}};;
constconst ButtonStyle ButtonStyle == {{ margin margin:: 1212,,}};;
constconst muiTheme muiTheme == getMuiThemegetMuiTheme(({{ palette palette:: {{ accent1Color accent1Color:: deepOrange500 deepOrange500,, }},,}}));;
classclass AppApp extendsextends ComponentComponent {{ constructorconstructor((propsprops,, context context)) {{ supersuper((propsprops,, context context));; thisthis..handleRequestClose handleRequestClose == thisthis..handleRequestClosehandleRequestClose..bindbind((thisthis));; thisthis..handleTouchTap handleTouchTap == thisthis..handleTouchTaphandleTouchTap..bindbind((thisthis));; thisthis..state state == {{ open open:: falsefalse,, }};; }}
handleRequestClosehandleRequestClose(()) {{ thisthis..setStatesetState(({{ open open:: falsefalse,, }}));; }}
handleTouchTaphandleTouchTap(()) {{ thisthis..setStatesetState(({{ open open:: truetrue,,
converted by Web2PDFConvert.com
open open:: truetrue,, }}));; }} renderrender(()) {{ constconst standardActions standardActions == (( <<FlatButtonFlatButton label label=="Ok""Ok" primary primary=={{truetrue}} onTouchTap onTouchTap=={{thisthis..handleRequestClosehandleRequestClose}} //>> ));; returnreturn (( <<MuiThemeProvider muiThemeMuiThemeProvider muiTheme=={{muiThememuiTheme}}>> <<div stylediv style=={{stylesstyles..containercontainer}}>> <<h1h1>>Menu Bar ExampleMenu Bar Example<<//h1h1>> <<AppBar titleAppBar title=="Menu Bar""Menu Bar" iconElementLeft iconElementLeft=={{<<IconButtonIconButton>><<NavigationClose NavigationClose //>><<//IconButtonIconButton>>}} iconElementRight iconElementRight=={{ <<IconMenuIconMenu iconButtonElement iconButtonElement=={{ <<IconButtonIconButton>><<MoreVertIcon MoreVertIcon //>><<//IconButtonIconButton>> }} targetOrigin targetOrigin=={{{{horizontalhorizontal:: 'right''right',, vertical vertical:: 'top''top'}}}} anchorOrigin anchorOrigin=={{{{horizontalhorizontal:: 'right''right',, vertical vertical:: 'top''top'}}}} >> <<MenuItem primaryTextMenuItem primaryText=="Refresh""Refresh" //>> <<MenuItem primaryTextMenuItem primaryText=="Help""Help" //>> <<MenuItem primaryTextMenuItem primaryText=="Sign out""Sign out" //>> <<//IconMenuIconMenu>> }}//>> <<DialogDialog open open=={{thisthis..statestate..openopen}} title title=="Super Secret Password""Super Secret Password" actions actions=={{standardActionsstandardActions}} onRequestClose onRequestClose=={{thisthis..handleRequestClosehandleRequestClose}} >> 11--22--33--44--55 <<//DialogDialog>> <<h1h1>>Flat Button ExampleFlat Button Example<<//h1h1>> <<FlatButton labelFlatButton label=="Default""Default" //>> <<FlatButton labelFlatButton label=="Primary""Primary" primary primary=={{truetrue}} //>> <<FlatButton labelFlatButton label=="Secondary""Secondary" secondary secondary=={{truetrue}} //>> <<FlatButton labelFlatButton label=="Disabled""Disabled" disabled disabled=={{truetrue}} //>> <<h1h1>>Raised ButtonRaised Button<<//h1h1>> <<divdiv>>
<<RaisedButton labelRaisedButton label=="Default""Default" style style=={{ButtonStyleButtonStyle}} //>> <<RaisedButton labelRaisedButton label=="Primary""Primary" primary primary=={{truetrue}} style style=={{ButtonStyleButtonStyle}} //>> <<RaisedButton labelRaisedButton label=="Secondary""Secondary" secondary secondary=={{truetrue}} style style=={{ButtonStyleButtonStyle}} //>> <<RaisedButton labelRaisedButton label=="Disabled""Disabled" disabled disabled=={{truetrue}} style style=={{ButtonStyleButtonStyle}} //>> <<br br //>> <<br br //>> <<RaisedButton labelRaisedButton label=="Full width""Full width" fullWidth fullWidth=={{truetrue}} //>> <<//divdiv>><<h1h1>>Circular Progress ExampleCircular Progress Example<<//h1h1>><<divdiv>> <<CircularProgress CircularProgress //>>
converted by Web2PDFConvert.com
<<CircularProgress CircularProgress //>> <<CircularProgress sizeCircularProgress size=={{1.51.5}} //>> <<CircularProgress sizeCircularProgress size=={{22}} //>> <<//divdiv>> <<//divdiv>> <<//MuiThemeProviderMuiThemeProvider>> ));;
}}
}}exportexport defaultdefault App App;;
render()
Through Belle
render()
1) Installing the Belle
$npm install belle2) Building components
Material-UI Example Project
converted by Web2PDFConvert.com
varvar React React == requirerequire(('react''react'));;varvar belle belle == requirerequire(('belle''belle'));;varvar TextInput TextInput == belle belle..TextInputTextInput;;varvar Button Button == belle belle..ButtonButton;;varvar ComboBox ComboBox == belle belle..ComboBoxComboBox;;varvar Option Option == belle belle..OptionOption;;varvar Toggle Toggle == belle belle..ToggleToggle;;varvar Rating Rating == belle belle..RatingRating;;varvar App App == React React..createClasscreateClass(({{
render render:: functionfunction(()) {{ returnreturn (( <<divdiv>> <<h1h1>>Text InputText Input<<//h1h1>> <<TextInput defaultValueTextInput defaultValue=="Write Here""Write Here" //>> <<h1h1>>ButtonButton<<//h1h1>> <<Button primaryButton primary>>FollowFollow<<//ButtonButton>> <<ButtonButton>>FollowFollow<<//ButtonButton>> <<h1h1>>Toggle ButtonToggle Button<<//h1h1>> <<Toggle defaultValueToggle defaultValue//>> <<h1h1>>ComboBoxComboBox<<//h1h1>> <<ComboBox placeholderComboBox placeholder=="Choose a State""Choose a State">> <<Option valueOption value=="Alabama""Alabama">>AlabamaAlabama<<//OptionOption>> <<Option valueOption value=="Alaska""Alaska">>AlaskaAlaska<<//OptionOption>> <<Option valueOption value=="Arizona""Arizona">>ArizonaArizona<<//OptionOption>> <<Option valueOption value=="Arkansas""Arkansas">>ArkansasArkansas<<//OptionOption>> <<//ComboBoxComboBox>> <<h1h1>>RatingRating<<//h1h1>> <<Rating defaultValueRating defaultValue=={{33}}>><<//RatingRating>> <<//divdiv>> ));; }}}}));;
$npm start
<div>
Conclusion
converted by Web2PDFConvert.com
Recent Stories
1.5KShareShare ShareShare 29
0 Comments
Your Comment
Submit
Show Oldest First
5 Top GUI Controls Libraries in 2017
converted by Web2PDFConvert.com
Third Party Controls provided by DevExpress.
Top DiscoverSDK Experts
Ashton TorrenceWeb and Windows developer
Meir RabinovichReal time and embedded developer
Nathan GordonFull Stack developer
converted by Web2PDFConvert.com
Tweets by @DiscoverSDKs
© 2015 DiscoverSDK. All Rights Reserved.
Get featured
Get listed
Claim your product
Advertise with us
Blog
Code examples
Register as an expert
VENDORS & CONTENT
About us
Contact us
Terms of use
Privacy policy
COMPANY
Connect with us
converted by Web2PDFConvert.com
