React State From the Ground Up

#ReactJS State From the Ground Up #JavaScript

  • State, in React, is a plain JavaScript object that allows you keep track of a component’s data.
  • The initial state of the App component has been set to a state object which contains the key username, and its value using .
  • Initializing a component state can get as complex as what you can see here: – – An initialized state can be accessed in the method, as I did above.
  • Your component should look like this; – – A state can be passed as props from a parent to the child component.
  • This method will be used to update the state of the component.

As you begin to learn React, you will be faced with understanding what state is. State is hugely important in React, and perhaps a big reason you’ve looked into using React in the first place. Let’s take a stab at understanding what state is and how it works. What is State? State, in React, is a plain JavaScript
Continue reading “React State From the Ground Up”

We built our entire startup on React Native and this is what we found out

We built our entire startup on #ReactNative and this is what we found out:  #developer

  • However with the Android market share being pretty high, we had to make sure our app worked on both Android and iOS.
  • We wanted the iOS app to look and feel native.That’s where React Native came into the picture.
  • Could React Native pull this off and still look native?A few months down the line, with our iOS and Android app on the respective stores, I can tell you the journey was nothing but spectacular.
  • But hey, if we could go from an iOS app to fully functional Android app in 2 days, can it really get any better?Honestly I have never written an app for iOS on objective C that didn’t crash during beta testing a few times.
  • And to my amazement, our React Native app on iOS is yet to crash even once during production run.

At Genie! we like to spend most of our time giving our users the best experience to send and receive gifts. However I only had expertise writing apps for iOS and not Android. When we first decided to…
Continue reading “We built our entire startup on React Native and this is what we found out”

Why ReactJs? – (┛◉Д◉)┛彡┻━┻ – Medium

Why ReactJs?  #react #reactjs

  • Instead of writing an html line for news, messenger and marketplace you can see that they are basically the same, the only thing that changes is the icon and the information so we can make a component called nav that receives information and an icon.
  • Let code this component:First, we are going to make its container, with an JSON object with the information we want to be see.Now we are going to do the component:Using this practice, we are able to create a web app by just iterating a JSON object, that will pass the information to the containers.Another cool thing of react is its community.
  • There is a lot of components already made so you can just add them to your project as easily as adding a library to your normal html code.
  • Some github repositories that have a lot of components are:· lot of people have a problem with HTML being mixed with JS because they feel like breaking separation of concerns but in reality, it is more of a separation of technologies rather than concerns.
  • It helps your application to be more efficient because you don’t need to repeat code, there is an amazing community behind it, it has some really awesome modules that helps you to manage the unidirectional data flow, as well as managing which component must be render and if it is a component that is visible in all of the pages such as a menu to just render it once instead of every time you change of page.Tldr: react is awesome.

React is a new JavaScript library developed by Facebook released in 2013, but it wasn’t until 2017 that react was stable. React is like the best of both worlds, it has the functionality of JavaScript…
Continue reading “Why ReactJs? – (┛◉Д◉)┛彡┻━┻ – Medium”

How to use Native Modules in React Native + Android

  • This method returns name of the module by which you can access it from React Native.
  • Also, you need a constructor with React Application Context.Here, we have also created an instance of AppSharedPreferenceManager (a class which handles shared preferences) which we will need in next steps.Note: If you don’t want to do SharedPreference operations in other class then you can simply create SharedPreference instance instead here of 2: Create the packagerNow we need packager to provide this module to React Instance Manager, so Create a new java file SharedPreferencePackager.java at your convenient path and extend it with ReactPackage.
  • This packager can also be used for Native Ui Components and JS modules, but in this blog we are only focusing on Native Modules so we are returning empty list in other two methods.Step 3 : Add package to React Instance ManagerAs we have created the SharePreferencePackager now we are ready to add it in React Instance Manager.
  • In that case you need to add this package inside getPackages() method.Step 4: Add methods and usageNow we are ready with the Native Module.
  • When you have data you can invoke the callback and the rest will be handled by JS.Here is the code snippet in React Native to use the created Native Module.

Well, when you are developing hybrid apps (React Native for some modules and native android for rest of the module) then you must have came up with this situation that How can I use the native…
Continue reading “How to use Native Modules in React Native + Android”

Extracting Logic from React Components

Extracting Logic from #ReactJS Components:  by @Jack_Franklin #Javascript

  • Right now to test formatting of amounts I have to create and mount a React component, but I should be able to just call that function and check the result.
  • Let’s create which will house the function that is currently in our component.
  • To test this, we can replace the body of ’s so that it just calls the new function from our module:

    Notice that I’ve still left the function defined on ; when pulling code apart like this you should do it in small steps; doing it like this decreases the chance of inadvertently breaking the code and also makes it easier to retrace your steps if something does go wrong.

  • Sure, the function is very straightforward for now, but as it grows we can now test it very easily without any need to fire up a React component to do so.
  • By looking through our components and finding standalone functions that we can pull out, we’ve greatly simplified our component whilst increasing our test coverage and clarity of our application greatly.

In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I’d recommend watching that video first, you don’t need to have watched it to read this blog post. You can find all the code on GitHub if you’d like to run it locally.
Continue reading “Extracting Logic from React Components”

Extracting Logic from React Components

  • Right now to test formatting of amounts I have to create and mount a React component, but I should be able to just call that function and check the result.
  • Let’s create which will house the function that is currently in our component.
  • To test this, we can replace the body of ’s so that it just calls the new function from our module:

    Notice that I’ve still left the function defined on ; when pulling code apart like this you should do it in small steps; doing it like this decreases the chance of inadvertently breaking the code and also makes it easier to retrace your steps if something does go wrong.

  • Sure, the function is very straightforward for now, but as it grows we can now test it very easily without any need to fire up a React component to do so.
  • By looking through our components and finding standalone functions that we can pull out, we’ve greatly simplified our component whilst increasing our test coverage and clarity of our application greatly.

In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I’d recommend watching that video first, you don’t need to have watched it to read this blog post. You can find all the code on GitHub if you’d like to run it locally.
Continue reading “Extracting Logic from React Components”

JavaScript Weekend List #10 – Alex Bachuk – Medium

JavaScript Weekend List #10  #webdevelopment #react #javascript #nodejs #graphql #reactjs

  • JavaScript Weekend List #10This week I had a chance to dive deeper into GraphQL.
  • I discovered some new tools and now I’m convinced GraphQL is the new way to build APIs.
  • After reading more about Go, Python, Java and other languages I now realize GraphQL is the way to go.
  • I’ll report back how it goes.Here are some interesting projects and articles for the past week:Login-With project.
  • Forms in React, without tears (I hope it’s true)Experimenting with the background fetch APIDeploying Node and Mongo Containers on AWS EC2Tutorial: GraphQL Subscriptions with Apollo Client

This week I had a chance to dive deeper into GraphQL. I discovered some new tools and now I’m convinced GraphQL is the new way to build APIs. My goal is to prototype few APIs in the next few weeks…
Continue reading “JavaScript Weekend List #10 – Alex Bachuk – Medium”

React-redux “connect” explained 🔗

New post! React-redux's

  • There is an entire library, called react-redux whose sole purpose is to seamlessly integrate redux’s state management into a React application.
  • Lets take a look at redux’s state management flow :

    If you have worked with redux before, you know that its functionality revolves around a “store”, which is where the state of the application lives.

  • Now, let’s come to the (simplified) component structure of a standard react todo-mvc application :

    If we want to link our React application with the redux store, we first have to let our app know that this store exists.

  • However, because of the utility that gives us, I feel it’s more appropriate to represent it as something which “wraps” the entire application tree, like this :

    Now that we have “provided” the redux store to our application, we can now connect our components to it.

  • We can either retrieve data by obtaining its current state, or change its state by dispatching an action (we only have access to the top and bottom component of the redux flow diagram shown previously).

Redux is a terribly simple library for state management, and has made working with React more manageable for everyone. However, there are a lot of cases where people blindly follow boilerplate code to integrate redux with their React application without understanding all the moving parts involved.
Continue reading “React-redux “connect” explained 🔗”

Putting the “Native” in React Native

Putting the

  • Thankfully, getting the system volume is not difficult in iOS or Android, so it makes a perfect example of a simple native module.
  • This post will walk through making a native module for iOS, for Android, and the JavaScript code we can use in our app to call our new modules.
  • In our React Native module, we have a bit of a special case: we need only define the module in our header file as each method we want to expose is done so via the macro in the implementation file only.
  • Just as we did with the iOS module, we can add a method to our module that will get the system’s volume (see this commit in our example code).
  • We’ll need to use the to get the system volume, so add a couple imports to :

    And add an instance variable set in the constructor:

    Adding the actual method looks similar to the iOS version:

    One final improvement we can do is refactor our use of into its own JavaScript module, (see this commit in our example code):

    Then, we can get the volume using:

    A benefit of this refactoring is that if we want to perform different native code depending on the platform, we can isolate those code branches to their own (testable!)

A guide to writing native modules in a React Native application.
Continue reading “Putting the “Native” in React Native”

What I learned last month in Full stack web app development

What I learned last month in Full stack web app development  #javascript #react #reactjs

  • What I learned last month in Full stack web app developmentSo I began my full stack developer career journey last month and would like revise what I learned while create a full stack todo applicationPlan the file structure ahead of time.
  • Make it work; then make it look goodWriting out the story line of the application helps with developing the API.It is nice to read blogs, but have a book reference close by.
  • I recommend Elliot’s Programming JavaScript Application, Node in Action, Node in Practice, JavaScript with Promises (Daniel Parker)Sleep…If you encounter a bug and can’t find the source (bad.
  • but it does.My Goal for the month is to build a Blog App, which would require I know the followingUser AuthenticationAPI AuthorizationFirebase: DeploymentReact RouterRedux combine Reducers and RouterGoogle AnalyticD3.jsProgressive Web Appand many more.
  • this is really going to be a learning curve, but a huge leap in my self-google-stack overflow-css tricks-YouTube-taught full stack development career.Follow my progress on YouTube: Ajala Comfort and watch me code!

So I began my full stack developer career journey last month and would like revise what I learned while create a full stack todo application this is really going to be a learning curve, but a huge…
Continue reading “What I learned last month in Full stack web app development”