React – Redux Overview

redux-intro

Philosophy of React is very simple. UI is most predictable when it’s the pure function of state. React solves this problem. UI = f (state)

And Redux is the data/state management library. Redux attempts to make state mutations predictable by imposing certain restrictions on how and when state updates can happen.

This week I am learning Redux, just sharing few of my learnings. We use redus for JS apps. Redux helps us to write applications which behave consistently, run in different environments (client, server, and native), and they are very easy to test. I am also learning react and I read We can use Redux apps with React, Angular OR jQuery. Also, Redux works especially well with libraries like React because it let you describe UI as a function of state, and Redux emits state updates in response to actions.

Redux asks you to:

  • Describe application state as plain objects and arrays.
  • Describe changes in the system as plain objects.
  • Describe the logic for handling changes as pure functions.

Redux works with three simple principles:

  1. Store: Single source of truth – The state of your whole application is stored in an object tree within a single.
  2. Action: State is read-only – The only way to mutate the state is to dispatch an action, an object describing what happened
  3. Reducer: Changes are made with pure functions – To specify how the state tree is transformed by actions, you write

How to Install Redux:

Just write-  //   npm install –save redux  //

Use NPM here package manager.

Most likely, you’ll also need the React bindings and the developer tools.

 npm install –save react-redux npm

install –save-dev redux-devtools

In react It works in flow:

STORE –> Action –> Reducer –> VIEW

 Just write-

npm install –save redux

Use NPM here package manager.

Redux has many elegantly designed features, and compared to Fluxxor you can write a lot less repetitive code and logic. Out of all features, I like Redux’s Action the most. After reading the source code for Action, I realized there are a lot of functional programming concepts in the code.

Sharing the Example code of Redux+ React App:

screen-shot-2016-10-13-at-2-19-50-am

In the code above, we can see the App component App is wrapped inside the Provider component, and this Provider component uses a prop to point us to the app’s state:

screen-shot-2016-10-13-at-2-22-43-am

{ todos: state.todos };

Then use:

export function addTodo(text) {

return { type: types.ADD_TODO, text };

}

 

However, through a connect function, our App component will obtain a this.props.action.addTodo, and this function dispatches the original action creator that was returned by an action object. dispatch(ActionCreators.addTodo(…)).

 It is just learning overview, stay tune for next descriptive blog.

React to Native React

I hope you have already done enough with ReactJS. Now its time to work with Native React. When native react was launched response was super awesome and positive. This is the revolution for Mobile web world. Internet says it was launched on March 2015, so just a very new technology. As we know a country can not be built in a day, similarly it applies to programming language. It takes some time to be mature.

When we talk about mobile technologies, two name comes in mind- Cordova and Phonegap. But now they have some drawback. Cordova are significantly slower than native applications. especially for graphical-heavy applications.

So key solution is React Native. We can just transform our React Application into React Native but changing some elements. The concepts are same for the both – react and React Native.

  1. When we work on a React component first things we notice – Our component has to a ‘render’ function. And if there is no render function, we got an error.

screen-shot-2016-10-03-at-3-26-45-pm

The best thing is, we never mess with DOM here, but we return a JSX. JSX is  XML-based construct that represents what will be rendered in the DOM.

Lets rndor here: <div className=”main-component”>Hello World</div>

 screen-shot-2016-10-03-at-3-30-12-pm

JSX converts XML coding into functions: 

return React.createElement(“div”, {

           className: “main-component”

 }, “Hello world”);

 So the advantage of this is, We can’t render our components anywhere else than inside of the “render” function, so there is never the concern that we don’t know where exactly our rendered component came from.

  1. In addition to props, components can also have an internal state. The most prominent example of that behavior would be a click counter that updates its value when a button is pressed. The number of clicks itself would be saved in the state. Each of the prop and state change triggers a complete re-render of the component.

 

So now let’s convert our react app into React Native App. Some pre requirements are needed, like we need OS Mac and X Code. Since iOS is currently the only supported platform. System should have Node.JS pre installed. Then Install the React Native Using –

npm install -g react-native-cli

       Then you can Run your ‘FirstNativeApp’ using

 react-native init FirstNativeApp

 It created a FirstNativeApp folder, in which the boilerplate code can be found. Now we have a React app –

screen-shot-2016-10-03-at-3-46-38-pm

Our Aim is to convert this into Native React App. For this we have to follow some simple steps. 

  1. First step is to change requiring the React module to “react-native”.

var React = require(‘react’);  << == >> var React = require(‘react-native’);

 

  • Do you know, there is no DOM in Mobile. So we can not use elements like DIV and SPAN. So we’ll use <View> in place of <DIV> and <Text> in place of <Span>

screen-shot-2016-10-03-at-4-00-23-pm

But here, we can not put text directly in to <DIV>. So We’ll change Hello…. Thing like this :

screen-shot-2016-10-03-at-4-00-09-pm

  • Next thing is React Native doesn’t use CSS. So for this we’ll use inline CSS. Using inline CSS seems bewildering at first. It is similar to the transition React developers had to go through when being confronted with JSX and previously using templating engines.

So here we declare the CSS directly at component level, and so we have all the information we need to see what our component does, the layout it creates, and the styles it applies.

screen-shot-2016-10-03-at-4-02-04-pm

  • Next point is how to handle events in Native React? We want to give an alert message in above example. So here instead of events being directly available on “<View />” components, we need to explicitly use elements that trigger events, in our case a touch event when pressing the view. There are different types of touchable components available, each of them providing a different visual feedback.

screen-shot-2016-10-03-at-4-11-02-pm

  • Now our Native React Application is ready, now time to register – When we do it in react we just write – React.render but in Native React, it is bit different. First we should register our app for the Objective-C side of things which is done using the “AppRegistry” object. Here we can see our FirstNativeApp native app has more lines than react one.

screen-shot-2016-10-03-at-4-19-51-pm

Now you can run your Application. To run the React Native App, we need to replace the contents of the “index.ios.js” file with the piece of code of our transformed app from the last step. Then we just need to open the Xcode project and press the big Run button. First a terminal will open with the React Native server, and then the simulator window will appear.

Press Command +D will show a development menu. Then Click on the Box:

screen-shot-2016-10-03-at-4-26-14-pmscreen-shot-2016-10-03-at-4-26-29-pm

Try this, thing and write me back or comment if you face any issue, We’ll solve it together.

Some Basics React.js beginner should know

React.Js is an emerging programming thing for developers. This is the language which makes hard stuff as easy as easy stuff, but sometime it makes easy stuff as hard as hard stuff, which you do by using simple jQuery or Javasript. Many documentations are available online by using then you can set your environment and can start working with React.JS. but before starting big things you have to know some basics. I learnt some react.JS. sharing my points:

  • First thing you have to be clear, React.JS is not an MVC framework or any other kind of framework. React JS is just a library which renders your views. If you are a MVC guy, you should only have in your mind ‘V’ – Views, nothing else. So always keep this thing in mind otherwise you will end-up with your awesome react code.
  • Second thing, you have to be clear on your all components. Always make them SMALL. This is simple and easy to understand you code to the other developers. So always make your components as small as possible.

Example:

screen-shot-2016-10-02-at-2-47-04-pm

Here I have created a carousal for my Testimonial Section. Simple and small component. <DIV> with only one rendering element – <Slider>.

 

  • Third point is, we should write functional components. There were two types of defining react components :
    • Using ES6 Class:screen-shot-2016-10-02-at-2-36-19-pm
  • Using React.createClass():

screen-shot-2016-10-02-at-2-36-12-pm

But now new update React 0.14 has new ways to define the components:

screen-shot-2016-10-02-at-2-36-26-pm

  • Next most Important thing is we should always use At the time of development when you are a required Prop, It will show an error and which will benefit to you, Catches bugs by preventing silly mistakes. Use of isRequired makes you free from bugs like undefined OR null.

ProTykes look like this :

screen-shot-2016-10-02-at-2-29-29-pm

  • The main and only react specific thing is JSX. JSX is a no-brainer over manually calling createElement. Use of this gives you an disadvantage – it will add some amount of build time complexity.

But this will be solvable usinf Babel.

ES6 features are also important – like constants, arrow functions, default arguments, array and object destructuring, spread and rest operators, string interpolation, iterators and generators, a decent module system, etc.

We round things out with Webpack for bundling our code, and NPM for package management, and we’re now fully JavaScript buzzword compliant 🙂

  • React DEV tools are awesome. We can set up hot module replacement with webpack, so that our page updates as soon as we save our code – no browser refresh required.
  • As in above points I have discussed about ‘V’- views, so the question is where we’ll put our state and logic? So the Answer is here : We all know about Flux ?

Flux is a style for designing web applications. So for the same thing here we’ll use Redux.JS.

You can know more about Flus: https://facebook.github.io/flux/

And Abour Redux.JS: http://redux.js.org/

So I how this will give you a head start on React. Follow the rules/ ricks and tips and create your React application.  🙂