Getting Started With React

My first post is going to be about how to start using React. React is a JavaScript library for building user interfaces. React makes it easy to create interactive UIs. With React you build components that manage their own state, and then compose them to make your UI.
Before you get started there are a few prerequisites. First, you need a decent understanding of JavaScript and ES6. Second, you need to have Node.js installed, (at least version 6.0). You can install it on Windows, Mac, or Linux. If you have it installed you can check what version you have by entering node -v in your terminal. Also, whenever you see a code block like npm -v it means enter the command into your terminal and press enter.
Once you have Node installed, you’re ready to go. A few years ago it was a pain to just get started with React. It required a complicated Webpack setup and all sorts of boilerplate code just to write your first component. Fortunately, Facebook has created a tool for easily starting a React project. create-react-app. To get it up and going you need to install it by entering npm install -g create-react-app. Npm is the package manager for Node.js and it comes installed with Node. When it finishes installing, run the following:
create-react-app myproject
cd myprojectThis will create a directory called myproject inside your current folder. Inside that directory, it will generate the project structure.
With zero configuration you get all sorts of goodies:
- React, JSX, ES6, and Flow syntax support.
- Language extras beyond ES6 like the object spread operator.
- A dev server that lints for common errors.
- Import CSS and image files directly from JavaScript.
- Autoprefixed CSS, so you don’t need -webkit or other prefixes.
- A build script to bundle JS, CSS, and images for production, with sourcemaps.
- An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.
With create-react-app installed you have several npm scripts at your disposal.
npm startThis starts a dev server on http://localhost:3000. This page will reload if you make edits to any of your files.

You also get build errors and linting errors in your terminal console like this.

npm testThis command starts your test watcher. To learn more about testing with create-react-app check out the guide.
npm run buildThis creates a production build of your app in the build folder. This bundles and optimizes your build. With this you’re ready for deployment to your server. To learn more about different deployment strategies. Check out the docs.
And now you are ready to start developing your React app. Next post we will get into the nitty-gritty of React and build a simple weather app to tackle the React API and the different lifecycle methods.

