https://github.com/kunukn/react-source-code-development
A web project for source code development for the ReactJS project
https://github.com/kunukn/react-source-code-development
Last synced: about 2 months ago
JSON representation
A web project for source code development for the ReactJS project
- Host: GitHub
- URL: https://github.com/kunukn/react-source-code-development
- Owner: kunukn
- License: mit
- Created: 2019-03-18T14:15:47.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T16:59:31.000Z (over 2 years ago)
- Last Synced: 2025-01-31T07:31:12.042Z (4 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.38 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React source code development
## About
Custom webpack-dev-server project for React source code development.
The aim of this project is to have the latest Webpack, Babel + plugins and better developer experience (DX). This web project should hot reload when the React source code has been updated.
If you want to use create-react-app instead, then there is a howto description at the bottom. Although that is a complicated affair and not good DX. You could fiddle with the build setup for the React source code to make it simpler.
_Last tested with React version: 16.13.0_
## Benefits of using this web project.
- This will hot reload your changes if you rebuild your React source code
- it does **NOT** use or need yarn link
- it does **NOT** use or need file copying
## Getting start
- Git clone react
- Git clone this project in sibling folder
E.g. now you have
- \some\path\react
- \some\path\react-source-code-development
If you don't have yarn installed already then from a command line
- Invoke `npm i -g yarn`
Invoke from react folder
- `yarn`
- Find this file `/react/scripts/rollup/build.js` and comment out this line `await asyncRimRaf('build');` This ensures that we don't delete everything before we build again.
- `yarn build react/index,react-dom/index --type=UMD_DEV`
Go to this project's folder and invoke
- `yarn`
- `yarn start`
Do your changes and invoke a build to update the change, e.g. a change for react-dom
- Go to react folder
- In the file `react/packages/react-dom/src/client/ReactDOM.js` add this consoleLog code snippet inside the `ReactDOM` object.
e.g.
```
const ReactDOM: Object = { // existing code
consoleLog: function log(){console.log(...arguments)}, // new code
```
- Invoke from React project: `yarn build react-dom/index --type=UMD_DEV` and wait until it finishes.
- The browser detect the change and refreshes automatically.
- In the browser console you should see a custom message invoked by the new ReactDOM method.
### Known hiccups
- Sometimes you need to restart the web project with `yarn start`, due to not detecting changes in the React source code.
## How does it work?
In this project Webpack is used where the react and react-dom are aliased to the react build file path.
It does **NOT** use yarn link or file copying.
---
---
# Using create-react-app for react source code development
## Benefits of this approach
- Spin up a new create-react-app and use it as development tool.
- You don't need this web project.
This approach uses create-react-app and yarn link
### Why so many steps?
The steps are long due to simply using `yarn link` in packages will yield runtime errors when you try to use it.
We want to ensure we use the `umd` builds.
Else you might experience errors like these:
```
Failed to compile
SyntaxError: \react\packages\scheduler\src\Scheduler.js: Unexpected token, expected ";" (109:24)
107 | // with the same priority and expiration as the just-finished callback.
108 | if (typeof continuationCallback === 'function') {
> 109 | var continuationNode: CallbackNode = {
| ^
110 | callback: continuationCallback,
111 | priorityLevel,
112 | expirationTime,
```
### The steps
1. Git clone the react project and go to the react folder
2. If you don't have yarn, then invoke from a command line `npm i -g yarn`
3. Invoke `yarn`
4. Invoke `yarn build react/index,react-dom/index --type=UMD_DEV` and wait until it finishes
_(to build both dev and prod use: `yarn build react/index,react-dom/index --type=UMD`)_
5. Change file content in `react/build/node_modules/react/index.js`
replace all `/cjs/` with `/umd/`
_alternatively replace it with `module.exports = require('./umd/react.development.js');`_
_alternatively adjust `package.json` main attribute to `"main": "umd/react.development.js",`_
6. Change file content in `react/build/node_modules/react-dom/index.js`
replace all `/cjs/` with `/umd/`
_alternatively replace it with `module.exports = require('./umd/react-dom.development.js');`_
_alternatively adjust `package.json` main attribute to `"main": "umd/react-dom.development.js",`_
7. Go to react/build/node_modules/react and invoke `yarn link`
_alternatively to yarn link, you can adjust in the package.json to point relatively to the location. e.g._
```
"react": "link:../react/build/node_modules/react",
"react-dom": "link:../react/build/node_modules/react-dom",
```
8. Go to react/build/node_modules/react-dom and invoke `yarn link`
9. go to your favorite project folder
10. Invoke `npx create-react-app my-react-app`
11. Invoke `cd my-react-app`
12. Delete react and react-dom dependencies from your package.json
13. Invoke `yarn`
14. Invoke `yarn link react react-dom`
15. Invoke `yarn start`
16. The React source code build should be picked up by create-react-app
17. Make a change in e.g. the react-dom project
18. Find the file `/react/scripts/rollup/build.js` and comment out this line `await asyncRimRaf('build');` This ensures that we don't have to delete everything before we build again.
19. From the react folder, invoke `yarn build react-dom/index --type=UMD_DEV` and wait until it finishes
20. Re-edit the `react/build/node_modules/react/index.js` and `react/build/node_modules/react-dom/index.js` from step `5` and `6`
21. From create-react-app project, stop the app and start it again with `yarn start`
22. The React source code changes should be picked up by create-react-app
To reduce the steps above, you could fiddle with the React build definition.
### dev or prod ?
To switch between production or development mode, here is an approach you could apply.
1. Build your react source code, e.g. for prod mode `yarn build react/index,react-dom/index --type=UMD_PROD`
2. Change the paths in the React index files from `/cjs/` to `/umd/` and replace `process.env.NODE_ENV` with `process.env.REACT_APP_ENV`
3. Create a `.env` file in your create-react-app project and insert following: `process.env.REACT_APP_ENV = 'production'`
4. `yarn start` your create-react-app
## More info
https://reactjs.org/docs/how-to-contribute.html