Build Course Boilerplate
Video Lecture
Section | Video Links | |
---|---|---|
Build Course Boilerplate | ![]() |
![]() |
Description
We will now build a bare minimum React Three Fiber boilerplate that we will use to start the course.
The boilerplate is almost the absolute minimum that you need to get React Three Fiber to display a Three.js scene. We will make many additions to the boilerplate as the course progresses.
Create Project Folder
Now to start creating our working folders and files.
Open a command/terminal prompt and create a new folder on your system somewhere.
mkdir react-three-fiber-boilerplate
CD into the new folder.
cd react-three-fiber-boilerplate
Create ./package.json
In your projects root folder, create a new file named package.json
Copy/paste the script below into it and save.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
Create ./src/index.jsx
Create a new folder in your project root called src
Add a new file named index.jsx
Copy/paste the script below into it and save.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
Create ./src/styles.css
In the ./src
folder, add a new file named styles.css
Copy/paste the script below into it and save.
1 2 3 4 5 6 7 |
|
Create ./public/index.html
Create a new folder in your project root called public
Add a new file named index.html
Copy/paste the script below into it and save.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
Install It
Install the dependencies
listed in the package.json
npm install
Start It
And now we can start it.
npm start
A browser should automatically open at the address http://localhost:3000/
If not, then you can open a browser and visit http://localhost:3000/
manually.
You should see a green wireframe cube in the browser.
Summary
Now this is basically the bare minimum you need to see a React Three Fiber Threejs scene in your browser. If you are experienced with React already, you may have been tempted to run npx create-react-app react-three-fiber-boilerplate
for example. You could have done this, and still installed the React Three Fiber and Three.js dependencies manually, but you would have many more files in your project that may distract you while learning. This is something that you can experiment with later just to compare the difference and see if you prefer it.
Now, your project file structure should now resemble,
|-- react-three-fiber-boilerplate
|-- node_modules
|-- (Many extra files and folders containing the required dependencies)
|-- public
| index.html
|-- src
| index.jsx
| styles.css
|-- package.json
|-- package-lock.json
When installing the dependencies earlier, it saved all the required libraries into the node_modules
folder to be used when React starts and builds our project.
Prettier
As an extra tool to help us format our code, I like to use prettier
in my VSCode IDE.
Add a file named .prettierrc
to your project root folder, copy-paste the script below and save.
1 2 3 4 5 6 7 8 9 10 |
|
Now in VSCode, when you press the SHIFT ALT F keys together, it will format your code consistently according to those rules above. This is optional.
ESLint
It is useful to have a linter check your code as you develop it. You can also add the ESLint linter to your project if you desire.
Create a file in your project root named .eslintrc
and add the following code to it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
Then in VSCode, open the Extensions tab on the left, search for ESLint and install it.
Now when you edit and save your code, ESLint will check it for common mistakes and make suggestions.
GitHub
This boilerplate as it is now, can also be viewed, forked and downloaded from GitHub.
git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
npm install
npm start
Visit http://127.0.0.1:3000
You should see a black screen with a green wireframe cube.
Working Example
This boilerplate as it is now, can also be viewed, forked and downloaded from CodeSandbox.