Bootcamp
Searchโฆ
๐
Course Schedule
๐
Course Logistics
๐
Projects
0: Language and Tooling
1: Frontend Basics
๐
CSS
2: Backend Basics
3: Backend Applications
4: Backend Structure
5: Full-Stack Applications
6: Frontend Infrastructure
7: React
8: Advanced React
9: Advanced Topics
๐งฎ
Algorithms
๐ผ
Interview Prep
โบ
User Experience
0: Language and Tooling Teaching Guide
1: Frontend Basics Teaching Guide
๐
CSS Teaching Guide
2: Backend Basics Teaching Guide
3: Backend Applications Teaching Guide
4: Backend Structure Teaching Guide
5: Full-Stack Applications Teaching Guide
6: Frontend Infrastructure Teaching Guide
7: React Teaching Guide
8: Advanced React Teaching Guide
9: Advanced Topics Teaching Guide
๐งฎ
Algorithms Teaching Guide
๐ผ
Interview Prep Teaching Guide
โบ
User Experience Teaching Guide
8.1: Create React App
We are seeing this last because it comes with all the React infrastructure built-in. However, when using CRA in the real world it necessitates a different back-end architecture. We'll also be deploying an express MVC server repo alongside our Create React App repo. These will be connected through AJAX requests made from the React app to the Express.js server.
Note that in this architecture the CRA server and the express server must be different domains or sub-domains or, if they were on the same domain, another piece of architecture would be built that determines how to route requests to one or the other. In this example we'll use 2 completely different domains.
- 1.The React app is deployed. The Webpack build process is triggered. The resulting production files are put into the
/distdirectory. - 2.Some time later a user requests for the website with the react app on it. (
rocketacademy.com) - 3.The Create React App file server serves the HTML file and the React app JavaScript to the browser. The React app is initialized in the browser.
- 4.Some time later a user action causes an AJAX request to be created inside the React app. (
api.rocket-a.com) - 5.The request is received at the Express.js server. The app looks in the database and sends back a JSON response.
- 6.The JSON data is received and processed by the React app. React manipulates the DOM to show that data on screen.
How To
Using Create React App (CRA) is easy. Here is an example of using Create React App without any back-end database.
Run the create-react-app command and give a name to the react app.
1
npx create-react-app <APP_NAME>
Copied!
Create React App creates a folder and all the boilerplate files. It also runs
npm install for all the default dependencies.
Some small changes have been made to the React app, like
App.jsx is renamed to App.js. Some testing files are added by default that we will not be using during the course. Otherwise, the structure of the files is the same.cd inside the directory and start the Webpack dev server.1
cd <APP_NAME>
2
npm start
Copied!
Webpack will compile the files and start watching the app for changes. Anything that changes will be hot-reloaded.
Last modified 2mo ago
Copy link
Contents
How To