Getting Started with React Js

React js component

React Js is the uber popular JavaScript library that is almost everywhere you look these days. Learning React opens up a whole new way to build front-end experiences like websites, mobile apps, and more.

Much has changed since React came out and now is a great time to jump into the React fray. React is mature and has been used across the web in places like Facebook, Instagram, Airbnb, Uber, and much much more. Let’s dive in!

React is a UI library built by Facebook. React gives us the ability to logically think about our frontend sites and apps.

It’s also a really fun and quick way to build the projects we dream up! Even the site you’re on, scotch.io is built with React.

React Js allows us to build apps that:

Can be made quickly
Are easy to understand
Allow us to logically see the flow of data
Scale well with small and large teams
Transfer knowledge from desktop to mobile apps

React Js lets us build out our interactive UIs declaratively. One of its greatest abilities is the way it can update our UIs automatically and efficiently whenever our data changes.

In this React Starter, we’ll go through all the bells and whistles of React. We’ll build apps and learn many real-world techniques. This Starter is for anyone that wants to learn React from scratch in a neat and linear path. Follow along and you’ll gain all the React knowledge needed to start building in React.

Recommended Knowledge (Prerequisites)

Building React Js applications requires very little base knowledge. This is one of its big benefits! It’s very easy to get up and running with React if you’re coming from an HTML/CSS/JS background.

I would like recommend :

Knowledge of HTML & CSS
Knowledge of JavaScript and ES6
Some knowledge about the DOM
Some knowledge about Node & npm

This tutorial will give you a basic understanding of React.js by building a very simple application. I’ll leave out everything which I don’t think is core.

React Js setup

When getting started with React Js, you should use the simplest setup possible: an HTML file which imports the React and the ReactDOM libraries using script tags, like this:

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    
    /* 
    ADD REACT CODE HERE 
    */
    
    </script>
</body>
</html>

We’ve also imported Babel, as React uses something called JSX to write markup. We’ll need to transform this JSX into plain JavaScript, so that the browser can understand it.

There are more two things I want you to notice:

The with the id of #root. This is the entry point for our app. This is where our entire app will live.
The tag in the body. This is where we’ll write our React.js code.</p>
If you want to experiment with the code, check out this Scrimba playground.

Components

Everything in React is a component, and these usually take the form of JavaScript classes. You create a component by extending upon the React-Component class. Let’s create a component called Hello.

class Hello extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

You then define the methods for the component. In our example, we only have one method, and it’s called render().

Inside render() you’ll return a description of what you want React to draw on the page. In the case above, we simply want it to display an h1 tag with the text Hello world! inside it.

To get our tiny application to render on the screen we also have to use ReactDOM.render():

ReactDOM.render(
    <Hello />, 
    document.getElementById("root")
);

So this is where we connect our Hello component with the entry point for the app (). It results in the following:

Onlive Tutorials