Screen Shot 2017-02-15 at 9.33.43 PM

in JavaScript

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

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. 🙂 

Write a Comment

Comment