React is a web front-end framework written in JavaScript (JS) programming language.
React is part of the MERN development framework, that stands for MongoDB, Express, React and Node.js.
You can find an introduction to JavaScript on this post.
You can find a list of alternative front-end web frameworks on this post.
React Concepts
React is based on 4 main concepts:
- Components
- JSX
- States
- Props
- Hooks
- Routing
JSX is a syntax extension for JavaScript. You can find more information about JSX on this external link.
React Tools
Editors and IDEs for React
You can find:
- On-premise Editors and IDEs
- Cloud Editors and IDEs
On-premise Editors and IDEs
Visual Studio Code
Visual Studio Code is a source code editor for multiple programming languages (C#, Python, etc. and JavaScript). It is developed by American company Microsoft.
Atom
Atom is a source code editor for multiple programming languages.
Sublime Text
Sublime Text is a source code editor for multiple programming languages.
WebStorm
WebStorm is an on-premise IDE developed by Czech company JetBrains, focused on development on JavaScript.
It is paid and proprietary software. Unlike other JetBrains products, there is no free and open-source (FOSS) community edition.
Reactide
Reactide is an IDE specific for React.js. It is free and open-source (FOSS).
Rekit Studio
Rekit Studio is a toolkit for building scalable web applications with React, Redux and React-router.
Nuclide
Nuclide is an IDE with built-in support for JavaScript.
To find more information about compatibility between Nuclide and React, please read this external link.
Cloud IDEs
CodePen
CodePen is an online JavaScript editor.
Hello World Program
Code for a “Hello world” React program.
HTML file:
<div id="root">
<!-- This element's contents will be replaced with your component. -->
</div>JS file:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello, world!</h1>);React Reference
You can find the React official documentation on this external link.
Learning React
Prerequisites to learn React
To work with React, you need a good understanding of the following technologies:
- HTML
- CSS
- JavaScript
You can find information about how to get introduced on web development on this post.
Resources to learn React
You can find the official React learning resources on this external link.
React Books
“React: Up & Running: Building Web Applications”
“React: Up & Running: Building Web Applications” is a book written by Stoyan Stefanov.
It is published by O’Reilly.
React: Up & Running: Building Web Applications at OpenLibrary
“Learning React”
“Learning React” is a book written by Alex Banks and Eve Porcello.
“Learning React: Modern Patterns for Developing React Apps” is the full name of the 2020 edition.
Learning React: Modern Patterns for Developing React Apps at OpenLibrary
It is published by O’Reilly.
React Web Courses
“Learning React” at Scrimba
“A Brief Introduction to React” by Mark Mahoney
“A Brief Introduction to React” by Mark Mahoney at FreeCodeCamp.
“A Brief Introduction to React” at FreeCodeCamp
“React for Beginners – A React.js Handbook for Front End Developers”
React for Beginners at FreeCodeCamp
“Curso de React desde cero” by midudev
“Curso de React desde cero” is a course in Spanish by midudev.
Curso de React desde cero by midudev
React Native
React Native is a framework to create cross-platform applications for smartphones. It is compatible with Android and iOS.
It is based on the React web framework. It uses similar components as React.
You might also be interested in…
External references
- React; “React“; React