![Page 1: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/1.jpg)
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
![Page 2: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/2.jpg)
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
![Page 3: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/3.jpg)
<!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
![Page 4: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/4.jpg)
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
![Page 5: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/5.jpg)
3) Installing babel plugins
4) Creating a folder and files
converted by Web2PDFConvert.com
![Page 6: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/6.jpg)
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
![Page 7: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/7.jpg)
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
![Page 8: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/8.jpg)
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
![Page 9: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/9.jpg)
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
![Page 10: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/10.jpg)
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
![Page 11: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/11.jpg)
{{ "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
![Page 12: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/12.jpg)
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
![Page 13: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/13.jpg)
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
![Page 14: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/14.jpg)
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
![Page 15: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/15.jpg)
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
![Page 16: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/16.jpg)
<<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
![Page 17: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/17.jpg)
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
![Page 18: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/18.jpg)
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
![Page 19: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/19.jpg)
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
![Page 20: Building A User Interface with ReactJS | DiscoverSDK Blog · Building a user interface using React.JS Let's talk about its features One-way data flow Components based Lightweight](https://reader030.vdocument.in/reader030/viewer/2022020417/5e09dd7629445b0d2b7c3f03/html5/thumbnails/20.jpg)
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