5 - Setting up React development environment
Last updated
Last updated
Starting up with React is a little bit of a challenge for people who are coming from vanilla JS or jQuery kind of background. This is because React code can't be sent directly to the browser. It won't work there. The primary reason is that React uses a non-standard syntax called JSX. JSX is created by Meta (formerly Facebook). It is similar to another extension syntax created by Meta for PHP called XHP. JSX is not a standard in the world. It is only relevant for the React code.
The browsers don't care about the non-standard proprietary technologies. Just because a technology is successful doesn't mean that it is a standard in the market. If browsers start supporting non-standard things, it'll become a maintenance nightmare for them. This isn't scalable, either. Browsers don't adapt to non-standard technologies. It is the other way. Non-standards adapt to browsers. The browsers only understand standard JavaScript (ECMAScript). They don't understand or care about anything that React introduces.
You can write code in anything you like. It doesn't matter to the browsers. They don't care. When the code reaches the browsers, it should be standard JavaScript. If not, it'd fail to execute. Due to this, we need to prepare a development environment for React where we can code in React/JSX. The React code gets converted to something that browsers can understand. Let's get started by preparing such an environment. Fortunately, with a utility called 'create-react-app', this is very easy. Also, there are other ready frameworks like Next.js that has been built on top of React. As this is a book about learning React, we'll still use create-react-app. There is no need to use additional frameworks.
If you ask anyone about how they set up a development environment for React, the answer is going to be create-react-app. This is the industry standard way of setting up a React environment for you to start with. Whether you're beginner or experienced, the start is usually from this utility. Your company might have some ready React boilerplates that are suited towards the company's standards. In that case, you've to use those boilerplates. But for normal cases (like this one where you're learning React), create-react-app is the way to go.
Note: The tide is slowly going toward Next.js instead of using React directly
The detailed instructions for using create-react-app are here: https://create-react-app.dev/. The create-react-app lets you start with React in seconds. Whether you’re using React or another library, Create React App lets you focus on code, not build tools.
To create a project called first-react-app, you can run this command:
You've read it right. You need to use a tool called npx, not npm. The first input is the type of project to create, and the second input is the folder where the project will be placed. This command takes time to finish as it downloads and install all dependencies.
You'll immediately notice that around 1450 packages got installed! You might wonder what's going on? Why do we need 1450 packages to set up a React development environment?
The reason is that React is a complicated technology that depends on hundreds of other packages for general functionality, building the code, and running development tools. React requires a build step because React code can not directly go to the browser. The build step takes the React code and converts it to code that can go to the browser. We'll get to this in a short while. First, let's look at the package.json.
The package.json present in the application folder (first-react-app) has the following dependencies:
We can ignore the first three and the last one for the scope of this book. We'll not be covering unit testing and reporting in this book. So these are not relevant. When we build the file.io service in React, we'll remove these dependencies.
The interesting ones are:
react: The main react package is required to create and use components and hooks
react-dom: The react-dom package contains react-dom/client and react-dom/server to render your app in the browser's DOM or inside a string (or a stream) on the server
react-scripts: The react-scripts package is a set of scripts from the create-react-app starter pack which helps you kick off projects without configuring. The react-scripts start command sets up the development environment and starts a server, as well as enables hot module reloading by default.
While react & react-dom are required to build React code, react-scripts takes care of the build tools & overall developer experience. The react-scripts uses two main build tools:
Babel: Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
Webpack: At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
In simple words, babel produces code that can run in all the browsers, while webpack combines (or bundles) everything into static assets files. These two tools are very important for React to produce a code that can run on the browser.
As a beginner, we don't have to worry about any of these tools. We don't have to pay any attention to them. For now, they don't even exist for us. That's the main purpose of using create-react-app. Everything we need has been downloaded and installed. The only required for us to do is to start the local development server which is provided by webpack.
The create-react-app's react-scripts also contains a webpack development server that'll host our local development environment. The development server can simply be started by running npm start command. The first run always takes a bit of time. The entire app code gets compiled & built. Subsequently, the hot reloading makes it faster to build incremental changes.
To view the React app, we can open the URL as suggested by the development server:
We can see the React logo and a single line that says 'Edit src/App.js and save to reload'. We'll make a small change and see if hot reloading works. You can open VS code, find the App.js file and change it like this:
Once you make the change. All you have to do is to save it. Behind the curtains, the new code will get compiled (incrementally) & built. The browser tab where we've opened http://localhost:3000 will also refresh automatically.
It does work perfectly!
--
Now that we have the development environment setup, let's move on to a typical structure of a React app.
