React Example

Open File Explorer and create a new subfolder called "MyReact"

C:\temp\testing\MyReact 

Open a command prompt (as administrator)

cd c:\temp\testing\MyReact 

Create a new "package.json" file in this folder
Accept all the default values by pressing Enter

npm init 

Install the module bundler Webpack
Using the "--save-dev" switch will add this to the devDependencies in the 'package.json' file
This will create a 'node_modules' subfolder

npm install --save-dev webpack 

Install the local development server to provide you with live reloading.

npm install --save-dev webpack-dev-server 


Create a sub folder "src"


index.html

create the file "index.html"


index.js

create the file "index.js"
Everything in React is a component
Lets create a component
In this example there is only one method called render()
Inside this method we return a description inside an h1 tag




Add a build script to the "package.json" file

"script": { "build" : "webpack-dev-server --mode development" } 

cd temp/testing/javascript/myReact

npm run build 


npm start 




Notes


npm install --save-dev babel-cli 
npm install --save-dev babel-loader
npm install --save-dev typescript
npm install --save-dev ts-loader //also awesome-typescript-loader

npm install --save react // use --save as this package is required at runtime
npm install --save react-dom // use --save as this package is required at runtime
npm install --save-dev prop-types
npm install --save-dev @types/react
npm install --save-dev @types/react-dom
npm install --save-dev @types/prop-types

npm install --save-dev office-ui-fabric-core
npm install --save-dev office-ui-fabric-react

create the file "webpack.config.js"


create a subfolder "components"
create the file "BET_Button_Cancel.js"



app folder - contains all your files
build folder - contais all the finished compiled files
If you make any changes you need to re-run "npm run build"


npm config set strict-ssl false 


© 2019 Better Solutions Limited. All Rights Reserved. © 2019 Better Solutions Limited TopPrevNext