“Hello ReactJS” – Let’s Start with React JS

Screen Shot 2017-02-15 at 9.33.43 PM

We already know ReactJS is for frontend development. React JS is not a framework, it is just a Library. We use ReactJC for creating User Interfaces (UI). It renders your UI and responds to the events. In simple language it is just the ‘V’ of MVC.

Here are some differences between Angular and React JS:

  • Angular is actually a framework whereas React is a library.
  • Choosing between Angular and React is like choosing between buying an off-the-shelf computer and building your own with off-the-shelf parts.
  • Angular means conforming to its structure, its view on how your application should be architected and very often its choice of internal components such as routing, http services etc. With React you’re very much free to choose your own internal components and your own application architecture. This is why there are so many ‘starter kits’ that bundle react with a bunch of other off the shelf components and frameworks such as Flux, Reflux, Redux etc.
  • Depending on your project this is a blessing or a curse, with Angular you know that you can get off the ground quickly and other Angular developers are going to be able to join your team and contribute very quickly. With React you might have to spend time bringing new team members up to speed on whatever architecture decisions the project started with, and the choice of components is a minefield of immature components or incompatibilities.

So after reading this you can decide, which one you should chose?

In my experiences it also have many other benefits like:

  1. Modularity and Reusability of Codebase
  2. Productivity
  3. SEO
  4. Performance
  5. debugging

It helps in above things and Increase your productivity.

Before starting with React you should have knowledge of basic things:

  • HTML
  • Basic Javascript
  • CSS
  • How to write CODE
  • Webpack

And Your machine should have:

  • Node JS
  • Any Programming tool – IDE, Sublime –

Here we build components not templates, So same components can be used in many other templates using simple logics. Data can come from anywhere. One more thing you shold know before starting – JSX,  So JSX allows you to write JS & XML together. Re-render of components takes place:

  • Every component has “state” and “props”.
  • Acts as an “Immutable DOM”.
  • Re-render the whole app once the state changes.

Let’s write “Hello ReactJS”.

Steps:

  1. Open terminal.
  2. Create a folder: mkdir reactJSScreen Shot 2017-02-15 at 7.24.34 PM
  3.  Go inside the folder: Screen Shot 2017-02-15 at 7.24.50 PM
  4. Now install npm, here I’m assuming your system already has, latest version of NodeJS: Use command- npm init: Screen Shot 2017-02-15 at 7.33.39 PMSo in above command, when you will write- npm init for node package manager installing, it will ask few questions- like Name , description, Author and licence. Fill these fields and other fields may leave vacant.
  5. Now you should install all the dependencies. First we focus on production dependencies and then deployment dependencies, which will be useful in Deployment time. Use Command:npm install react react-dom –saveThese are production dependencies. It will take some time. –save is telling us- this is for production dependencies.Screen Shot 2017-02-15 at 8.28.10 PM

     

  6. Now we’ll go for development dependencies. Write command: npm install webpack webpack-dev-server babel-loader babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-2 –save
    1. We need some server side functionality for this because this is not a simple HTML file which can be opened by double click on browser, so for this we need to do something on server side.
    2. After running above command for deployment dependencies, we’ll some additional dependencies here: Screen Shot 2017-02-15 at 8.33.59 PM
  7. Now created a simple src folder, src/App – App folder then src/index.html ! Note- here we are creating index.html. just for our fist App. In react no HTML. We use JSX only.in index.html file make HTML5 skeltan. And create a file named – config.jsHere I am not telling abour webpack, Just sharinf the webpack file which have all the dependencies: Screen Shot 2017-02-15 at 8.53.46 PM
  8.  So after creating webpack, Created a index.js file inside the App folder and this will so as result. For now I am just priting :console.log (“hello ReactJS”);
  9. Then I have to set the path for server side, where the result will show up: So in package.json I deleted : “test”: “echo \”Error: no test specified\” && exit 1″, And written the Start command for server side: Screen Shot 2017-02-15 at 9.01.24 PM
  10. So after building the start and build dependencies our Code is ready to run with npm run start: Screen Shot 2017-02-15 at 9.11.23 PM
  11. So here http://localhost:8080/ is local address to run our App.So here we can see out Output in console: Screen Shot 2017-02-15 at 9.13.38 PM

    Hello ReactJS 

    I have used many new thigs here so you can just ask the question related to thos things. Comment Below. Thanks. Code Code Code. 🙂 

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.