Learning to code with JavaScript and building UI with React

My experience with  @MCRcodes   as a Quality Assurance Tester.  This is an evening part-time coding boot camp based in central Manchester which runs for 24 weeks, from February 2018 to July 2018. Week 13 (May 2018) -  A new month, and a very heavy new topic ReactJS. The plan is to focus on this technology for the next couple of months, especially since it is a highly demanding skill. I've learned a lot more about the  npm   package.json  file with better understanding, and all dependencies used by a typical React setup. Previously only had exposure to a small number of dependencies ( jest  &  eslint) , now learning about  react ,  babel ,  webpack , and more. Session 1 -  Intro to React Session 2 -  React (Class, Stateful Components, Event Handlers) Week 14 -  Single Page Applications (SPA's) is amazing!  I always thought front-end development means primarily knowing how to write HTML and CSS. Creating a webpage  without ever having to reload the page, and

blog image source JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with HMAC algorithm) or a public/private key pair using RSA. JSON Web Token (JWT) Process: Encrypted string issued by the web server Stored by the client, typically in local storage Web server signs token using a SECRET KEY When the token is sent back to the server, can verify it using the secret key If the token is tampered with, verification will fail A JWT consist of three parts: Header ; consists of two parts: the type of the token, which is JWT, and the hashing algorithm. Payload ; which contains the claims which are an entity (typically, the user) and additional metadata. Signature ; takes the encoded header, the encoded payload, a secret, the algorithm specified in the h

Almost any application will eventually need to store a collection of passwords or another type of data that has to be stored using a hashing algorithm. Blogs, forums, issue trackers, they all need to store user data and these passwords. Hashing is the greatest way for protecting passwords and considered to be pretty safe for ensuring the integrity of data or password. There are some weaknesses in a cryptographic hash algorithm that allows an attacker to calculate the original value of a hashed password: Brute Force attack: Hashes can’t be reversed, so instead of reversing the hash of the password, an attacker can simply keep trying different inputs until he does not find the right now that generates the same hash value. Using a modern computer one can crack a 16 Character Strong password in less than an hour, thanks to GPU. Hash Collision attack: Hash functions have infinite input length and a predefined output length, so there is inevitably going to be the possibility of two diff

blog image source Following on from the previous sessions; - Intro to React - React (Class, Stateful Components, Event Handlers) - React (Bind Methods, Render Lifecycle) - React (Fetching data from an external API) - React (Forms) React Routers: React Router is the standard routing library for React. When you need to navigate through a React application with multiple views, you’ll need a router to manage the URLs. React Router does that, keeping your application UI and the URL in sync. Here’s an example of how our routes will look: ```js <Router>   <Route exact path="/" component={Home}/>   <Route path="/category" component={Category}/>   <Route path="/login" component={Login}/>   <Route path="/products" component={Products}/> </Router> ``` You need a router component and several route components to set up a basic route as exemplified above. There are two types of routers from the React Router API: &l

blog image source Following on from the previous sessions; -  Intro to React -  React (Class, Stateful Components, Event Handlers) -  React (Bind Methods, Render Lifecycle)  - React (Fetching data from an external API)  React Forms:  t ypical forms (non-React environment), a user types some data into a form's input fields, and the server doesn't know about it. The server remains clueless until the user hits a "submit" button, which sends all of the form's data over to the server simultaneously. In a React form, you want the server to know about every new character or deletion, as soon as it happens. That way, your screen will always be in sync with the rest of your application. There are two terms that will probably come up when you talk about React forms: Uncontrolled component; is a component that maintains its own internal state. Controlled component; is a component that does not maintain any internal state. A controlled component has no mem

blog image source Group exercise - making HTTP requests in React; going to be covering forms, form validation, posting data to API and routing in React, a popular front-end framework for building user interfaces. Learning objectives: Can you implement a form with React? Can you do form validation with React? Can you gather data from a form and post it to an API with React? Can you route different components with React? After completing this exercise should be comfortable with the following concepts: HTML Forms Form Validation Interacting with an API React Routing GitHub Weather Forecasting App exercise -  https://github.com/SharifCoding/react-surreal-estate

blog image source Following on from the previous sessions; - Intro to React - React (Class, Stateful Components, Event Handlers) - React (Bind Methods, Render Lifecycle)  External API: Just about every project needs to interface with a REST API at some stage. React.JS there are no predefined functions like AJAX or something else, to fetch data from APIs. To use external APIs, you will have to install third-party plugins to fetch data, you can go with one of them: axios : Axios is a promise based HTTP client for the browser and Node.js. Superagent : Superagent is small progressive client-side HTTP request library. Request : Request is a simplified HTTP request client. Fetch : Here is a polyfill for the Fetch API. This allows support for more browsers. We are going to use axios as HTTP client for making HTTP Requests.  Using Axios with React -  https://alligator.io/react/axios-react/ API Integration with Axios in React -  http://blogs.innovationm.com/api-integr

blog image source Group exercise - building a Weather Forecasting App using React, a popular front-end framework for building user interfaces. Will implement the following features: Users should be able to see the name and country of the city the forecast is for. Users should be able to see a summary of each day of the forecast, including the date, general description and an icon for the weather that day, and maximum temperature. Users should be able to click on one of the summaries to view all of the forecasted information for that date. After completing this exercise should be comfortable with the following concepts: jsx functional components vs stateful components `props` `propTypes` and `defaultProps` `state` `setState` render lifecycle methods GitHub Weather Forecasting App exercise -  https://github.com/SharifCoding/weather-app-react

blog image source Following on from the previous sessions; -  Intro to React -  React (Class, Stateful Components, Event Handlers) Bind Methods:   One of the reasons to use React for development, is its popularity is that it relies heavily on all of the Javascript. On a basic level, it is taking a component’s state, a Javascript object, and using Javascript functions to manipulate that state. The page is then rendered to reflect those changes. The value of ` this ` depends on how the function was called, not where or when it was defined. Also, it is not affected by scope, like a variable would be. This means, that whenever you pass a function down another function, this will not refer to the same value. There are at least five ways to handle this context in React: Use React.createClass Bind in Render Use Arrow Function in Render Bind in Constructor Arrow Function in Class Property React Render Lifecycle:  React enables to create components by invoking the React.createC

blog image source Following on from the previous session Intro to React . ES6 Class Syntax:   Class in terms of Object-oriented Programming is a blueprint for creating objects. A class encapsulates data and functionality for the object. Stateful React Components: When something is “stateful”, it is a central point that stores information in memory, about the app/component’s state. It also has the ability to change it. It is essentially a  “living” thing that has knowledge of past, current and potential future state changes. Event Handlers:  Event handling the only goal is intercepting various events (clicks, touches…) and triggering the associated callbacks that you, the programmer, coded. It’s the implementation that makes React’s event handling system stand out.  JSX elements can have event listeners, just like HTML elements can. You create an event listener by giving a JSX element a special attribute. An introduction to ES6 classes -  https://javascriptplayground.com/in

My experience with  @MCRcodes   as a Quality Assurance Tester.  This is an evening part-time coding boot camp based in central Manchester which runs for 24 weeks, from February 2018 to July 2018. Week 9 (April 2018) - After spending two decades using the internet, I finally have an understanding how it works now, and the communication between the server and the client. Nice to create and run a simple server using Express and I now know what API actually means now, I think. Really appreciate how amazing and powerful the npm  package manager really  is, and looking forward to installing other future packages.  We have now started our back-end programming journey. Session 1 -  The Internet, the Web, HTTP Session 2 -  Web APIs & Express Week 10 - Really enjoying creating and reading test units for server assignments. Additionally, learning s ynchronous/a synchronous programming has been a tease.   Unfortunately, I was unable to attempt few classes due to unplanned c

blog image source In computing, React (sometimes React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook, Instagram and a community of individual developers and corporations. React can be used in the development of single-page applications and mobile applications. It aims primarily to provide speed, simplicity, and scalability. ReactJS tries to solve the problem from the View layer. It can very well be defined and used as the V in any of the MVC frameworks. It breaks down parts of the view in the Components. These components encompass both the logic to handle the display of view and the view itself. It can contain data that it uses to render the state of the app. React is founded on the idea that DOM manipulation is an expensive operation and should be minimized. React solves this by giving the developer a virtual DOM to render to instead of the actual DOM. It finds the difference between the real DOM and virtual DOM and conducts