REACTJS Tutorial Introduction 1

We are starting a tutorial series for learning ReactJS on Coduber. This ReactJS Tutorial series is made by taking complete beginner in the mind. And this will help anyone who is about to start learning ReactJs.

What is React?

React is a framework developed by Facebook to create interactive UIs. It provides tools and methods for creation of UIs painless. React can be used to develop UIs of Website and mobile application.

React is open source javascript library meant for building user interfaces. React is currently most popular frontend framework around the world and an average salary of React Developer is around $100k annually.

React has a component-based architecture which lets you break down your application into the small encapsulated part which can be then composed to make complex UI.

React is declarative which means that it will make the code easier to debug and more predictable. You can design simple views for each state of your application and React will efficiently update and render the components for you only to the places where changes are made.

React is independent of the stack of technologies and hence it lets you write and develop new features in React without rewriting the code. Lets write a simple hello world component and understand the basic how it works.

Subscribe to our newsletter!

React Component What is it?

Components in React implements a render() method which takes the input and returns what should be displayed. React examples will be using XML-Like syntax called JSX. Actually JSX is optional and is actually not required.

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

ReactDOM.render(
  <HelloWorld name="Coduber" />,
  document.
  getElementById('hello-example')
);

So in the above example, you can see React.Component is implementing the render method to return a “Hello Coduber”. where we have created a sample component named HelloWorld which takes input as name and we are accessing this name variable with this.props.name.

So in this code name is the property of the component HelloWorld. And if you understand this pointer then you understand that this.props is talking about current component object property value named name to be used here.

Note: Prerequisite for this course is that you have beginners knowledge of Javascript or atleast you are familiar with any one of the programming language such as JAVA, Python or C++ then will be able to enjoy this course.

In Next Tutorial, we will be learning about Stateful Components and we will be creating a To-Do App with it after that we will learn use of the external plugin.

Subscribe to our newsletter!

Share your love

Leave a Reply