Enhance UI by Getting Started with Reactjs

Are you heading towards front-end development? Well, before jumping into React it is imperative for you to learn a bit of how things work when it comes to HTML, JavaScript, and CSS. However, this takes a lot of effort, but with a solid foundation, I am sure you will be able to know the React realm more profoundly. Other than this, I would like to recommend certain sites worth watching.

• http://eloquentjavascript.net/
• https://www.codecademy.com/courses/html-javascript-css/0/1
• https://egghead.io/browse/languages/javascript
• https://www.leveluptutorials.com/tutorials/how-to-make-your-first-website
• https://css-tricks.com/

Define React? I am sure you must have heard how Facebook’s React has changed the way we think about web applications and user interface development. In fact, you can use it well when it comes to things beyond the web – all thanks to its design (Virtual DOM)! The JavaScript library forces developers to think in terms of components. Chances are pretty much higher that you feel alien at first but if you check out from where it belongs things might work out simpler. I personally find React very pragmatic as it comprises a set of escape hatches. I mean in case if something doesn’t work for you; it is still possible to revert back to something lower level.

Virtual DOM- Do you know what the most common problem faced by a React developer is? It’s how to deal with the state? For example, if you are developing a user interface and wish to show the same data in multiple places, what to do? How to prove that the data is consistent? React solves this problem differently- It introduced us to the Virtual DOM. Whenever changes are made, the best way to batch the changes can be easily figured to the underlying DOM structure. In addition to this, it can propagate changes across its virtual tree as in the image above. It may quite interest you to know that handling DOM manipulation in such a manner can lead to increased performance. Gone are the days when developers used to find difficulty in optimizing and manipulating the DOM manually.

Why React in comparison to others?   

#1 Less Complex– Back when Reactjs was introduced, Angular 1.x was considered as one of the predominant choices as a framework. Unfortunately, it imposed too many conventions on the code making the existing app not convenient at all. With Reactjs one can easily integrate into the existing project because that’s how it was introduced via Facebook. In comparison to others, React only chose to implement the View layer instead of the full MVC stack.

#2 Perfect timing- During those days, Angular 2.x was announced by Google which not only featured backward incompatibility but also brought some serious changes to the table. Moving from Angular 1 to 2 was like moving to a different framework. And here React promised to execute the same things with significant improvements making professionals eager to try.

#3 Learning curve– When picking a UI framework; it is very crucial to know the learning curve, and this framework has the least abstractions. You can probably start writing React code in a single day only if you know JavaScript. Yes, it takes time to pick up best practices, but you will be able to start very fast.

#4 Functionality- I think React’s greatest strength comes from the fact that you aren’t even forced to use classes. Whereas while working on Angular; all of the components have to be implemented as classes. Classes over-complicate codebase without providing any benefits.

Get into the Coding business!

Well, you can also visit Codesandbox and create a new React sandbox. After that open index.js and Hello.js under the src directory and delete all the existing code. In simple words, you are creating a clean sheet to start with.

Start creating an app that has an input say for example- it takes your name and says hello back to you. Before this, I would highly recommend going through React basis like Components, JSX, State, Props, Event Handling, Stateful Components (Components as Class) and Stateless Components (Components as Functions) while creating this tiny app.

As I said before, everything in React is a component.

import React from 'react';
import ReactDOM from 'react-dom';

class HelloWorld extends React.Component {
render() {
return <div>Hello World</div>;
}
}

ReactDOM.render(<HelloWorld/>, document.getElementById('root'));

What you have to do is? Import ReactDOM from react-dom package. This will mount the React app on a DOM element on the HTML. If you take a close look at the last line, you will find ReactDOM.render method to mount the app. Apart from this, you can create a Component by creating a class that extends React. Component class.

As a return value, you will find HTML. It is JSX which can also be used to simplify creating content to render. In other words, JSX is syntactical sugar for React.createElement calls. It features any valid HTML other React Components, JS Expressions and much more.

Introducing props- Pops is a concept central to React- parameters passed down to a component.

const Greetings = (props) => <div>Hey you! {props.firstName} {

props.lastName}!</div>; const App = () => (  <div>

<Greetings firstName="John" lastName="Smith" />

</div>);

If simply put into words, Props are whatever data gets passed to a component from an upper-level component, kind of like arguments to a function. A component can alter its own state data but not props data.

Wrapping it up!

I hope you have learned the core concepts of React and some more, through the post in a couple of minutes. So now try to build an app by yourself and test what your limits are.

Author Bio

Amy Cooper has a bachelor’s degree in Computer. She is working as a reactjs developer in eTatvaSoft.com, which deals in web & mobile app solution. She likes to write on different mobile app technologies, application marketing, startups, and the latest trends.