React is a JavaScript library for building user interfaces. React is a popular, easy to learn tool, that’s designed to work everywhere. With some basic web development skills – like JavaScript, HMTL, and CSS, you can build professional looking, slick UIs quickly and easily.
Today, we’ll help you get started with React by comparing native and hybrid apps and exploring some basic syntax.
Here’s what will be covered in this article:
Learn to make industry-ready React apps with hands-on practice and live projects.
Web apps are software developed to display web pages in a browser. The most basic techstack is JavaScript, HTML, CSS. Here’s a quick breakdown of how these three technologies are used:
Web application basic tech stack is:
These tech stacks that developers use to build web applications are often called Web Frameworks or Web Application Frameworks. React.js is a modern framework for JavaScript. Adding React to the basic HTML/CSS/JavaScript stack makes it a lot easier to make more robust user interfaces.
In web app development, you -the developer - has to worry about:
Within your web app, you’ll also have tiers which is explained below.
For this quick overview, we’ll just assume a 3-tiered architecture: browser, engine, database.
What are tiers? Applications are segmented into logical chunks called tiers. The three-tiered application is the most common structure – that’s what’s diagrammed above. React is a library that deals with the web browser level, as React is a library for creating UIs. Here’s how the web application uses 3-tiered architecture to update a web page:
The easiest example of native apps to understand when you’re new to software development are mobile apps for your cell phone. Mobile apps are the ones you use on your phone everyday – like Instagram or Spotify. Mobile apps come in two development styles:
Native
Hybrid
What is native app development?
To shortcut: native app development is usually building apps for iPhone or Android Phones.
Native app development is the creation of software programs that run on specific devices and platforms. You can build native apps for desktops, smart TVs, and all kinds of gadgets. Smartphones are the most popular native mobile app development platforms. Companies build operating systems for developers to build apps for their devices – this gives developers access to tools & features on that device – like a camera on a phone. Specifically, the two most popular mobile OS are:
Native mobile apps don’t run in the browser – unlike web applications which are built for browsers. As a user, you download native mobile apps from platform-specific stores like Apple’s App Store or Google Play.
This means as a developer building native apps, you don’t have to worry about browser compatibility, but you do have to worry about the compatibility of your native app’s Operating System. The huge benefit to Native Apps are getting free access to tools & features in that Operating System!
Use Device Features & Tools
Faster
Compliant
Secure
Learn React without scrubbing through videos or documentation. Educative’s text-based courses are easy to skim and feature live coding environments - making learning quick and efficient.
Hybrid apps are built to run everywhere. Hybrid apps work as both web apps and native mobile apps. Hybrid apps are developed to be compatible with different browsers and operating systems.
You build hybrid apps using web technologies: HTML, CSS, and JavaScript, but the developer has to be very careful selecting a tech stack on top of that. Many features from different code libraries or tools only work with certain browsers or operating systems.
React’s platform versatility makes it a favorite for bypassing these problems.
Hybrid Apps are:
What are the downsides to hybrid apps?
Loss of speed
Limited tech tooling
Code duplication/complication
Loss of powerful features
Here we’ll demonstrate a simple React component to get you started learning React.
Note about Developer ToolChains:
Tool Chains are the set of software used to implement development into production software. For the most part, when coding for a company you’ll be working with a long existing toolchain.
For this 101, we’re going to add React as a plain script tag on an HTML page. React as a plain scriptag skips a lot of complicated toolchain info.
Here’s a 101 to build a button using React.
<body></body>
tags<div id="click_button_container"></div>
Script Tags
</body>
end tagCreate a React Component in JavaScript
The code you entered in:
ClickButton
which extends React.Componentfalse
Now we’ve got the structure defined in HTML, the empty click_button_container
HTML root node ready for something to populate it. We’ve also got the ClickButton
class in JavaScript defining the logic of our button component. The next step, is to render()
the ClickButton
logic into the click_button_container
.
ClickButton
logic into the click_button_container
.You’ve created a React component! Congratulations! There’s a lot more to learn about React. Below we’ve got some syntax background explanation about the code you created.
There’s a lot more about React syntax on the React page, but let’s go over the very basic basics of the button we just built:
Render()
method
React is component based. What are components? Components are small, isolated pieces of code that the developer uses to build UIs. The best thing about components, are they are reusable.
Examples of React Components:
What do React components do?
render()
methodElements are a lightweight description of what to render. Elements are our first building block of learning React syntax – elements describe what you see on the screen.
From our code example, here’s how React interacts from create an Element in JavaScript, creating a root DOM node in HTML, and using the render() method to put the logic from the element to display on the webpage.
The render() method returns a description of what to display on the screen. Render() returns a React element – remember a React element is a lightweight description of what to render().
How does the browser know when to re-render a page? When the state of the component changes. A component maintains internal state data (this.state
), as seen in our ClickButton
example class where this.state = { clicked: false }
.
When this.state changes, the render()
method is re-invoked, and the rendered markup is updated with the latest information. In our example, when this.state.clicked
changes to True
, the button disappears, and a “You clicked this” method shows instead.
Congratulations! You’ve made it through a React intro! There’s more to learn. The next steps include:
For a complete course on learning how to use React, you can check out, React for Front-End Developers. In this Path, you will learn all the fundamentals you need to become a successful React developer. Afterward, you will be prepared to build your own applications and have projects for your portfolio.
Join a community of more than 1.3 million readers. A free, bi-monthly email with a roundup of Educative's top articles and coding tips.