Muokkaa

Jaa

React overview

  • Artikkeli

What is React JS?

React is an open-source JavaScript library for building front end user interfaces. Unlike other JavaScript libraries that provide a full application framework, React is focused solely on creating application views through encapsulated units called components that maintain state and generate UI elements. You can place an individual component on a web page or nest hierarchies of components to create a complex UI.

React components are typically written in JavaScript and JSX (JavaScript XML) which is a JavaScript extension that looks like a lot like HTML, but has some syntax features that make it easier to do common tasks like registering event handlers for UI elements. A React component implements the render method, which returns the JSX representing the component's UI. In a web app, the JSX code returned by the component is translated into browser-compliant HTML rendered in the browser.

Does React work on Windows?

Yes. Windows supports two different environments for developing React apps:

What can you do with React?

Windows supports a wide range of scenarios for React developers, including:

  • Basic web apps: If you are new to React and primarily interested in learning about building a basic web app with React, we recommend that you install create-react-app directly on Windows. If you're planning to create a web app that will be deployed for production, you may want to consider installing create-react-app on Windows Subsystem for Linux (WSL), for better performance speed, system call compatibility, and alignment between your local development environment and deployment environment (which is often a Linux server).

  • Single-Page Apps (SPAs): These are websites that interact with the user by dynamically rewriting the current web page with new data from a server, rather than the browser default of loading entire new pages. If you want to build a static content-oriented SPA website, we recommend installing Gatsby on WSL. If you want to build a server-rendered SPA website with a Node.js backend, we recommend installing Next.js on WSL. (Though Next.js now also offers static file serving).

  • Native desktop apps: React Native for Desktop + macOS enables you to build native desktop applications with JavaScript that run across various types of desktop PCs, laptops, tablets, Xbox, and Mixed Reality devices. It supports both the Windows SDK and macOS SDK.

  • Native mobile apps: React Native is a cross-platform way to create Android and iOS apps with JavaScript that render to native platform UI code. There are two main ways to install React Native -- the Expo CLI and the React Native CLI. There's a good comparison of the two on StackOverflow. Expo has a client app for iOS and Android mobile devices for running and testing your apps. For instructions on developing an Android app using Windows, React Native, and the Expo CLI see React Native for Android development on Windows.

Installation options

There are several different ways to install React along with an integrated toolchain that best works for your use-case scenario. Here are a few of the most popular.

React tools

While writing a simple React component in a plain text editor is a good introduction to React, code generated this way is bulky, difficult to maintain and deploy, and slow. There are some common tasks production apps will need to perform. These tasks are handled by other JavaScript frameworks that are taken by the app as a dependency. These tasks include:

  • Compilation - JSX is the language commonly used for React apps, but browsers can't process this syntax directly. Instead, the code needs to be compiled into standard JavaScript syntax and customized for different browsers. Babel is an example of a compiler that supports JSX.
  • Bundling - Since performance is key for modern web apps, it's important that an app's JavaScript includes only the needed code for the app and combined into as few files as possible. A bundler, such as webpack performs this task for you.
  • Package management - Package managers make it easy to include the functionality of third-party packages in your app, including updating them and managing dependencies. Commonly used package managers include Yarn and npm.

Together, the suite of frameworks that help you create, build, and deploy your app are called a toolchain. An easy to setup development environment for react that uses this toolchain is Vite which generates a simple one-page app for you. The only setup required to use Vite is Node.js.

React Native component directory

The components that can be used in a React Native app include the following:

  • Core components - Components that are developed and supported as part of the React Native framework.
  • Community components - Components that are developed and maintained by the community.
  • Native components - Components that you author yourself, using platform-native code, and register to be accessible from React Native.

The React Native Directory provides a list of component libraries that can be filtered by target platform.

Fullstack React toolchain options

React is a library, not a framework, so may require additional tools to create a more complex app. In addition to using React, you may want to consider using:

  • Package manager: Two popular package managers for React are npm (which is included with NodeJS) and yarn. Both support a broad library of well-maintained packages that can be installed.
  • React Router: a collection of navigational components that can help you with things like bookmarkable URLs for your web app or a composable way to navigate in React Native. React is really only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of a routing library like React Router.
  • Redux: A predictable state container that helps with data-flow architecture. It is likely not something you need until you get into more advanced React development. To quote Dan Abramov, one of the creators of Redux: "Don't use Redux until you have problems with vanilla React."
  • Webpack: A build tool that lets you compile JavaScript modules, also known as module bundler. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.
  • Uglify: A JavaScript parser, minifier, compressor and beautifier toolkit.
  • Babel: A JavaScript compiler mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. It can also be helpful to use babel-preset-env so that you don't need to micromanage syntax transforms or browser polyfills and can define what internet browsers to support.
  • ESLint: A tool for identifying and reporting on patterns found in your JavaScript code that helps you make your code more consistent and avoid bugs.
  • Enzyme: A JavaScript testing utility for React that makes it easier to test your React Components' output.
  • Jest: A testing framework built into the create-react-app package to help with writing idiomatic JavaScript tests.
  • Mocha: A testing framework that runs on Node.js and in the browser to help with asynchronous testing, reporting, and mapping uncaught exceptions to the correct test cases.

React courses and tutorials

Here are a few recommended places to learn React and build sample apps:

Additional resources