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 the creation of UIs painless. React can be used to develop UIs of Websites and mobile applications.

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

React has a component-based architecture that 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. Let’s write a simple hello world component and understand the basics of how it works.

React Component What is it?

Components in React implement 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 the current component object property value named name to be used here.

Note: Prerequisite for this course is that you have beginner’s 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 the 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 the use of the external plugin.

Leave a Comment