JavaScript Arrays — Finding The Minimum, Maximum, Sum, & Average Values

  • Math.min() , as expected, returns the smallest of any set of given numbers.
  • The problem with Math.min() is it expects each parameter to be input separately and cannot take an array of multiple numbers as input.
  • min([1,2,3,4])// NaNAs you can see, Math.min() only works when each number is input as a separate parameter.Because of this, we need to make use of the …spread operator.
  • The spread operator allows an expression to be expanded in places where multiple elements/variables/arguments are expected.When we use the spread operator within Math.min() it will expand, or spread out, our array and insert each variable as a separate parameter into Math.min()!
  • In other words: Math.min(…[1,2,3,4]) is the same as Math.min(1,2,3,4)Finally, all I’ve done with the code above is turned it into a function expression utilizing arrow functions.

In this article we’ll explore four plug and play functions that allow you to easily find certain values in an arrays of numbers. Specifically we’ll explore the following: Math is a built in object in…
Continue reading “JavaScript Arrays — Finding The Minimum, Maximum, Sum, & Average Values”

Using Bootstrap With create-react-app

  • From your project folder, enter the following: – – Now the Bootstrap files will be located in your folder.
  • This is where we will put our bootstrap source files.
  • You will need to have the installed globally, so from your command line enter: – – You will also need grunt and other libraries install locally into your project, so enter the following from your project folder – – In order to import your bootstrap files, you need to create…
  • From our command line inside of our project folder we can now enter to compile our LESS files one time, or we can enter to watch the source files and compile on any changes.
  • Once you have built your application using Bootstrap, you can at the end go through and edit the source files so that 1) you only import the Bootstrap components which you are using and 2) make sure all the components look exactly the way you want them to.

These days, starting a web application is very easy. Using create-react-app along with Bootstrap will give you everything you need.
Continue reading “Using Bootstrap With create-react-app”

So you want to learn React.js? – EdgeCoders

So you want to learn React.js?

☞ 

#javascript #ReactJS

  • This is a good thing, React is a library that does one thing really well, but it’s not the answer to everything.However, identify whether what you’re currently learning is React or not, mainly so that you don’t get confused about your effort to learn React itself.
  • This is not counting the tools and other libraries that complete React like for example, Redux or Relay.There is an important question about the order with which you need to learn things.
  • I like to be specific about this here, so if you don’t know how to map or reduce an array, or if you don’t understand the concept of closures and callbacks, or if seeing “this” in JavaScript code confuses you, you’re not ready for React and you still have a…
  • Imports and exports of modules (most important of all)You don’t have to start with ES2015, but you do need to eventually learn it (and not because you’re learning React).
  • Don’t start here until you’re very comfortable with React itself.

First, make peace with the fact that you need to learn more than just React to work with React. This is a good thing, React is a library that does one thing really well, but it’s not the answer to…
Continue reading “So you want to learn React.js? – EdgeCoders”

How to use TypeScript with Node

  • For example:

    //Typescript
    class Test {
    //field
    name:string;
    //constructor
    constructor(name:string) {
    this.name = name
    }
    //function
    display_name():void {
    console.log(“name is : “+this.name)
    }
    }
    //javascript
    var Test = (function () {
    //constructor
    function Test(name) {
    this.name = name;
    }
    //function
    Test.prototype.display_name = function () {
    console.log(“name is : ” + this.name);
    };
    return Test;
    }());

    In the snippet above, notice that it is easier to read the TypeScript version of the code than the JavaScript Version.

  • Getting Started
    To install TypeScript globally so you can call it when needed, run:
    npm install -g typescript

    For verification of the installed TypeScript, use the tsc –v command:
    tsc –v
    //Version 2.1.6

    Next, install gulp for the build process.

  • To do that, we run:
    npm install gulp gulp-typescript typescript –save

    Doing just this setup done might be enough, but you would have to go back to the terminal to run the tsc command every time a change occurs.

  • Now, put the following contents into the gulpfile.js:
    const gulp = require(‘gulp’);
    const ts = require(‘gulp-typescript’);

    // pull in the project Typescript config
    const tsProject = //task to be run when the watcher detects changes
    gulp.task(‘scripts’, () = {
    const tsResult = tsProject.src()
    .

  • const server = http.createServer(App);
    server.listen(port);
    server.on(‘listening’, onListening);

    //function to note that Express is listening
    function onListening(): void {
    console.log(`Listening on port `+port);
    }

    This has imported the HTTP module from node.

Learn how you can create an app with TypeScript and Node.js, using Gulp to automate the building process and Nodemon to restart the server.
Continue reading “How to use TypeScript with Node”

contra/react-responsive — Media queries in react for responsive design #reactjs

contra/react-responsive 
 — Media queries in react for responsive design 

#reactjs

  • For a list of all possible shorthands and value types see numbers given as a shorthand will be expanded to px ( will become )

    You may also specify a function for the child of the MediaQuery component.

  • When the component renders, it is passed whether or not the given media query matches.
  • You may specify an optional property on the that indicates what component to wrap children with.
  • If the property is not defined and the has more than 1 child, a will be used as the “wrapper” component by default.
  • The values property can contain , , , , , , , , , , , and to be matched against the media query.

react-responsive – Media queries in react for responsive design
Continue reading “contra/react-responsive
— Media queries in react for responsive design

#reactjs”

So you want to learn React.js? – EdgeCoders

So you want to learn React.js?
#reactjs #js #coding  #programming @samerbuna

  • Identify whether what you’re currently learning is React or not, mainly so that you don’t get confused about your effort to learn React itself.
  • I find building simple games to demonstrate the ideas of React much better than starting with data-driven serious web applications.
  • React ecosystem libraries: Since React is just the UI language, you’ll need tools to complete the picture and go beyond even MVC. Don’t start until you’re very comfortable with React itself.
  • Right after getting comfortable with the raw concepts of React itself, build a React Native app.
  • I’ll give you two things to focus on, just forget everything else you encounter and learn these two first once you’re done with React itself: react-router and redux.

First, make peace with the fact that you need to learn more than just React to work with React. This is a good thing, React is a library that does one thing really well, but it’s not the answer to…
Continue reading “So you want to learn React.js? – EdgeCoders”

Develop React Native/Redux Applications like a BOSS with this tool – React Native Development – Medium

  • In the post I’ll show you how to setup the amazing React Native Debugger.
  • global.reduxNativeDevTools(/*options*/) : noop => noop ); const store = createStore(reducer, initialState, enhancer); // If you have other enhancers & middlewares // update the store after creating / changing to allow devTools to use them if (global.reduxNativeDevTools) { global.reduxNativeDevTools.updateStore(store); } return store; }
  • If you’re using Redux to manage your state in React Native apps then you should also be using the React Native Debugger to super charge your development experience.
  • Make sure you have Homebrew installed on your system by executing ‘brew’ in your Terminal.
  • Never miss a story from React Native Development , when you sign up for Medium.

If you’re using Redux to manage your state in React Native apps then you should also be using the React Native Debugger to super charge…
Continue reading “Develop React Native/Redux Applications like a BOSS with this tool – React Native Development – Medium”