Topics Search

React

Home » React (60)
  • Page 1 of 3
  • »
 

Getting Started with React.js

Getting Started with React.js Icon
React.js is a flexible and component-based JavaScript library for building interactive user interfaces. It was created and open-sourced by Facebook and is used by many leading tech companies such as Dropbox, AirBnB, PayPal, and Netflix. React allows developers to create data-heavy apps that can be painlessly updated by re-rendering only the necessary components.
 
Advertisement:
 

Understanding Nested Routing in React

Understanding Nested Routing in React Icon
React is a JavaScript library built by Facebook for building user interfaces. If you are new to React, I would recommend reading one of our earlier tutorials on getting started with React. In this tutorial, we'll discuss how to handle nested routing in a React web application.
 

Internationalizing React Apps

Internationalizing React Apps Icon
First of all, let’s define some vocabulary. “Internationalization” is a long word, and there are at least three widely used abbreviations: “intl,” “i18n” and “i10n.” All of them mean the same thing. Internationalization can be generally broken down into the following challenges: detecting the user’s locale; translating UI elements, titles and hints; serving locale-specific content such as dates, currencies and numbers.
 

Build A Media Library With React, Redux, and Redux-saga – Part 2

Build A Media Library With React, Redux, and Redux-saga – Part 2 Icon
In part 2 of this tutorial, which is unarguably the most interesting part of building React/Redux application, we will setup application state management with redux, connect our React components to the store, and then deploy to Heroku. We will walk through this part in eight steps:
 

Common React Native App Layouts: Login Page

Common React Native App Layouts: Login Page Icon
In this series, you'll learn how to use React Native to create page layouts commonly used in mobile apps. The layouts you'll be creating won't be functional—instead, the main focus of this series is to get your hands dirty in laying out content in your React Native apps. If you're new to laying out React Native apps or styling in general, check out my previous tutorial:
 

How to Handle Routing in React

How to Handle Routing in React Icon
In this tutorial, we'll see how to get started with setting up and creating a React app. We'll focus on how to handle routing in a React app using react-router. Let's start by initiating our project using Node Package Manager (npm).
 

Getting Started With React and JSX

Getting Started With React and JSX Icon
In this tutorial, we'll have a look at how to get started with creating a React app and try to understand the basics of JSX. The tutorial assumes that you have a good understanding of HTML and JavaScript.
 

Get Started With React Native Layouts

Get Started With React Native Layouts Icon
In this tutorial, you'll learn how to lay out React Native apps and how to implement layouts commonly used in apps. This includes the Stack Layout, Grid Layout, and Absolute Layout. I'll be assuming that you already know the basics of styling a React Native app and how to use CSS in general, so I won't dwell too much on StyleSheet.create and how to add styling to different elements.
 

Redux without React — State Management

Redux without React — State Management Icon
Recently, I had one of those moments again and started working on a web application using Redux and nothing else but vanilla JavaScript. In this article I want to outline how I structured my app, examine some of my earlier (and ultimately unsuccessful) iterations, before looking at the solutions I settled on and what I learned along the way.
 

How to Test React Components Using Jest

How to Test React Components Using Jest Icon
In this article we will take a look at using Jest, a testing framework maintained by Facebook, to test our ReactJS components. We’ll look at how we can use Jest first on plain JavaScript functions, before looking at some of the features it provides out of the box specifically aimed at making testing React apps easier. It’s worth noting that Jest isn’t aimed specifically at React — you can use it to test any JavaScript applications. However, a couple of the features it provides come in really handy for testing user interfaces, which is why it’s a great fit with React.
 

Creating Universal Windows Apps With React Native

Creating Universal Windows Apps With React Native Icon
With the React Native Universal Windows platform extension, you can now make your React Native applications run on the Universal Windows families of devices, including desktop, mobile, and Xbox, as well as Windows IoT, Surface Hub, and HoloLens.
 

Building a Game with Three.js, ReactJS and WebGL

Building a Game with Three.js, ReactJS and WebGL Icon
Why React? I know what you’re thinking: why? Humor me for a moment. Here’s some reasons to consider using React to drive your 3D scene: “Declarative” views let you cleanly separate your scene rendering from your game logic. Design easy to reason about components, like <Player />, <Wall />, <Level />, etc.
 

Create a Simple To-Do App With React

Create a Simple To-Do App With React Icon
Learn the React basics by building a simple to-do application. As the topic implies, we are going to be building a To-Do application with React. Do not expect any surprises such as managing state with a state management library like Flux or Redux. I promise it will strictly be React. Maybe in following articles we can employ something like Redux but we want to focus on React and make sure everybody is good with React itself.
 

How To Scale React Applications

How To Scale React Applications Icon
Nowadays, due to rich web applications, scaling has become an important topic on the front end, too! The front end of a complex app needs to be able to handle a large number of users, developers and parts. These three categories of scaling (users, developers and parts) need to be accounted for; otherwise, there will be problems down the line.
 

Routing React Apps: The Complete Guide

Routing React Apps: The Complete Guide Icon
Route your React applications with ease. Learn all the fundamentals. In this guide, we will touch almost every aspect related to routing in React and there will be a demo so you will as well have something to play with.
 

How to Use the react-redux Package

How to Use the react-redux Package Icon
React is a JavaScript library for building user interfaces that has taken the web development world by storm. However, in a community that favours choice and flexibility, it can be hard to know where to start! Not to worry—some patterns and modules have emerged as best practices. One of these is Redux for managing application state.
 

React on the Server for Beginners: Build a Universal React and Node App

React on the Server for Beginners: Build a Universal React and Node App Icon
Build a super fast Universal JavaScript app that can be rendered both on the client and on the server using React, React Router and Express In this article we are going to learn how to build a simple "Universal JavaScript" application (a.k.a. "Isomorphic") using React, React Router and Express.
 

Build a React App with User Authentication

Build a React App with User Authentication Icon
React is an awesome way to build web UIs. This JavaScript library allows you to turn complex UIs into simple and reusable components that can be composed easily together. This post will show you how to build a React application from scratch, using the Stormpath React SDK to add features that allow people to sign up, login, and even view their own user profile.
 

Working with Data in React: Properties & State

Working with Data in React: Properties & State Icon
Managing data is essential to any application. Orchestrating the flow of data through the user interface (UI) of an application can be challenging. Often, today’s web applications have complex UIs such that modifying the data in one area of the UI can directly and indirectly affect other areas of the UI. Two-way data binding via Knockout.js and Angular.js are popular solutions to this problem.
 

Image Upload and Manipulation with React

Image Upload and Manipulation with React Icon
A common thing web developers need to do is give users the ability to upload images. At first it might seem trivial, but there are things to think about when building an image upload component. Here are just some of the considerations: What image types will you allow? What size do the images need to be? How will that impact performance?
Home » React (60)
  • Page 1 of 3
  • »