So what does React do? In short, it helps us efficiently create dynamic applications.
You are encouraged to explore reactjs.org for the juicy details.
It's super popular! React is one of the "Big Three" for front-end web development and is an often sought after skill for software engineers (i.e. you can put it on your resume). If you're curious what else is out there, here's an article. React is just one of many options for app development, and it's far from perfect.
On this wiki, we'll cover some basic and advanced topics, but it won't be comprehensive. To get a more comprehensive understanding of React and how it fits in to application development, I
highly recommend insist on watching this video. It's long, but very thorough and easy to digest (even at 1.5x speed). The first part is an introduction, and it gets into development at 46:42. Nearly the entire video is useful, but feel free to skip around.
React by itself can get messy when creating a complex application. But never fear, this wiki also introduces Redux, a popular state management library that is well designed to address this.
The easiest way to create a React app is using create-react-app.
npm install -g create-react-app
To create a project folder called 'my-app' in you current directory:
To host the app on localhost:3000:
cd my-app npm start
This will automatically open your web browser, where you will see the welcome page that comes with create-react-app.
npm start also uses "hot-reloading," so any changes made to the code will automatically cause the page to reload.
To compile the app into a standalone production build:
npm run build
Let's take a look at some files:
This is where npm stores the libraries used by your project.
This file lists all the npm libraries you use. When collaborating on a project, you will share this file, as opposed to 'node_modules'. From the project folder, the command
npm install will read package.json and install everything listed there to 'node_modules'. When you want to add a dependency to your project, use
npm install some-package --save. The '--save' tells npm to add the package to package.json, so others will have it next time they
You may also notice the "scripts" section, which defines shortcuts for commands. To use them, type
npm run name-of-script. For "start" script only, you can omit the word 'run' (hence
This is the entry point of your app. You'll see it renders <App/>, which brings us to...
Finally, look how App.js imports App.css...
This file is just plain old CSS, but there's a catch. You might think that a CSS file applies to the component it is imported in, BUT actually any CSS file that is imported anywhere applies to the entire app. This is a minor drawback of React, and it just means you have to be somewhat careful about avoiding name clashes of HTML classes, ids, etc.
First look at 'index.html,' which contains some comments to explain what it is for. The important thing is that it is not the actual index.html. You won't use it for much, except for adding scripts from the internet, such as the Google Maps API.
Anything else you put in the public folder is directly accessible via URL. For example, localhost:3000/favicon.ico. When you build for production using
npm run build, the contents of 'public' are put directly in the build folder.
To make your React code look pretty, Google how to get React/JSX syntax highlighting in your favorite text editor. Sublime Text users can install babel-sublime.