Setting up your Environment page

The React Stack

In its simplest form React is just a library. When developing real-world applications, React is best used in combination with several other technologies. Let's take a look at some of these below:

• Babel - Babel is a JavaScript transpiler which allows developers to use the latest language features in a backwards compatible way. Specifically, React relies on Babel to transpile JSX (the syntax used to define components) into executable JavaScript code.
• Webpack - Webpack lets developers bundle their React components and apps into small, easily-servable bundles which are downloaded and run when the page loads. Additionally, Webpack can be configured for live-reloading during development.
• Jest - Jest is the most popular JavaScript testing library. It is built by the people behind React and can be used to test React components very easily.

Besides the three highlighted above, there are many other technologies which can make developing in React a better experience. While it is possible to configure a codebase which integrates all of them together, the React team provide a tool to do this for you. It is called Create React App.

Create React App

Create React App is a NodeJS package provided by Facebook (the creators of React) which gives developers the ability to create a foundation for React apps that follow industry best practices.

It also acts as a defacto standard for how React apps should be structured and organized. For example, most professional React developers could jump into a codebase generated by Create React App and feel right at home.

✏️ Use Create React App and npx to make your own app:

npx create-react-app myapp
cd myapp

This command will create a new app named myapp in a folder with the same name under the current working directory.

Note: the above command will use the npm registry to download and use the create-react-app package. This npx command comes with your install of npm.

Looking at Our Generated Project

Let's walk through some of the generated files.

├── node_modules/
├── public/
├── src/
├── .gitignore
├── package.json
├── README.md
├── yarn.lock/package-lock.json (depends if you're using yarn or npm)

/public

The public folder contains static assets which will be served up as part of your website. You can include stylesheets, images and other static files. The most important file here is index.html, which is the page that will render React by default.

Anything put inside this directory will be copied as-is into the build directory during the build process. Generally, you shouldn't need to touch this folder too much.

/src

The src folder is where all your React components should be stored alongside any logic for your app. This should already be seeded with a small sample app.

The index.js file is known as the entry point of the React application. This is where our application is initialized and mounted in the DOM.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// Mounts React to the DOM via ReactDOM
ReactDOM.render(<App />, document.getElementById('root'));

Note: feel free to hover above the above code snippet as well as future code snippets to see a copy button, or in other cases a copy and a run button which will open the code in a CodeSandbox environment.

package.json

The package.json file is kept intentionally small, and includes only a few dependencies by default:

"dependencies": {
  "@testing-library/jest-dom": "^5.11.4",
  "@testing-library/react": "^11.1.0",
  "@testing-library/user-event": "^12.1.10",
  "react": "^17.0.1", // The React library
  "react-dom": "^17.0.1", // Helper functions to output a React tree as HTML
  "react-scripts": "4.0.0", // CLI tools the manage the application
  "web-vitals": "^0.2.4"
}

If you are wondering where the Webpack and Babel dependencies are, they are hidden as dependencies of react-scripts.

Create React App provides a set of scripts (react-scripts) which know how to start, build and test your app. It's generally recommended to leave these as is, as a lot of work has been put into these scripts to ensure the best developer experience possible. These can be found in the scripts section of your package.json, and you may expand this list with new scripts as you need.

"scripts": {
  "start": "react-scripts start", // Launch live server for development
  "build": "react-scripts build", // Build and optimize the application for production
  "test": "react-scripts test", // Runs tests
  "eject": "react-scripts eject" // Expose hidden configuration options (Dangerous)
}

The final script, eject, is very important and dangerous. In order to simplify your workflow, Create React App hides the Webpack, Babel and Jest configuration files. By running npm run eject, all of the internal packages in react-scripts will be copied and put into your package.json as well as the default webpack config, and other internals. This allows you more control if you absolutely need it, though the downside is that you don't gain access to updates to the create-react-app project.

Note that ejecting is generally not recommended unless absolutely necessary.

Deployment

One of the benefits of using react-scripts is its great build process. When you run the npm run build command, your site will automatically be bundled, minified, and written into a build folder.

You can then upload the folder to any webserver to be served statically (just like a normal HTML website), no special configuration required.

Try it out

Inside the myapp directory, run

npm run build

The final command will build the site and create a build folder. Check out the generated files. Notice how they're nicely minified and bundled!

More information on the build folder and on deployment in general can be found in the Create React App documentation.

Next Steps

✏️ Head over to the next lesson to learn more about JSX.