What IS React
Short introduction to React, the popular UI library backed by Facebook
React is an open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
React JS - The official logo
As mentioned in the official documentation, the easiest way to start using React is to write the code directly in your HTML files. Start by including three scripts, the first two let us write React code in our JavaScripts, and the third, Babel, allows us to write JSX syntax and ES6 in older browsers.
Here is a Hello World in React
1
<!DOCTYPE html>
2
<html>
3
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
4
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
5
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
6
<body>
7
8
<div id="app"></div>
9
​
10
<script type="text/babel">
11
class Hello extends React.Component {
12
render() {
13
return <h1>Hello React!</h1>
14
}
15
}
16
​
17
ReactDOM.render(<Hello />, document.getElementById('app'))
18
</script>
19
</body>
20
</html>
Copied!

​

Environment

To properly run a React project the workstation needs a minimal programming kit properly installed and accessible in the terminal.
  • ​Node JS - the ecosystem used by the React Library
  • A modern code editor like VsCode or Atom​
  • ​NPM - a package manager for Javascript
  • (optional) Yarn - a faster alternative to NPM
Also, the ability to work in the terminal and call system commands might speed up the development process. Once we have the NodeJS installed, we should install the create-react-app command-line tool in the global scope.
Step #1 - Install create-react-app (CRA) tool
1
$ npm install -g create-react-app
Copied!
Step #2 - Create the React app skeleton
1
$ npx create-react-app reactapp
Copied!
This command will create a new directory reactapp equipped with scripts and basic structure for a React project.
Step #3 - Install dependencies
1
$ cd reactapp
2
$ npm i
3
// OR
4
$ yarn
Copied!
Step #4 - Start the project (development mode)
1
$ npm run start
2
// OR
3
$ yarn start
Copied!
The output should be similar to this:
1
Compiled successfully!
2
You can now view reactapp in the browser.
3
​
4
Local: http://localhost:3000
5
On Your Network: http://172.22.160.1:3000
6
​
7
Note that the development build is not optimized.
8
To create a production build, use yarn build.
Copied!
CRA tool will open automatically the browser window with the React default page.
React App - The Default Page.
For more than a simple React app or template, AppSeed provided a generous index with full-stack starters built in React and powered by different technologies in the backend:
React Berry Dashboard - Premium Full-stack Dashboard
Last modified 3mo ago
Copy link
Contents
Environment